gulp 压缩更新静态资源版本

2018-09-25  本文已影响0人  无聊爱online

以下是gulpfile.js的编写方式:

var gulp = require('gulp'),

    assetRev = require('gulp-asset-rev'),

    runSequence = require('run-sequence'),

    minifyCss = require('gulp-minify-css'),

    clean = require('gulp-clean'),

    uglify = require('gulp-uglify'),          //- 压缩js代码

    revAll = require('gulp-rev-all'),

    revCollector = require('gulp-rev-collector');

var cssSrc = 'webapp/css/**/*.css',

jsSrc = 'webapp/js/**/*.js';

/*//为css中引入的图片/字体等添加hash编码

gulp.task('assetRev', function(){

    return gulp.src(cssSrc)  //该任务针对的文件

        .pipe(assetRev()) //该任务调用的模块

        .pipe(gulp.dest('webapp/css')); //编译后的路径

});*/

/*清理文件*/

gulp.task('clean',function () {                    //删除dist目录下的所有文件

    gulp.src(['webapp/asset/*','rev/*'],{read:false})

        .pipe(clean());

});

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revCss', function(){

    return gulp.src(cssSrc)

        .pipe(minifyCss())

        .pipe(revAll.revision())

        .pipe(gulp.dest('webapp/asset/css'))

        .pipe(revAll.manifestFile())                      //- 生成一个rev-manifest.json

        .pipe(gulp.dest('rev/css'));

});

//js生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revJs', function(){

    return gulp.src(jsSrc)

        .pipe(uglify())

        .pipe(revAll.revision())

        .pipe(gulp.dest('webapp/asset/js'))                //- 输出文件到webapp/asset/js目录下

        .pipe(revAll.manifestFile())                      //- 生成一个rev-manifest.json

        .pipe(gulp.dest('rev/js'));

});

//Html替换css、js文件版本

gulp.task('revHtml', function() {

    return gulp.src(['rev/**/*.json','resources/templates/**/*.htm']) // 这里的View/*.html是项目html文件路径,如果gulpfile.js和html文件同在一级目录下,修改为return gulp.src(['rev/**/*.json', '*.html']);

        .pipe(revCollector())

        .pipe(gulp.dest('resources/templates'));// 注意这里是生成的新的html文件,如果设置为你的项目html文件所在文件夹,会覆盖旧的html文件,若上面的View/*.html修改了,这里也要相应修改,如果gulpfile.js和html文件同在一级目录下,修改为  .pipe(gulp.dest(''));

});

//开发构建

gulp.task('default', function(done) {

    condition = false;

    runSequence(    //需要说明的是,用gulp.run也可以实现以上所有任务的执行,只是gulp.run是最大限度的并行执行这些任务,而在添加版本号时需要串行执行(顺序执行)这些任务,故使用了runSequence.

        ['clean'],

        ['revCss'],

        ['revJs'],

        ['revHtml'],

        done);

});

上一篇 下一篇

猜你喜欢

热点阅读