gulp-Front-End Project automation (engineering)

Source: Internet
Author: User
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}))
;

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.