一个简单实用的gulpfile配置

var gulp = require("gulp"),
    cssmini = require('gulp-minify-css'),   //压缩css文件
    uglify = require("gulp-uglify"),        //压缩js文件
    htmlmini = require('gulp-minify-html'), //压缩html文件
    imagemin = require('gulp-imagemin'),    //压缩图片
    rev = require("gulp-rev"),
    revCollector = require('gulp-rev-collector'),
    runSequence = require('run-sequence');


//压缩js文件
gulp.task('compress_js',function(){
    return gulp.src(['gulptest/no/js/*.js','!gulptest/no/js/*.min.js'])   //获取.js文件,同时过滤掉.min.js文件
        .pipe(uglify({preserveComments:'some'}))      // 使用uglify进行压缩,并保留部分注释
        .pipe(gulp.dest('gulptest/yes/js'))
        .pipe(rev())                     //给文件添加hash编码
        .pipe(rev.manifest())            //生成rev-mainfest.json文件作为记录
        .pipe(gulp.dest('gulptest/manifest/js'));
});

//压缩css文件
gulp.task('compress_css', function() {
    return gulp.src(['gulptest/no/css/*.css','!gulptest/no/css/*.min.css'])
        .pipe(cssmini())
        .pipe(gulp.dest('gulptest/yes/css'))
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('gulptest/manifest/css'));
});

//压缩html文件
gulp.task('compress_html', function () {
    gulp.src('gulptest/no/*.html')
        .pipe(htmlmini())
        .pipe(gulp.dest('gulptest/yes'));
})

//图片压缩
gulp.task('compress_img', function () {
    gulp.src('gulptest/no/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 0,  //类型:Number  默认:3  取值范围:0-7(优化等级)
            progressive: true,     //类型:Boolean 默认:false 无损压缩jpg图片
            interlaced: true,      //类型:Boolean 默认:false 隔行扫描gif进行渲染
            multipass: true        //类型:Boolean 默认:false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('gulptest/yes/img'))
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('gulptest/manifest/img'));
});



//Html替换css、js、img文件版本
gulp.task('rev_html_css', function () {
    return gulp.src(['gulptest/manifest/css/*.json', 'gulptest/no/index.html'])
        .pipe(revCollector())      //从manifest文件中收集数据并且替换html模板中的链接.
        .pipe(gulp.dest('gulptest/yes'));
});
gulp.task('rev_html_js', function () {
    return gulp.src(['gulptest/manifest/js/*.json', 'gulptest/yes/index.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('gulptest/yes'));
});
gulp.task('rev_html_img', function () {
    return gulp.src(['gulptest/manifest/img/*.json', 'gulptest/yes/index.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('gulptest/yes'));
});




gulp.task('build', function (done) {
    condition = false;
    runSequence(
        'compress_css',
        'rev_html_css',
        'compress_js',
        'rev_html_js',
        'compress_img',
        'rev_html_img',
        'compress_html',
    done);
});

 

转载于:https://www.cnblogs.com/xiabingbing/p/7526838.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值