gulpfile.js demo

Posted 2020-09-28

var config = require("./build.config")   //获取build.config.js文件里的内容
var gulp = require("gulp")　　　　　　　　　//获取gulp模块
var sass = require(‘gulp-sass‘);          //gulp-sass模块是用于把sass转成css
var path = require("path")
var babel = require("gulp-babel");       //gulp-babel模块用于把es6转成es5

var postcss = require("gulp-postcss")    //项目中把scss文件转化成css文件
var autoprefixer = require(‘autoprefixer‘)    //autoprefixer根据当前浏览器的普及度以及属性支持提供给你前缀：
var postasset = require("postcss-assets")  //postcss-assets 插件用来处理图片和 SVG。在 CSS 声明中引用图片时，可以使用 resolve 加上图片路径的形式，如“resolve(‘logo.png’)”。https://www.ibm.com/developerworks/cn/web/1604-postcss-css/
var cssnano = require(‘cssnano‘)      //css文件压缩
var imagemin = require(‘gulp-imagemin‘);  //压缩图片文件
var pngquant = require(‘imagemin-pngquant‘);  //使用pngquant深度压缩png图片的imagemin插件
var uglify = require(‘gulp-uglify‘);         //压缩javascript文件
var cache = require(‘gulp-cache‘);          //静态资源缓存
var sourcemaps = require(‘gulp-sourcemaps‘);   //简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置
var browserify = require(‘gulp-browserify‘);
var changed = require(‘gulp-changed‘);     //该插件能够实现只编译或打包改变过文件，大大加快了gulp task的执行速度。
var runSequence = require(‘run-sequence‘);    //让gulp任务，可以相互独立，解除任务间的依赖，增强task复用
livereload = require(‘gulp-livereload‘);     //不用F5了，实时自动刷新页面来开发
var rev = require(‘gulp-rev‘)                 //对文件加md5后缀
var revCollector = require(‘gulp-rev-collector‘);   //文件路径替换
var log = console.log.bind(console);
var prefix = require(‘gulp-prefix‘);   //给引用了静态资源的的HTML文件替换引用和加CDN前缀
require(‘shelljs/global‘)

gulp.task(‘d‘, function () {
    livereload.listen();
    gulp.watch(‘src/**/*.*‘, function (file) {   //关查src下的所有文件
        log("File " + file.path + " changed!");
        if (file.path.endsWith(".scss")) {    //如果文件后缀是.scss
            gulp.run("css")
        } else if (file.path.endsWith(".jsx")) {   //如果文件后缀是.jsx
            gulp.run("js") 
        } else {
            livereload.changed(file.path);
        }
    })
    log("     ***** Watching " + "[crtl+c to stop.] ******     ");
});

gulp.task(‘r‘, function (callback) {
    rm(‘-rf‘, config.distRoot)
    runSequence(["js:r", "css:r"], "revCss", "revJs", callback)
});
css()
css(":r")
js()
js(":r")
gulp.task("default", ["r"]);

function js(type) {
    gulp.task("js" + (type || ""), function () {
        var stream = gulp.src(config.jsSrc)
            .pipe(changed(config.jsDist))
            .pipe(sourcemaps.init())
            .pipe(babel({
                presets: [‘es2015‘]
            }))
            .pipe(browserify({
                debug: false
            }))
        if (type == ":r") {
            stream = stream.pipe(uglify({compress: {warnings: true}}))
                .pipe(sourcemaps.write("./sources_maps"))
                .pipe(rev())
                .pipe(gulp.dest(config.jsDist))
                .pipe(rev.manifest())
                .pipe(gulp.dest(‘./rev/js‘))
        } else {
            stream.pipe(gulp.dest("./src/static/js"))
        }
        return stream;
    });
}
function css(type) {
    var processors = [
        postasset,
        autoprefixer({
            browsers: [‘last 2 versions‘, ‘android >= 4.1‘],
            cascade: true,
            remove: true
        })
    ];
    var depend = [];
    if (type == ":r") {   // 如果是打包线上版本
        processors.push(cssnano());  压缩css
        depend[0] = "img"
    }
    gulp.task(‘css‘ + (type || ""), depend, function () {
        var stream = gulp.src(config.cssSrc)
            .pipe(changed(config.cssDist))
            .pipe(sass())
            .pipe(postcss(processors))
        //.pipe(rename(function (path) {
        //    path.extname = ".css"
        //}))

        if (type == ":r") {
            stream.pipe(rev())
                .pipe(gulp.dest(config.cssDist))
                .pipe(rev.manifest())
                .pipe(gulp.dest(‘./rev/css‘));
        } else {
            stream.pipe(gulp.dest("./src/static/css"))
        }
    });
}


gulp.task(‘img‘, function () {
    gulp.src(config.imgSrc)
        .pipe(cache(imagemin({   //缓存压缩图片
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest(config.imgDist));
});

gulp.task(‘revCss‘, function () {
    return gulp.src([‘./rev/css/*.json‘, ‘./src/*.html‘])   //读取rev下面的.json文件，来替换html里面对应的文件名字
        .pipe(revCollector())                         //替换html中对应的记录
        .pipe(gulp.dest(config.distRoot));
});

gulp.task(‘revJs‘, function () {
    return gulp.src([‘./rev/js/*.json‘, config.distRoot+"*.html"])
        .pipe(revCollector())
        .pipe(gulp.dest(config.distRoot));
});

gulp.task(‘prefix‘, function(){
    gulp.src(config.distRoot+"*.html")
        .pipe(prefix(config.cdnUrl, null, ‘{{‘))
        .pipe(gulp.dest(config.distRoot));
});

gulp.task(‘img:clear‘, function (done) {  //清除图片缓存
    return cache.clearAll(done);
});