Introduction: The basic meaning of automated build refers to the automatic compilation of source code written in the development environment into production code that can be run by the machine, including the latest es6 supported syntax in the source code, SASS, template engine, etc. It can improve the efficiency of developing code without affecting the operation of the production environment.

Before the use of grunt, gulp tools, NPM Script could be used as a simple run command to simplify the build process. Is the easiest way to automate builds.

That give chestnuts 🌰!! For example, to install sass, enter the following command

yarn add sass --dev
./node-modules/.bin/sass   // Enter the command file to find the specific usage
./node-modules/.bin/sass  sass/index.scss   css/index.css   // Input file path and output file path
Copy the code

To simplify the process, you can add script fields directly to pakeage.json. Since scripts will automatically find the command under node_modules, just write the project name here.

"scripts": {"build": "sass sass/index.scss css/index.css "
}
yarn build
Copy the code

If multiple commands need to be consecutively specified, you can use preserve to perform the command before running it. This automatically executes the YARN Build command before the yarn serve command.

yarn add browser-sync --dev
"scripts": {
    "build": "sass index.scss css/index.css "."preserve": "yarn build"."serve": "browser-sync ."
  },
 yarn serve
Copy the code

When parallel processing is required

yarn add npm-run-all --dev
 "scripts": {
    "build": "sass index.scss css/index.css --watch"."serve": "browser-sync ."."start": "run-p build serve"
  }
 yarn  start
Copy the code

Others: Optimized sASS file listener and browser listener code

"scripts": {
    "build": "sass index.scss css/index.css --watch"."serve": "browser-sync . --files \"css/index.css\""."start": "run-p build serve"
  },
Copy the code