Gulp 笔记

场景：

删除之前生成的dev下代码，将html img压缩，js css压缩合并；

遇到三个问题，整理如下：

1.Gulp 4.0 

  1.1 gulp-sequence

 

  gulp4.0不支持gulp-sequence，采用了gulp.series让task顺序执行，更加简单；

 

  异步就采用gulp.parallel拉；

let prod = gulp.series(cleanprod, minifyimgprod, minifyhtmlprod,
                         gulp.parallel(minifycssprod, minifyjsprod));

   1.2 task

// 3.x的写法如下
gulp.task('a', function () {
  // Do something.
});

// 如果4.0这样写会报如下错误
// assert.js:85
// throw new assert.AssertionError({
// ^
// AssertionError: Task function must be specified


// 4.0采用这样的写法；函数名就是task名
// 压缩，合并 js
function minifyjsprod() {
     return gulp.src('xxx/**/*.js')      // 需要操作的文件
    .pipe(replace(/xxx.link.+;/g, ' '))  // 删除引用的css
    .pipe(replace(/xxx.env.+;/g, 'mgClient.env = "production";'))
    .pipe(babel({
        presets: ['@babel/env']
        }))
    .pipe(jshint()) // 语法检查
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.min.js'))   // 合并JS并重命名
    .pipe(uglify())    // 压缩
    .pipe(gulp.dest('xx/js/'));  // 输出,（如果没有这个目录，会自动创建）
};

　　

2. 压缩图片

出现以下错误

解决方案：npm install optipng-bin 就好拉

3. 替换html内容

// only for demo
function demo(){
    return gulp.src('xxx/index.html')
    .pipe(htmlreplace({
        'css': '../xxx/css/main.min.css', 
        'js': '../xxx/main.min.js',
        'mxjs': '../xxx/js/xxxDemo.min.js'
    }))
    .pipe(gulp.dest('public/html/'));
}
/**
*       html 内容如下
*        <!-- build:mxjs -->
*        <script src="../xxx/js/a.js"></script>
*        <!-- endbuild -->
**/