Gulp plug-in gulp-clean-css and gulp-make-css-url-version

Introduction to GULP-CLEAN-CSS and Gulp-make-css-url-version:

The Gulp-clean-css plugin is used to compress CSS files.

  The            gulp-make-css-url-version plugin is used to give the URL in the CSS file Add version number (build number based on the MD5 of the referenced file).

I. gulp-clean-css and gulp-make-css-url-version  plug-in use

1, Install "gulp-clean-css and gulp-make-css-url-version plug-in commands (executed at Terminal entry to project root)

NPM Install--save-dev gulp-load-plugins gulp-concat gulp-rename gulp-clean-css gulp-make-css-url-version

2, in the project root directory to provide "GULP-CLEAN-CSS" plug-in task configuration required src directory and source files (source files placed in the SRC directory)

mkdir SRC

3. Configure the use of "gulp-clean-css and Gulp-make-css-url-version" in the Gulpfile.js file

Specific examples:
var gulp = require (' Gulp '),
Cssmin = require (' Gulp-clean-css '),
Cssurl = require (' gulp-make-css-url-version '),
Plugins = require (' Gulp-load-plugins ') (); Loading plugins

Gulp.task (' CSS ', function () {//Custom "CSS" task
Return gulp.src (' src/css/*.css ')//Blur match all CSS files in src/css directory
. Pipe (Cssurl ())//Add the version number (file MD5) to the URL reference in the CSS file
. Pipe (Plugins.concat (' main.css '))//merge the matching CSS file and name it "Main.css"
. Pipe (Cssmin ({
Advanced:false,//Type: Boolean default: True if Advanced optimizations (merge selectors, etc.) are turned on
Compatibility: ' IE7 ',//type: String default: ' or ' * ' [Enable Compatibility mode: ' IE7 ': IE7 compatibility mode, ' IE8 ': IE8 compatibility Mode, ' * ': ie9+ compatibility mode]
Keepbreaks:true,//Type: Boolean default: False if line wrapping is preserved
Keepspecialcomments: ' * '//Keep all special prefixes, when you use Autoprefixer to generate browser prefixes, if you do not add this parameter, it is possible to delete your partial prefix
}))
. Pipe (Plugins.rename (' mainmin.css '))//rename the matching CSS file to "Mainmin.css" after merging compression
. Pipe (Gulp.dest (' dist/css ')); File storage path after compression
});

4, Finally run the "Gulp CSS" command at the terminal

PS: If there is no error message, prove that there is no problem. Now go to the project root to see if the "Dist/css" directory and the target file are generated. Not to be continued ....     

This article from "Luo Chen's Blog" blog, reproduced please contact the author!

Gulp plug-in gulp-clean-css and gulp-make-css-url-version