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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.