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

1. Introduction of Plugins

varGulp = require ('Gulp'),  //uglify = require (' gulp-uglify '),Concat = require ('Gulp-concat'), Minifycss= Require ('Gulp-minify-css'), Rev= Require ('Gulp-rev'), Revcollector= Require ('Gulp-rev-collector');

Console input

NPM Install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector--save-dev

2. Write code in Gulpfile.js

Gulp.task ('concat', function () {GULP.SRC ('Xingboweb/scenemall/public/static/css/reset.css')//file to compress. Pipe (MINIFYCSS ('Reset.css') //compress CSS. Pipe (rev ())//filename plus MD5 suffix. Pipe (gulp.dest ('Dist/css') //. Pipe (Rev.manifest ())//rev-mainfest.json file, which is a compressed file information. Pipe (Gulp.dest ('Dist/rev'));}); Gulp.task ('Rev', function () {GULP.SRC (['Dist/rev/*.json','xingboweb/scenemall/app/views/home/detail.phtml']//Read the compressed file information, and the file to replace the directory. Pipe (Revcollector ({//) perform replacement replacereved:true, dirreplacements:{'CSS':'Dist/css'}). Pipe (Gulp.dest ('xingboweb/scenemall/app/views/home/'))    //. Pipe (Gulp.dest (' dist/html '))})

Note: minifycss compressed filename must be replaced in the directory of the file name consistent, otherwise the substitution is unsuccessful, such as the file name Reset.css, but the compressed file name is RESET.MIN.CSS, so that cannot replace the successful

3. After running the Gulp in the console, you can replace it successfully.

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