Gulp Beginner Use Summary

Before from the Internet to see with gulp build people still quite a lot of, today try to learn a bit, basically is from other website extracts, the following is summary:

Let's stick to the project structure first:

I put the original code in the assets file, Dist is gulp generated images,scripts,styles, all the *.html are published to the root directory

First, the Global installation Gulp:

$ NPM Install--global Gulp

Ii. creation of Package.json

Enter the project root directory and use NPM init to follow the prompts, first create the Package.json file, and then according to your own needs, import the dependent modules, the specific package is described below Gulpfile.js

: https://www.npmjs.com

For example, download gulp-minify-css, directly perform NPM install--save-dev gulp-minify-css

The--save-dev section is best written so that it automatically adds the module and version number to the devdependencies part of the Package.json.

Import all dependent modules in turn.

Third, create the Gulpfile.js file in the root directory

The following is a detailed description of Gulpfile.js:

　　

1 //load plug-in2 varGulp = require (' Gulp ')), 3Autoprefixer = require (' Gulp-autoprefixer '),//Handling Browser Prefixes4Minifycss = require (' Gulp-minify-css '),//Compress CSS5Jshint = require (' Gulp-jshint '),//Detection JS6Uglify = require (' gulp-uglify '),//Compression JS7Imagemin = require (' Gulp-imagemin '),//Compress Image8Rename = require (' Gulp-rename '),// Renaming9Clean = require (' Gulp-clean '),//Clean upTenConcat = require (' Gulp-concat '),//Merging OneNotify = require (' gulp-notify '),//Tips ACache = require (' Gulp-cache '),  -Livereload = require (' Gulp-livereload '),//Auto Refresh -Rev = require (' Gulp-rev '),//Add MD5 theminifyhtml = require (' gulp-minify-html '),//Compress HTML -Revcollector = require (' Gulp-rev-collector ');//Path Substitution -  - //style +Gulp.task (' Styles ',function() {   -   returnGULP.SRC (' Assets/css/main.css ') + . Pipe (Autoprefixer ({ ABrowsers: [' last 2 versions '], atCascadetrue,//whether to beautify the property value default: True like this: -             //-webkit-transform:rotate (45deg); -             //transform:rotate (45deg); -Removetrue //Do you want to remove unnecessary prefixes by default: True -         })) -. Pipe (Gulp.dest (' Dist/styles ')) in. Pipe (rename ({suffix: '. Min ') })) - . Pipe (Minifycss ()) to . Pipe (rev ()) +. Pipe (Gulp.dest (' Dist/styles ')) -. Pipe (Rev.manifest ())//-Generate a Rev-manifest.json the. Pipe (Gulp.dest ('./rev/css '))) *. Pipe (Notify ({message: ' Styles task complete ' })); $ });Panax Notoginseng  - //Script theGulp.task (' Scripts ',function() {   +   returnGULP.SRC ([' Assets/js/vendor/*.js ', ' assets/js/*.js ']) A. Pipe (Jshint ('. Jshintrc '))) the. Pipe (Jshint.reporter (' Default ')) +. Pipe (Concat (' Main.js ')) -. Pipe (Gulp.dest (' dist/scripts ')) $. Pipe (rename ({suffix: '. Min ') })) $ . Pipe (Uglify ()) - . Pipe (rev ()) -. Pipe (Gulp.dest (' dist/scripts ')) the. Pipe (Rev.manifest ())//-Generate a Rev-manifest.json -. Pipe (Gulp.dest ('./rev/js ')))Wuyi. Pipe (Notify ({message: ' Scripts task complete ' })); the }); -  Wu //Image -Gulp.task (' images ',function() {   About   returnGULP.SRC (' assets/img/* ') $. Pipe (Cache (Imagemin ({optimizationlevel:3, progressive:true, Interlaced:true }))) -. Pipe (Gulp.dest (' Dist/images ')) -. Pipe (Notify ({message: ' Images task complete ' })); - }); A  + //Compression html/Update introduction file version theGulp.task (' minify-html ',function() { -   returnGULP.SRC ([' Rev/*/*.json ', ' assets/*.html ']) $ . Pipe (Revcollector ()) the . Pipe (minifyhtml ({ theConditionals:true, theSparetrue the     })) -. Pipe (Gulp.dest ('./')) in. Pipe (Notify ({message: ' htmls task complete ' })); the }); the  About //Clean up theGulp.task (' Clean ',function() {   the   returnGULP.SRC ([' Dist/styles ', ' dist/scripts ', ' dist/images '), {read:false}) the . Pipe (Clean ()); + }); -  the //Scheduled TasksBayiGulp.task (' Default ', [' Clean '],function() {   theGulp.start (' Styles ', ' scripts ', ' images ')); the }); -  - //Guards theGulp.task (' Watch ',function() { the  the   //The detention Center has a. css file theGulp.watch (' assets/css/*.css ', [' Styles ']); -  the   //there are. js files in the detention center theGulp.watch (' assets/js/**/*.js ', [' Scripts ']); the 94   //There's a picture file in the detention center theGulp.watch (' assets/img/**/* ', [' images ']); the  the   //The detention Center has. html Files98Gulp.watch (' assets/*.html ', [' HTML ']); About  -   //setting up an instant Reformer server101   varServer =livereload ();102 103   //The detention Center has a file under the dist/catalogue, which is restructured once it has been altered .104Gulp.watch ([' dist/** ']). On (' Change ',function(file) { the server.changed (file.path);106   });107 108});

Iv. Execute Gulp All the tasks in the gulpfile.js, or perform a separate task, such as gulp scripts

V. Several problems encountered:

1, there is a PNG image depth compression of the dependent module is not installed successfully, NPM install Imagemin-pngquant--save-dev (not installed successfully), because I this project all the pictures have been manually compressed, also temporarily not to control the problem, Have time to check it again.

2, the Detection JS Grammar module Gulp-jshint Execution of the time will be error, indicating the lack of. jshintrc file, and then searched for a second root directory configuration. jshintrc

{    "Bitwise":true,    "Browser":true,    "Curly":true,    "Eqeqeq":true,    "Eqnull":true,    "Esnext":true,    "Immed":true,    "jquery":true,    "Latedef":true,    "Newcap":true,    "Noarg":true,    "Node":true,    "Strict":false,    "Trailing":true}

Here specifically how to configure not detailed check ...

3, in the definition of the module name, there is a use of capital, the direct execution of gulp does not take effect, the execution of this task alone, error, always reported undefined, and then changed to lowercase, it is OK, here is not clear why

minifyhtml = require (' gulp-minify-html '), perform the Gulp minify-html task alone, this line. PIPE (minifyhtml (...)) will always report minifyhtml undefined, changed to lowercase after no problem.

4, in the implementation of compression, basically did not encounter any problems, Gulp-rev and gulp-rev-collector with the use of the time encountered a bit of problems, execution. Pipe (Rev.manifest ())//-generates a Rev-manifest.json

　　　　

　　　　

　　　　

The generated JSON files are placed in Rev's CSS and Rev JS, so that each execution revcollector will find all the Main.min.css and main.min.js files in *.html, and add MD5 is worth the new file name replaced.

Gulp Beginner Use Summary