Popular Front-end build tool comparison, and gulp configuration

The front-end is now three pillars the build tool (not the older Ant,yeoman), not fis,grunt,gulp.

FIS is the simplest to use, I intend to own the project using FIS.

Let's talk about Gulp installation.

The first step: Install node and NPM to build the node environment.

Access http://nodejs.org. NPM is installed along with the installation package.

Make sure that node and NPM are installed and that if the following two command lines are not properly installed, node is not installed correctly.

$ node-v  v0. 12.6-v  2.11.2

Step Two: Install Gulp

know NPM: NPM is a command-line-based node package management tool that installs node's program module into a project and can view and search all available program modules on its website.

1. sudo executes the command as an administrator and typically requires a computer password

2. NPM is the tool for installing the node module, executing the install command

3. -G means installed in the global environment so that any project can use it

4. Finally, Gulp is the name of the node module that will be installed
5. When finished, enter the command line on the terminal (Terminal) to see if the Gulp has been successfully installed

   Yangh1demac-mini:static_global yangh1$ Gulp-vCLI version 3.9.0Local version 3.9.0

6. We need to install Gulp to project Local

• NPM Install--save-dev Gulp

  Here, we use —-save-dev to update the Package.json file, updating the devDependencies value to indicate that the project needs to rely on gulp. Dependencies You can indicate to other participants in the project that the node module in the development environment and production environment is lazy and want to know more about it to see the Package.json documentation.

Step Three: Create a new Gulpfile file and run the Gulp

After installing gulp we need to tell it what to do for us, first of all we need to figure out what tasks the project needs.

• Check JavaScript
• Compiling sass (or less) files
• Merging JavaScript
• Compress and rename merged JavaScript

Install dependencies, reminders, if the above command prompts permission errors, you need to add sudoTry again.

New Gulpfile File

Now that the components are installed, we need to create a new Gulpfile file to specify what the gulp needs to accomplish for us.

Gulp has only five methods:,,, task run watch src , and dest , in the project root, create a new JS file and name it gulpfile.js , paste the following code in: /// Introduction of Gulp

varGulp = require (' Gulp ')); //Introducing ComponentsvarJshint = require (' Gulp-jshint '));varSass = require (' Gulp-sass '));varConcat = require (' Gulp-concat '));varUglify = require (' gulp-uglify '));varRename = require (' Gulp-rename '));

//Check ScriptGulp.task (' Lint ',function() {GULP.SRC ('./js/*.js '). Pipe (Jshint ()). Pipe (Jshint.reporter (' Default '));});//Compiling sassGulp.task (' sass ',function() {GULP.SRC ('./scss/*.scss '). Pipe (Sass ()). Pipe (Gulp.dest ('./css '));});//merging, compressing filesGulp.task (' Scripts ',function() {GULP.SRC ('./js/*.js '). Pipe (Concat (' All.js '). Pipe (Gulp.dest ('./dist '). Pipe (Rename (' All.min.js ') . Pipe (Uglify ()). Pipe (Gulp.dest ('./dist '));});//Default TaskGulp.task (' Default ',function() {Gulp.run (' Lint ', ' sass ', ' scripts '); //Monitor file ChangesGulp.watch ('./js/*.js ',function() {Gulp.run (' Lint ', ' sass ', ' scripts '); });});

1. Introduction of components: We have introduced the core gulp and other dependent components, and next, create lint, sass, scripts, and default four different tasks separately.

2.lint:link task will check js/ the directory to get the JS file has no error or warning.

3.sass Task: The Sass task compiles the scss/ scss file in the directory and saves the compiled CSS file to the /css directory.

4.Scripts Task: Scripts task will merge js/ all the JS files in the directory and output to the dist/ directory, then Gulp will rename, compress the merged files, also output to the dist/ directory.

5.defaul task: We have created a default task based on other tasks. Use .run() methods to correlate and run the tasks defined above, use the .watch() method to listen for file changes in the specified directory, and, when there are changes to the file, run other tasks defined by the callback.

Look at some more

Gulp and Grunt relatively good article: http://www.jianshu.com/p/3779f708f5d7/I think the writing is relatively clear.

1190000002491282

Gruntfile is so difficult to maintain, there are several reasons:

• Configure and run Detach
  Programmers know that the declaration and use of variables are the most convenient to understand and modify. But in Gruntfile, the allocation of tasks and the place where they were called were far away, greatly increasing the mental burden.

• Every plug-in is doing too much.
  The result of each task must be written to disk file, another task re-read, damage performance is trivial, the more troublesome is to make the whole process become complicated.
  Like a small workshop, processing and return to the customer, the middle of the communication costs, error opportunities are greatly increased.

• Too many configuration items
  Do more things, more natural configuration items. At least the input and output locations should be fitted. The configuration rules for each plug-in are different. With each plugin, you have to learn.

How the Gulp is resolved:

• Configure and run Detach
  Code over configuration, which is configured directly on the calling location.

• Every plug-in is doing too much.
  A single responsibility, relying on a combination to play a role. Just like an automated production line, the output of the previous process is delivered directly to the next step, not too high efficiency.

• Too many configuration items
  Since everyone follows the same protocol, many configurations are not needed.

Popular Front-end build tool comparison, and gulp configuration