Automated build

What is building

By build, we mean the process of converting source code into production code.

Why do I need to convert source code to production code? Or what needs to be built?

  • The code needs to be compiled (CSS3, JS6+) to ensure browser compatibility
  • Code needs to be compressed (CSS, JS, HTML, images, etc.). Saves bandwidth and improves loading speed
  • The code needs to do formatting verification, uniform code style.

All of these questions are built.

What is an automated build

Whether it’s code compression or less conversion, doing it manually is a lot of work (for example, manually compressing 2000 lines of code would drive the programmer crazy). An automated build is the process of manually building tasks, arranging and combining them, and then executing them automatically through commands (or tools). The simplest way to implement an automated build is NPM Scripts.

npm scripts

NPM allows you to define script commands using the scripts field in package.json files.

{
  "scripts": {
    // Command name: task
    "foo": "node bar.js"}}Copy the code

The scripts field is an object. For each of its properties, there is a script. For example, the script for the foo command is Node bar.js.

#This script can be executed from the command line using NPM run < command >.
npm run foo
#Equivalent to execution
node bar.js
Copy the code

NPM Scripts Task execution mode

If multiple tasks need to be executed in an NPM script, you need to know in what order they should be executed. How to choose the right task execution sequence?

  • Serial execution: There is a clear sequence between tasks, the previous task must be executed before the next one can be executed
    • It’s the equivalent of the 4X100 relay, where the next member of the team can only run after the baton is passed on
  • Parallel execution: Tasks are executed at the same time without a clear order, which improves efficiency
    • It’s the equivalent of a 100-meter dash, with eight people starting at the same time

If the execution is parallel (that is, parallel execution at the same time), it can be used&Symbols.

{
  "scripts": {
    "parallel": "node task1.js & node task2.js & node task3.js"}}Copy the code

If the execution is sequential (the next task is executed after the previous one succeeds), use the && symbol.

{
  "scripts": {
    "series": "node task1.js && node task2.js && node task3.js"}}Copy the code

However, the ampersand does not work on Windows. At this point, we can use the plug-in, under Windows implementation and nPm-run-all

 #Install in your project first
npm i npm-run-all -D
   
#Parallel execution: where P stands for parallelNpm-run-all -p Script 1 Script 2 Script 3#Or abbreviated toRun -p Script 1 Script 2 Script 3#Serial execution: where S stands for seriesNpm-run-all-s script 1 Script 2 Script 3#Or abbreviated toRun -s Script 1 Script 2 Script 3Copy the code

Build style files

Building a style file is a process of converting source code for CSS (including Less or Sass) from the development environment into code for use in the online environment. There can be multiple build tasks here. Take building style files compiled and compressed by Less as an example:

  1. Compiling less files
NPM I less -g # In package.json, add less parsing command"scripts": {
    "style": "lessc style.less style.css"} # execute command (automatically compiled) NPM run styleCopy the code
  1. Compressing CSS Files
NPM I minify -g # Add the minify compression command to package.json"scripts": {# compile && then compress"style": "lessc style.less style.css && minify style.css > style.min.css"} # execute command (automatically compiled) NPM run styleCopy the code

Build script file

To solve the ES6+ browser compatibility problem, we need to build script files to handle it.

During development, new ES6+ features are often used when some older browsers do not support the new JS syntax. So, before the project goes live, the new syntax features need to be parsed into ES5, which is more compatible. The most commonly used compilation tool is Babel, a plug-in that converts ES6+ new syntax into ES5. Babel’s website: babeljs. IO /

Construction steps:

  1. Initialize the project (npminit-yes)
  2. Install Babel (npminstall-gbabel- coreBabe cli)
  3. Install conversion rule (npminstall-gbabel-PRESET – ENV)
  4. Configure transformation rules ()
  5. Add conversion commands to NPM scripts (babelsrc-ddist)
  6. Execute conversion command
NPM i-g Babel -core Babel -cli! [image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4619ed4d23244cff818573e629536278~tplv-k3u1fbpfcp-watermark.image)NPM I -g babel-preset-env # In the root directory of the project, create a. Babelrc file (note that there is a mark before the file name) and add a preset rule {"presets": [
      "env"]. } # compile a single js file with Babel input.js --out-file output.js # or Babel input.js -o output.js # compile an entire directory with Babel js -- out-of-dir scripts # or Babel js -d scripts # Add the Babel parsing command to package.json"scripts": {
    "script": "babel js -d scripts"} # Execute command (automatic compilation) NPM run scriptCopy the code

If Babel is partially installed. The executable path of Babel is./node_modules/.bin/ Babel

The command needs to be adjusted accordingly

babel js -d scripts ===> ./node_modules/.bin/babel js -d scripts

Adding compression commands

# In package.json, add Babel parsing and compression commands"scripts": {
    "script": "babel js -d scripts && minify scripts/main.js > scripts/script.min.js",}Copy the code

Automated builds are critical to modern front-end development, and this has led to many excellent automated build tools. Gulp is recommended.

Code format check

Every programmer has his or her own coding habits, the most common being:

  • Some people have to put a semicolon at the end of their code;Some people don’t want a semicolon;Look better;
  • Some people like to use double quotes when they write strings, some people like to use single quotes;
  • Some people like to indent with 4 Spaces, some people like to indent with 2 Spaces;

And so on and so forth, but project development is usually a multi-person collaboration, so different engineers write different code styles. It doesn’t matter how you write your own code, but there needs to be a common code specification for the whole project. So others can read the source code to understand.

The problem is, you can’t go through the code line by line, it’s stupid. All repetitive tasks should be done with tools.

This tool should do two things:

  1. Provide coding specifications
  2. Automatically check the code according to the coding specification.

In front-end engineering, different codes are tested by different tools.

For example: normally we use ESLint to detect JavaScript code; We use StyleLint to detect CSS code.

ESLint use

ESLint is an upgraded version of JSLint, a plugin used to check the quality of JS code. ESLint allows you to unify the code styles of different developers.

Liverpoolfc.tv: eslint.org/

ESLint uses the following steps:

  1. Initialize the project (NPM init –yes)
  2. Install ESLint (NPM I eslint-g)
  3. Initialize configuration files (esLint –init)
  4. Check the JS code format
    • Single file (esLint Path /filenamejs)
    • Entire directory (eslint path/dirname)

Create the project first

Mkdir lint-demo CD lint-demo # Initialize the project and generate package.json NPM init --yesCopy the code

Install ESLint:

However, there is one prerequisite for using EsLint: Node.js (>=6.14), NPM version 3+.

$ npm i eslint -g
Copy the code

Initialize a configuration file:

# Go to the interactive window and ask some questions. Generate configuration files based on the problem such as.eslintrc.json $eslint --initCopy the code

Configuration rules

Rules: {” rule name “: [rule value, rule configuration]}

The regular values are 0 = OFF, 1 = WARN, and 2 = error

“Off” or 0 – Turns off the rule

“Warn” or 1 – Turn on the rule and use a warning level error: WARN (will not cause the program to exit)

“Error” or 2 – Enable the rule with error level: error (when triggered, the program will exit)

For more details, see eslint.org/docs/rules/

# config check rule {"env": {
        "browser": true."commonjs": true."es2021": true
    },
    "extends": "eslint:recommended"."parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
        "indent": [ "error".2], # indent with two Spaces"quotes": [ "error"."double"] # wrap string around double quotation marks}}Copy the code

After that, you can run ESLint on any file or directory as follows:

$ eslint yourfile.js
Copy the code

Read more: There are several tools for checking JS code styles. In addition to ESLint, another commonly used tool is Standard:

Github.com/standard/st…

StyleLint use

StyleLint is a plug-in that detects CSS code formatting.

Liverpoolfc.tv: stylelint. IO /

Use steps:

  1. Initialize the project (npm init --yes)
  2. Install StyleLint (npm install --global stylelint)
  3. Installation inspection Standard (npm install --global stylelint-config-standard)
  4. Creating a configuration file (.stylelintrc.json)
  5. Check the CSS code format
    • Single file (stylelint path/filename.css)
    • The entire project (stylelint **/*.css)

At the beginning of StyleLint experience

Installing a plug-in

Code style standard: github.com/stylelint/s…

NPM I --g stylelint stylelint-config-standardCopy the code

In the root directory of the project, create the.stylelintrc.json file and add the following configuration

{
  "extends": "stylelint-config-standard"."rules"In addition to using the stylelint-config-standard, we can also customize the validation rules in the Rules field"block-no-empty": true# code block cannot be null}}Copy the code

Run the stylelint to detect the CSS code format

# Detect the entire item under all CSS files stylelint **/*.cssCopy the code