gulp

前端项目自动化(工程化)

gulp对网站优化

• gulp依赖插件能做什么？
  • 压缩html、js、css
  • css、js文件名md5化
  • 压缩图片
  • es6语法转es5语法

安装gulp

• 安装（全局和项目中都需要安装）

http://www.gulpjs.com.cn/docs/api/ https://github.com/gulpjs/gulp

npm install gulp -g

项目根目录创建gulpfile.js

安装es6转换为es5工具

https://www.npmjs.com/package/gulp-babel

npm install --save-dev gulp-babel babel-preset-es2015

gulp压缩js插件

gulp压缩js插件（只能识别es5代码，使用之前请先将es6代码转换成es5）
在项目中利用它实现src下面的所有js文件的压缩

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转es5
//压缩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压缩css插件gulp-clean-css

https://www.npmjs.com/package/gulp-clean-css

npm install gulp-clean-css --save-dev

//压缩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压缩html插件 gulp-htmlmin

https://www.npmjs.com/package/gulp-htmlmin

npm i gulp-htmlmin --save-dev

//压缩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压缩图片插件gulp-imagemin

https://www.npmjs.com/package/gulp-imagemin

npm install --save-dev gulp-imagemin

//压缩图片
const imagemin = require('gulp-imagemin');
gulp.task('imagemin', () =>
    gulp.src(["./src/www/images/**/*.*"], {base:"./src"})
        .pipe(imagemin())
        .pipe(gulp.dest('dist'))
);

gulp给css和js文件重命名为MD5插件 gulp-

https://www.npmjs.com/package/gulp-rev

npm install --save-dev gulp-rev

var rev = require('gulp-rev');

//文件名md5化
gulp.task('rev', function () {
    return gulp.src('src/www/css/*.css',{base: "./src"})
        //先压缩
        .pipe(cleanCSS({compatibility: 'ie8'}))
        //再对文件名md5化
        .pipe(rev())
        .pipe(gulp.dest('dist'))
        //生成源文件名称和md5化文件名称的映射文件
        .pipe(rev.manifest())
        .pipe(gulp.dest("./src/rev"))

});

gulp替换html中引用的css文件名称为md5后的名称 gulp-rev-collector

https://www.npmjs.com/package/gulp-rev-collector

npm install --save gulp-rev-collector

使用案例：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"})
        //替换文件名
        .pipe(revCollector({
            replaceReved: true,
        }))
        //压缩html
        .pipe(htmlmin({
            collapseWhitespace: true,
            minifyJS:true,
            minifyCSS:true
        }))
        .pipe(gulp.dest('dist'));
});

利用gulp-copy执行文件夹的拷贝工作

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}))
);