Gulp installation configuration process and some small pits

Talk about Gulp.

At the end of the project, the teacher asked me to familiarize myself with the grunt front-end automation tools, the first time I know this stuff, I looked up all kinds of information ah, found that grunt has been ' outdated ', we all use Gulp and webpack. Of course I chose to configure the simplest gulp=-=

Gulp is a NODEJS-based automatic task runner, the basic process is to first install Nodejs, through the Nodejs NPM Global installation and project Installation Gulp, followed by the project to install the required Gulp plug-in, Then create a new gulp configuration file Gulpfile.js and write the configuration information (define the Gulp task), and finally run Gulp from the command prompt (Webstorm artifact is simpler).

Install Nodejs don't say, step by step default, open the CMD console, directly view the node version, detect whether the installation is successful

　　

Global installation Gulp, appears warn does not matter, wait for him to slowly turn, said is the network download ...

Install -G gulp

After the global installation is complete, CMD enters the project directory to create the Package.json file, which is an essential configuration file based on the Nodejs project, which is a normal JSON file stored in the project root directory:

　　

Add-y directly to the back will be automatically generated, eliminating the step of the selection of the fill operation.

Then in the CMD project directory to start the local installation of gulp a variety of plug-ins, here to find the plug-in you need. There are four of the most used, necessary

1. Grammar check ( gulp-jshint )

2. Merging documents ( gulp-concat )

3. zip Code ( gulp-uglify )

4. File Rename ( gulp-rename )

Take gulp-jshint example, enter in the CMD project directory

Install gulp-jshint--save-dev

--save-dev is a step that eliminates the need for you to manually modify the Package.json file, adding them manually to the dependencies in the module configuration file Package.json, normally with the version number

　　

The installation configuration is complete and you want to start writing code.

To create a new Gulpfile.js file under the project directory, there are five ways to gulp:,,, task run watch src , anddest.

//Introduction components
1 varGulp = require (' Gulp '));2 3 varJshint = require (' Gulp-jshint '));4 varConcat = require (' Gulp-concat '));5 varUglify = require (' gulp-uglify '));6 varRename = require (' Gulp-rename '));7 varClean = require (' Gulp-clean ');8 varMinify_css = require (' gulp-minify-css '));9 
Create a taskTenGulp.task (' Hint ',function(){ One   returnGULP.SRC ([' A.js ', ' b.js ', ' c.js ']) A . Pipe (Jshint ()) -. Pipe (Jshint.reporter (' Default ')); - }); the  -Gulp.task (' script ',function () { -   returnGULP.SRC ([' A.js ', ' b.js ', ' c.js ']) -. Pipe (Concat (' Abc.js ')) +. Pipe (Gulp.dest (' Application ')) - . Pipe (Uglify ()) +. Pipe (rename ({suffix: '. Min ')})) A. Pipe (Gulp.dest (' Application ')); at }); -  -Gulp.task (' Css1 ',function () { -   returnGULP.SRC (' Dist/css/d.css ') - . Pipe (Minify_css ()) -. Pipe (rename ({suffix: '. Min ')})) in. Pipe (Gulp.dest (' Application ')); - }); to  +Gulp.task (' Css2 ',function () { -   returnGULP.SRC ([' Dist/css/e.css ', ' dist/css/f.css ']) the. Pipe (Concat (' Ef.css ')) *. Pipe (Gulp.dest (' Application ')) $ . Pipe (Minify_css ())Panax Notoginseng. Pipe (rename ({suffix: '. Min ')})) -. Pipe (Gulp.dest (' Application ')); the }); +  AGulp.task (' Watch ',function () { theGulp.watch ([' A.js ', ' b.js ', ' c.js '], [' Script ']); +Gulp.watch (' dist/css/d.css ', [' Css1 ']); -Gulp.watch ([' Dist/css/e.css ', ' dist/css/f.css '], [' Css2 ']); $ }); $  -Gulp.task (' Clean ',function () { -   returnGULP.SRC (' application ', {read:false}) the . Pipe (Clean ()); - });Wuyi  theGulp.task (' Default ', [' Clean '],function () { -Gulp.run (' hint ', ' script ', ' css1 ', ' css2 ', ' watch '); Wu});

The code is simple, it is easy to understand, there are a lot of tutorials on the web, this part is not much to say, to talk about a little bit of the pit.

After the code is knocked out, it needs to go back to the command line and run gulp. Direct Input gulp, began to run, the period will be reported some error, do not tense, refers to the JS file some grammatical errors, harmless, successfully created a compressed file is the ultimate goal.

Then if you need to modify the code, you must keep the CMD console open, or you will not be able to perform the watch operation. The 1th pit, is the editor's auto-save function, a line of code if the writing is not smooth, or interrupted, such as ' $scope. ', not yet finished, the editor automatically save the function will make jshint check out the syntax error, causing Gulp to stop running. If you are using the Webstrom editor, you can select Gulpfile.js,show Gulp tasks without opening the command line each time, and then click Default.

　　

During the operation, the second pit I encountered was the use of the clean plugin. At first, the code I wrote was not like the one above, the watch task was executed directly at the SCRIPT,CSS task, and the last two pieces were written

Gulp.task (' Default ', [' clean ', ' less ', ' images ', ' js ', ' Watch ']);

After all can not work well, originally, in the default inside the task is synchronous operation!! Is the side of the compiler side of the deletion of the situation!! It's a step-by-step, don't think of a step in place. Create a watch task first, then create clean, and at the end of default, do not write it in run and configure an async.

This is automatically saved by the Modify editor (Webstrom):

　　

All right, all right.

The first time to write a blog, a lot of places have to figure out their own again to dare to write, to their own ascension is very helpful. After all, they are very food, write the wrong, hope more criticism.

Gulp installation configuration process and some small pits