Gulp to website optimizationWhat gulp depends on what the plug-in can do. Compressed HTML, JS, css CSS, JS filename MD5 compressed picture es6 grammar to ES5 grammar
Install GulpInstallation (both global and project required)
Http://www.gulpjs.com.cn/docs/api/https://github.com/gulpjs/gulp
NPM Install Gulp-g
Project root directory Creation Gulpfile.js
install ES6 Convert to ES5 tool
Https://www.npmjs.com/package/gulp-babel
NPM Install--save-dev Gulp-babel babel-preset-es2015 Gulp Compression js plugin
Gulp Compression JS plugin (only recognize ES5 code, before use, please convert ES6 code to ES5)
Use it in the project to achieve the compression of all JS files under SRC
Https://www.npmjs.com/package/gulp-uglify
NPM Install--save-dev gulp-uglify
Const GULP = require (' gulp ');
Const BABEL = require (' Gulp-babel ');
var uglify = require (' gulp-uglify ');
ES6 turn es5
//Compress JS
gulp.task (' Default ', () => {
gulp.src (["./src/controller/*.js", "./src/model/*.js" , "./src/router/*.js", "./src/tool/*.js", "./src/*.js", "./src/www/scripts/**/*.js"], {base: "./src"})
. PIPE ( Babel ({
presets: [' es2015 ']
})
. Pipe (Uglify ())
. Pipe (Gulp.dest (' dist '));
Gulp Compression CSS plugin gulp-clean-css
Https://www.npmjs.com/package/gulp-clean-css
NPM Install Gulp-clean-css--save-dev
Compress css
var cleancss = require (' gulp-clean-css ');
Gulp.task (' Minify-css ', function () {return
gulp.src ('./src/www/css/*.css ', {base:./src "})
. PIPE ( Cleancss ({compatibility: ' IE8 '}))
. Pipe (Gulp.dest (' dist '));
Gulp Compressed HTML plugin gulp-htmlmin
Https://www.npmjs.com/package/gulp-htmlmin
NPM I gulp-htmlmin--save-dev
Compressed HTML
var htmlmin = require (' gulp-htmlmin ');
Gulp.task (' Minify ', function () {return
gulp.src ('./src/views/**/*.html ', {base:./src '})
. Pipe (Htmlmin ({
collapsewhitespace:true,
minifyjs:true,
minifycss:true
}))
. Pipe (Gulp.dest (' dist '));
Gulp Compression Picture plugin gulp-imagemin
Https://www.npmjs.com/package/gulp-imagemin
NPM Install--save-dev Gulp-imagemin
Compress picture
Const IMAGEMIN = require (' gulp-imagemin ');
Gulp.task (' Imagemin ', () =>
gulp.src (["./src/www/images/**/*.*"], {base: "./src"})
. Pipe (Imagemin ())
. Pipe (Gulp.dest (' dist '))
;
Gulp Rename css and JS files to MD5 plugins gulp-
Https://www.npmjs.com/package/gulp-rev
NPM Install--save-dev Gulp-rev
var rev. = require (' Gulp-rev ');
FileName MD5
gulp.task (' rev ', function () {return
gulp.src (' src/www/css/*.css ', {base:./src '})
//Compress first
. Pipe (CLEANCSS ({compatibility: ' IE8 '}))
//Then MD5 the filename
. Pipe (rev ())
. Pipe (Gulp.dest (' dist ')
) Generates a mapping file for the source file name and MD5 file name
. Pipe (Rev.manifest ())
. Pipe (Gulp.dest ("./src/rev"))
});
Gulp replaces the CSS filename referenced in HTML with the name MD5 Gulp-rev-collector
Https://www.npmjs.com/package/gulp-rev-collector
NPM Install--save Gulp-rev-collector
Use case: HTTP://WWW.TUICOOL.COM/ARTICLES/IA7ZMYM
var revcollector = require (' Gulp-rev-collector ');
Gulp.task (' Revcollector ', function () {return
gulp.src ('./src/rev/**/*.json ', './src/views/**/*.html '],{base: "./src"})
//Replace file name
. Pipe (Revcollector ({
replacereved:true,
}))
//Compressed HTML
. Pipe (Htmlmin ({
collapsewhitespace:true,
minifyjs:true,
minifycss:true
}))
. Pipe (Gulp.dest (' dist '));
use gulp-copy to perform copy work on a folder
Https://www.npmjs.com/package/gulp-copy
NPM Install gulp-copy--save-dev
Const GULPCOPY = require (' gulp-copy ');
Gulp.task (' Copy ', () =>
gulp.src ('./src/**/*.woff2 ', '/src/**/*.woff ', './src/**/*.swf ', './src/www/ Vendor/**/*.* '],{base: "./src"})
. Pipe (Gulpcopy ("dist", {prefix:1}))
;