gulp下静态资源的合并、压缩、MD5后缀

var gulp = require('gulp');
var RevAll = require('gulp-rev-all');
var uglify = require('gulp-uglify');
var filter = require('gulp-filter');
var csso = require('gulp-csso');
var useref = require('gulp-useref');


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

	var jsFilter = filter("**/*.js");
  	var cssFilter = filter("**/*.css");
  	var htmlFilter = filter('**/*.html');

	var assets = useref.assets();

    var revAll = new RevAll({ 

    	//不重命名文件
    	dontRenameFile: ['.html'] ,

    	//无需关联处理文件
    	dontGlobal: [ /^\/favicon.ico$/ ,'.bat','.txt'],

    	//该项配置只影响绝对路径的资源
    	prefix: 'http://s0.static.server.com' 
    });

    return gulp.src(['staticPreprocessing/src/**'])
        
        //合并html里面的js/css
        .pipe(htmlFilter)
        .pipe(assets)
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(htmlFilter.restore())

		//压缩js
        .pipe(jsFilter)
        .pipe(uglify()) 
        .pipe(jsFilter.restore())

        //压缩css
        .pipe(cssFilter)
        .pipe(csso())
        .pipe(cssFilter.restore())

    	//加MD5后缀
        .pipe(revAll.revision())

        //输出
        .pipe(gulp.dest('staticPreprocessing/dist'))

        //生成映射json文件
        .pipe(revAll.manifestFile())
        .pipe(gulp.dest('staticPreprocessing/dist'));
});

gulp.task('watch', function () {
   gulp.watch('staticPreprocessing/src/**', ['default']);
});

评论

3 楼 ptz19 2015-12-01  

请问，如果把合并前的文件，不要dest 目标目录来。
如： js目录下，有a.js ,b.js 合并后comb.js ,但a.js,b.js也打包出去了

2 楼 zhouzq1008 2015-09-10  

楼主，还有个问题，<a href="">href里html也被修改了引用

这样写就好了
var revAll = new RevAll({
 
        dontRenameFile: ['.html'],

        dontGlobal: [ /^\/favicon.ico$/ ,'.bat','.txt'], 
           //不去跟新html的引用
        dontUpdateReference: ['.html']
  });
再次感谢楼主分享，帮我大忙了

1 楼 zhouzq1008 2015-09-10  

感谢楼主，用到了您的代码， 但现在好像有改动 否则会报错：

修改如下
.pipe(htmlFilter.restore())  -->  .pipe(htmlFilter.restore) 

jsFilter  /cssFilter 同理

也就说最新版的filter 用法变了