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 内容如下
*        
*        
*        
**/

  

转载于:https://www.cnblogs.com/ljyqd/p/11549732.html

你可能感兴趣的:(Gulp 笔记)