gulp自动添加版本号、es6转es5

gulp自动添加版本号

每次上新项目的时候，因为浏览器缓存了js和css，用户又不会主动去清除缓存，所以可能导致网页已经更新了但用户看到的还是旧的效果。

给css和js添加版本号可以有效避免这一问题。

效果：

image.png

安装Gulp的gulp-rev-append插件可以在打包的时候使引用了内容有变化的js、css的html文件自动更新版本号。

步骤：

1. 全局安装gulp、当前目录安装gulp
2. npm install --save-dev gulp-rev-append 安装gulp-rev-append插件
3. 配置文件gulpfile.js中引用gulp-rev-append：

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

4. 配置文件gulpfile.js中打包html的任务中写：

/*
   app. src是源码放置的目录
   app.build是整合之后的文件
   app.dist是用于生产、部署的目录
*/
gulp.task('html',function(){
    gulp.src(app.srcPath + 'view/**/*.html')
    .pipe(gulp.dest(app.buildPath + 'view'))
    .pipe(rev())
    .pipe(gulp.dest(app.distPath + 'view'))
    .pipe($.connect.reload());
});

5. html中引用资源的代码中，在src后面加上?rev=@@hash"

   
   image.png

6. 启动任务，distPath目录下的html文件就变成了：

   
   image.png

gulp es6转es5

如果项目使用了es6语法，则还需安装gulp-babel和babel-core插件来编译es6。

步骤：

1. 安装 gulp-babel、babel-preset-es2015、babel-core
2. 创建一个.babelrc文件，内容：

{
    'presets':['es2015']
}

3. 配置文件gulpfile.js引用

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

4. 在打包js的任务中写：

gulp.task('js',function(){
    //$.uglify:压缩
    //babel()es6转es5

    gulp.src(app.srcPath + 'script/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest(app.buildPath + 'script'))
    .pipe($.uglify())
    .pipe(gulp.dest(app.distPath + 'script'))
    .pipe($.connect.reload());
});

执行任务，可看到distPath目录下js文件中的代码自动转化成了es5语法的。

完整的gulpfile.js：

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var open = require('open');
var rev = require('gulp-rev-append');
var babel = require('gulp-babel');

/*
    声明一个全局变量,
    src是源码放置的目录
    build是整合之后的文件
    dist是用于生产、部署的目录
*/
var app = {
    srcPath:'src/',
    buildPath:'build/',
    distPath:'dist/'
}

gulp.task('html',function(){
    gulp.src(app.srcPath + 'view/**/*.html')
    .pipe(gulp.dest(app.buildPath + 'view'))
    .pipe(rev())
    .pipe(gulp.dest(app.distPath + 'view'))
    .pipe($.connect.reload());
});

gulp.task('js',function(){
    //$.uglify:压缩
    //babel()es6转es5

    gulp.src(app.srcPath + 'script/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest(app.buildPath + 'script'))
    .pipe($.uglify())
    .pipe(gulp.dest(app.distPath + 'script'))
    .pipe($.connect.reload());
});

gulp.task('less',function(){
    //cssmin:压缩css
    gulp.src(app.srcPath + 'style/**/*.less')
    .pipe($.less())
    .pipe(gulp.dest(app.buildPath + 'style'))
    .pipe($.cssmin())
    .pipe(gulp.dest(app.distPath + 'style'))
    .pipe($.connect.reload());
});

gulp.task('image',function(){
    //$.imagemin():压缩图片
    gulp.src(app.srcPath + 'image/**/*')
    .pipe(gulp.dest(app.buildPath + 'image'))
    .pipe($.imagemin())
    .pipe(gulp.dest(app.distPath + 'image'))
    .pipe($.connect.reload());
});

gulp.task('clean',function(){
    gulp.src([app.buildPath,app.distPath])
    .pipe($.clean());
});

gulp.task('build',['image','js','less','html']);

//启动服务
gulp.task('serve',['build'],function(){
    $.connect.server({
        root:[app.distPath],
        livereload:true,
        port:1222
    });

    open('http://127.0.0.1:1222');

    gulp.watch(app.srcPath + 'script/**/*.js',['js']);
    gulp.watch(app.srcPath + 'view/**/*.html',['html']);
    gulp.watch(app.srcPath + 'style/**/*.less',['less']);
    gulp.watch(app.srcPath + 'image/**/*',['image']);
});