The concept of automated builds

Automated construction is a very important part of front-end engineering. ** Before we get started, automation means handing over the manual parts to the machine. Build can be understood as transformation, which means converting the code we write into code that runs online.

The automated build is the automatic conversion of the original code that we write into the code that runs online.

This process of transformation is also known as an automated build workflow.

Using the latest EcmaScript syntax to improve coding efficiency, using Sass or less to enhance THE programmability of CSS, using a template engine to abstract repetitive HTML from a page, etc., are not directly supported in a browser. Automated build tools are designed to turn unsupported code into code that can be run directly.

In general, automated builds free us from the various compatibility issues of the runtime environment and enable us to use efficient syntax, specifications, and standards.

NPM Scripts automates the build

What is NPM Scripts? NPM allows you to define script commands in package.json files using the scripts field, where the field name is the command execution key and the field value is the specific command to execute.

After the configuration is complete, you can see the result of foo.js by executing NPM run foo on the command line.

NPM scripts can execute multiple command tasks at once, but it is important to note that **** serial execution and parallel execution of command tasks are different. What are serial and parallel execution respectively?

Serial execution (series) : Tasks are connected by ampersand (two ampersand symbols). Tasks are ordered in sequence, and the next task can only be performed after the completion of the previous task. It is like a relay race.

Parallel execution: Parallel execution uses an ampersand (an ampersand symbol) to connect tasks in any order. Simultaneous execution improves execution efficiency, similar to a 100-meter race in which several people run.

NPM I less minify -g, NPM I less minify -g, NPM I less minify -g, NPM I less minify -g

After scripts is configured, you just need to execute NPM run styles to perform the two different tasks. This is the core idea of automated builds.

In addition, it should be noted that parallel execution is not supported in Windows system environment. We can use the npm-run-all plug-in to implement different tasks.

Automated build tools

NPM scripts is the one we use most, configured in packag.json files to execute multiple commands at once.

Grunt

www.gruntjs.net/ : Build tools for the JavaScript world.

The Grunt ecosystem is huge and growing all the time. With the vast number of plug-ins to choose from, you can do almost anything automatically with Grunt at minimal cost.

Gulp

www.gulpjs.com.cn/ : Enhance your workflow with automated build tools!

Enhance your workflow with automated build tools!

FIS

FIS3, a customized front-end engineering build tool for you.

Solve front-end development automation tools, performance optimization, modular framework, development specifications, code deployment, development process and other issues.

Basic use of Gulp

  • NPM install -g gulp-ci;

  • Initialize the project NPM init-y

  • NPM install gulp -d

  • Create gulpfile (gulpfile.js);

  • In gulpfile JS, create a gulp task.

  • Example Run the gulp task gulp

Gulpfile. Js:

Run gulp foo

We can see an error message indicating that the task is not complete, if you forgot to send the asynchronous completion signal.

This error occurs only in the new version of GULp. The reason is that all tasks in gulP are asynchronous, so in the code, we can use an asynchronous callback function to send asynchronous signals.

If the exported member name is default and the member method is executed by default, you do not need to specify the member name in the command line.