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

最新推荐文章于 2022-05-31 21:15:59 发布

weixin_33768481

最新推荐文章于 2022-05-31 21:15:59 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/chris-oil/p/5277668.html

本文介绍了一个使用Gulp实现的自动化构建流程，包括文件压缩、版本管理等步骤，通过gulp-rev-all、gulp-uglify、gulp-csso等插件实现了资源文件的优化和版本控制。

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