Gulp Implement package Js/css/img/html file, and add version number to js/css/img file

Refer to the Packaging tutorial:

Http://www.cnblogs.com/tugenhua0707/p/4069769.html

Http://www.cnblogs.com/tugenhua0707/p/4982646.html

Http://www.tuicool.com/articles/viequay

Key points of implementation:

1, how to Run Gulp task, join the new good one the following tasks:

// Grammar Check function () {    gulp.src (' js/**/*.js ').        Pipe (Jshint ())        . Pipe (Jshint.reporter (' default ')) ;});

Then run on the command line: Gulp Jshint

2, why install the global also to install the local, refer to this: http://www.cnblogs.com/EasonJim/p/6207201.html

3. For an explanation of NPM commands, refer to this: http://www.cnblogs.com/EasonJim/p/6206179.html

The following is a packaged configuration file on my project, as follows:

(Note: This does not resolve synchronous execution issues)

varGulp = require (' gulp ');//Gulp Main ComponentsvarHtmlmin = require (' gulp-htmlmin ');//HTML Compression ComponentsvarJshint = require (' Gulp-jshint ');//JS Grammar CheckvarConcat = require (' Gulp-concat ');//multiple files merged into onevarMinifycss = require (' gulp-minify-css ');//compress CSS into one line;varUglify = require (' gulp-uglify ');//js file Compressionvardel = require (' del ');//File DeletionvarRev = require (' Gulp-rev ');//add MD5 suffix to file namevarRevcollector = require (' Gulp-rev-collector ');//Path Substitutionvargulpremovehtml = require (' gulp-remove-html ');//label removal, reference: https://www.npmjs.com/package/gulp-remove-htmlvarRemoveemptylines = require (' Gulp-remove-empty-lines ');//clear Blank line, reference: Https://www.npmjs.com/package/gulp-remove-empty-linesvarReplace = require (' Gulp-replace ');//file name substitution, reference: Https://www.npmjs.com/package/gulp-replacevarBuildbasepath = ' build/';//building the output directory//Grammar CheckGulp.task (' Jshint ',function() {GULP.SRC (' Js/**/*.js '). Pipe (Jshint ()). Pipe (Jshint.reporter (' Default '));});//Delete build fileGulp.task (' Clean:build ',function() {del ([Buildbasepath+ ' **/* ',    ]);});//Copy FolderGulp.task (' Copy ',function() {GULP.SRC (' plugins/**/* '). Pipe (Gulp.dest (Buildbasepath+ ' plugins '));}); Gulp.task (' Copyimg ',function() {    //if the MD5 resource file img is executed below, then this step can be omittedGULP.SRC (' img/**/* '). Pipe (Gulp.dest (Buildbasepath+ ' img '));});//compressing code after merging js,css files//JSGulp.task (' Minifyjs ',function() {GULP.SRC (' Js/**/*.js '). Pipe (Concat (' Build.js '))//synthesis to a JS. Pipe (Gulp.dest (buildbasepath+ ' JS '))//output to JS directory. Pipe (Uglify ())//Compress JS to one line. Pipe (Concat (' build.min.js '))//JS after compression. Pipe (Gulp.dest (buildbasepath+ ' JS '));//output to JS directory});//Jsmd5, after compression and named with MD5, use Revcollector for path substitution belowGulp.task (' Minifyjsmd5 ',function() {GULP.SRC (' Js/**/*.js '). Pipe (Concat (' Build.min.js '))//JS after compression. Pipe (Uglify ())//Compress JS to one line. Pipe (rev ())//filename plus MD5 suffix. Pipe (Gulp.dest (buildbasepath+ ' JS '))//output to JS directory. Pipe (Rev.manifest (' Rev-js-manifest.json '))////Generate a Rev-manifest.json. Pipe (Gulp.dest (' rev '));//Save Rev-manifest.json in Rev directory});//CSSGulp.task (' Minifycss ',function() {GULP.SRC (' Css/**/*.css '). Pipe (Concat (' Build.css '))//compositing to a CSS. Pipe (Gulp.dest (buildbasepath+ ' CSS '))//output to CSS directory. Pipe (Minifycss ())//compress CSS to the same. Pipe (Concat (' build.min.css '))//post-Compressed CSS. Pipe (Gulp.dest (buildbasepath+ ' CSS '));//output to CSS directory});//Cssmd5, after compression and named with MD5, use Revcollector for path substitution belowGulp.task (' Minifycssmd5 ',function() {GULP.SRC (' Css/**/*.css '). Pipe (Concat (' Build.min.css '))//post-Compressed CSS. Pipe (Minifycss ())//compress CSS to the same. Pipe (rev ())//filename plus MD5 suffix. Pipe (Gulp.dest (buildbasepath+ ' CSS '))//output to CSS directory. Pipe (Rev.manifest (' Rev-css-manifest.json '))//Generate a Rev-manifest.json. Pipe (Gulp.dest (' rev '));//Save Rev-manifest.json in Rev directory});//Imgmd5, after compression and named with MD5, use Revcollector for path substitution belowGulp.task (' Minifyimgmd5 ',function() {GULP.SRC ([' Img/**/*.jpg ', ' img/**/*.png ']). Pipe (rev ())//filename plus MD5 suffix. Pipe (Gulp.dest (buildbasepath+ ' img '))//output to CSS directory. Pipe (Rev.manifest (' Rev-img-manifest.json '))//Generate a Rev-manifest.json. Pipe (Gulp.dest (' rev '));//Save Rev-manifest.json in Rev directory});//HTML CompressionGulp.task (' HTML ',function(){    varOptions ={removecomments:true,//Clear HTML CommentsCollapsewhitespace:false,//Compress HTMLCollapsebooleanattributes:true,//omit the value of the Boolean attribute <input checked= "true"/> ==> <input/>Removeemptyattributes:true,//Delete all spaces as attribute values <input id= ""/> ==> <input/>Removescripttypeattributes:true,//Delete <script> type= "Text/javascript"Removestylelinktypeattributes:true,//Remove the Type= "Text/css" from <style> and <link>MINIFYJS:true,//Compress page JSMINIFYCSS:true//Compress page CSS    }; GULP.SRC (' *.html '). Pipe (Gulpremovehtml ())//Clear Specific Labels. Pipe (Removeemptylines ({removecomments:true}))//Clear Blank Lines. Pipe (Htmlmin (options)). Pipe (Gulp.dest (Buildbasepath));});//production use, replace file name, Common.js Replace with Build.min.jsGulp.task (' Replacejs ',function() {gulp.src ([Buildbasepath+ ' *.html ']). PIPE (replace (' Common.js ', ' build.min.js ') . Pipe (Gulp.dest (Buildbasepath));});//production use, replace file name, Common.css Replace with Build.min.cssGulp.task (' Replacecss ',function() {gulp.src ([Buildbasepath+ ' *.html ']). PIPE (replace (' Common.css ', ' build.min.css ') . Pipe (Gulp.dest (Buildbasepath));});//development Use, replace file name, Common.js Replace with Build.jsGulp.task (' Replacejsdev ',function() {gulp.src ([Buildbasepath+ ' *.html ']). PIPE (replace (' Common.js ', ' build.js ') . Pipe (Gulp.dest (Buildbasepath));});//development Use, replace file name, Common.css Replace with Build.cssGulp.task (' Replacecssdev ',function() {gulp.src ([Buildbasepath+ ' *.html ']). PIPE (replace (' Common.css ', ' build.css ') . Pipe (Gulp.dest (Buildbasepath));});//Replace the MD5 file name with Rev, which includes HTML and CSS resource files togetherGulp.task (' rev ',function() {    //html, for js,css,imgGULP.SRC ([' Rev/**/*.json ', buildbasepath+ ' **/*.html ']). Pipe (Revcollector ({replacereved:true}). Pipe (Gulp.dest (Buildbasepath));}); Gulp.task (' Revimg ',function() {    //CSS, mainly for IMG replacementGULP.SRC ([' Rev/**/rev-img-manifest.json ', buildbasepath+ ' css/*.css ']). Pipe (Revcollector ({replacereved:true}). Pipe (Gulp.dest (Buildbasepath+ ' CSS '));});//Monitor changes to the file, and automatically invoke default defaults task when modifiedGulp.task (' Watch ',function() {Gulp.watch (' **/*.html ', [' Default ']);});//Default task, Output JS and CSS files with parameters/*Execution Order: * 1, clear all files compiled output directory build * 2, copy third-party components dependent on the Build folder * 3, use with MD5 JS file compression packaging a file, named according to Gulp-rev plug-in MD5 name after the name, such as build-asdf123.min.js, and output to the Build/js folder * 4, the use of MD5 to CS file Compression packaging a file, named according to the Gulp-rev plug-in MD5 name after the name, such as BUILD-ASD323.MIN.CSS, and output to the Build/cs folder * 5, (optional) use with MD5 to the IMG folder of all files to rename, named according to the Gulp-rev plug-in MD5 name after naming, such as common-asdf123.jpg, and output to the Build/img folder; If this does not work, the 10th step below will not be executed. * 6, the build directory of all the HTML page compression processing, using gulp-minhtml inserted * 7, because the project using the module development, Then each page will be introduced Common.js file, and the combined JS file is build.min.js, so use gulp-replace inserted in the HTML page to replace, and the HTML file output to the build directory * 8, again in the build directory, Replace the HTML common.css file with build.min.css* 9, and use the GULP-REV-COLLECTORC plugin to replace the JS and CSS files that were just generated with the parameters on the HTML page. such as Build.min.js replaced with Build-asdf123.min.js. or output to the build directory. * 10. (optional) Use the GULP-REV-COLLECTORC plugin to replace the img file that just generated the parameter with the CSS file, such as Common.jpg replaced with common-asdf12.jpg. Output to Directory **/Gulp.task (' Default ', [' clean:build ', ' Copy ', ' Minifyjsmd5 ', ' minifycssmd5 ', ' minifyimgmd5 ', ' Replacejs ', ' replacecss ', ' html ', ' Rev ', ' revimg ']);//Default task 2, Output JS and CSS files without parameters/*Execution Order: * 1, clear all files compiled output directory build * 2, copy third-party components dependent on the Build folder * 3, the JS file compression packaging A file, named as Build.min.js, and output to Build/js folder * 4, The CS file compression package a file, named as Build.min.css, and output to the Build/cs folder * 5, the build directory of all the HTML page compression processing, the use of gulp-minhtml inserted * 6, because the project using the module development, Then each page will be introduced Common.js file, and the combined JS file is build.min.js, so use gulp-replace inserted in the HTML page to replace, and the HTML file output to the build directory * 7, again in the build directory, Replace HTML common.css file with Build.min.css **/Gulp.task (' Default2 ', [' clean:build ', ' Copy ', ' copyimg ', ' minifyjs ', ' minifycss ', ' Replacejs ', ' replacecss ', ' HTML ']);//development uses default tasks, JS and CSS without parameters, and do not merge/*Execution Order: * 1, clear all files compiled output directory build * 2, copy third-party components dependent on the Build folder * 3, the JS file compression packaging A file, named as Build.js, and output to Build/js folder * 4, The CS file compression package a file, named as Build.css, and output to the Build/cs folder * 5, the build directory of all the HTML page compression processing, the use of gulp-minhtml inserted * 6, because the project using the module development, Then each page will be introduced Common.js file, and the combined JS file is build.js, so use gulp-replace inserted in the HTML page to replace, and the HTML file output to the build directory * 7, again in the build directory, Replace HTML common.css file with Build.css **/Gulp.task (' Defaultdev ', [' clean:build ', ' Copy ', ' copyimg ', ' minifyjs ', ' minifycss ', ' Replacejsdev ', ' Replacecssdev ', ' html ']);

But a very tangled problem, I do this to perform the default task: Gulp, the discovery is not executed sequentially.

The download overwrites the above configuration and joins the synchronization sequence.

Gulp Implement package Js/css/img/html file, and add version number to js/css/img file