我的gulp.js清单

Posted 2020-09-25 平凡的世界

var gulp = require(‘gulp‘),
        cssmin = require(‘gulp-clean-css‘), //压缩css文件
        concat = require(‘gulp-concat‘), //合并js文件
        jsmin = require(‘gulp-uglify‘), //压缩js文件
        imgmin = require(‘gulp-imagemin‘), //图片压缩
        rename = require(‘gulp-rename‘), //文件重命名
        jshint = require(‘gulp-jshint‘), //js文件检查
        rev = require(‘gulp-rev‘), //- 对文件名加MD5后缀
        revCollector = require(‘gulp-rev-collector‘), //路径替换
        connect = require(‘gulp-connect‘); //配置本地服务器

//#########文件监听及自动刷新网页start#################
gulp.task(‘connect‘, function () {
    connect.server({
        host: ‘localhost‘, //地址，可不写，不写的话，默认localhost
        port: 3000, //端口号，可不写，默认8000
        root: ‘./‘, //当前项目主目录
        livereload: true //自动刷新
    });
});

gulp.task(‘html‘, function () {
    gulp.src(‘./bill/*.html‘)
            .pipe(connect.reload());
});

gulp.task(‘watch‘, function () {
    gulp.watch(‘./bill/css/*.css‘, [‘html‘]); //监控css文件
    gulp.watch(‘./bill/js/*.js‘, [‘html‘]); //监控js文件
    gulp.watch([‘./bill/*.html‘], [‘html‘]); //监控html文件
});

gulp.task(‘server‘, [‘connect‘, ‘watch‘]);

//#########文件监听及自动刷新网页end #################

gulp.task(‘Cssmin‘, function () {
    gulp.src("bill/css/common.css")
            .pipe(rename({suffix: ‘.min‘}))
            .pipe(cssmin({dubug: true}, function (details) {
                console.log(details);
                console.log(details.name + ‘(originalSize): ‘ + details.stats.originalSize);
                console.log(details.name + ‘(minifiedSize): ‘ + details.stats.minifiedSize);
            }))
            .pipe(rev())
            .pipe(gulp.dest("bill/css"))
            .pipe(rev.manifest()) //- 生成一个rev-manifest.json
            .pipe(gulp.dest(‘bill/css‘));
});

gulp.task(‘Jsmin‘, function () {
    gulp.src("bill/js/common.js")
            .pipe(rename({suffix: ‘.min‘}))
            .pipe(jsmin())
            .pipe(rev())
            .pipe(gulp.dest("bill/js"))
            .pipe(rev.manifest()) //- 生成一个rev-manifest.json
            .pipe(gulp.dest(‘bill/js‘));
});

gulp.task(‘Imgmin‘, function () {
    gulp.src("src/img/*.jpg")
            .pipe(imgmin({
                optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
                progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
                interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
                multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
            }))
            .pipe(gulp.dest("dist/img"));
});

gulp.task(‘rev‘, function () {
    gulp.src([‘./bill/**/*.json‘, "./bill/index.html"])//- 读取 rev-manifest.json 文件以及需要进行替换的文件
            .pipe(revCollector(
                    {
                        replaceReved: true,
                        dirReplacements: {
                            ‘css‘: ‘css‘,
                            ‘js‘: ‘js‘
                        }
                    }
            ))//- 执行文件名的替
            .pipe(gulp.dest(‘./bill‘)); //- 替换后的文件输出的目录
});

//执行配置任务
gulp.task(‘default‘, [‘Cssmin‘, ‘Jsmin‘, "rev"], function () {
    // gulp.start(‘testJsmin‘);
});