场景:
删除之前生成的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 -->
**/