CSS merging, compression and MD5 naming and path substitution for the Gulp Learning Guide

Gulpfile.js

varGulp = require ('Gulp');varConcat = require ('Gulp-concat');//-Multiple files merged into one;varMinifycss = require ('Gulp-minify-css');//-Compress CSS into one line;varRev = require ('Gulp-rev');//-add MD5 suffix to file namevarRevcollector = require ('Gulp-rev-collector');//-Path SubstitutionGulp.task ('Cssconcat', function () {//-Create a task named ConcatGULP.SRC ('./src/css/*.css')//-CSS file to be processed, put in a string array. Pipe (Concat ('Style.min.css'))//-the merged file name. Pipe (Minifycss ())//-compression processed into one line. Pipe (rev ())//-filename plus MD5 suffix. Pipe (Gulp.dest ('./build/css'))//-Output File local. Pipe (Rev.manifest ())//-Generate a Rev-manifest.json. Pipe (Gulp.dest ('./rev'));//-Save Rev-manifest.json in Rev directory}); Gulp.task ('Rev',['Cssconcat'],function () {Console.log (111) gulp.src (['./rev/rev-manifest.json','./src/index.html'])//-read Rev-manifest.json files and files that need to be replaced by CSS names. Pipe (Revcollector ())//-Perform a replacement of the CSS name within the file. Pipe (Gulp.dest ('./build/'));//-the directory where the file output is replaced}); Gulp.watch ('./src/**/*',['Rev']) Gulp.task ('default', ['Rev']);

Run results

With the above configuration, you can start to run the gulp relevant operations on our project;

gulpRun the Build program using the command Gulp.js

First run concat this to task generate a rev-manifest.json file
And then run rev this task to replace the one that was introduced in the filecss

yuanwingdemacbook-pro:m yuanwing$ Gulp concat[ One: -: Geneva] Using gulpfile ~/svn/jkd/m/gulpfile.js[ One: -:Geneva] Starting'concat'... [ One: -:Geneva] Finished'concat'After AMsyuanwingdemacbook-pro:m yuanwing$ Gulp rev[ One: -: -] Using gulpfile ~/svn/jkd/m/gulpfile.js[ One: -: -] Starting'Rev'... [ One: -: -] Finished'Rev'AfterTenMsyuanwingdemacbook-pro:m yuanwing$

Rev-manifest.json File Contents:

{  "wap.min.css""wap.min-c49f62a273.css " }

Header.php replacement before and after comparison:

Before replacement:<link rel="stylesheet" href="/css/wap.min.css" />

After replacement:<link rel="stylesheet" href="/css/wap.min-c49f62a273.css" />

gulp-rev-collectorFile path substitution is based on rev-manifest.json , so first genetic the .json file, and then replace;

CSS merging, compression and MD5 naming and path substitution for the Gulp Learning Guide