gulp4.0升级小记

前言

周日在公司的新电脑在以前gulp3.9配置的目录按下npm install时发现报了错，百度了一下得知原来gulp已经到了4.0版本，就花了一点时间去升了个级，顺便记下我个人使用到的配置文件新版本的不同点，文笔和水平有限，多多见谅

1. 新Api引入

// v3.9
let gulp = require('gulp');

// v4.0
const { series, src, dest, watch } = require('gulp');

// 新引入的src,dest可替换老版的gulp.src和gulp.dest，代码更简洁
// watch是任务监听
// series是任务按顺序执行

2. 新的创建任务方式

// 下面以压缩图片插件 gulp-imagemin 为例

let imagemin = require('gulp-imagemin');

// v3.9
gulp.task('imagemin', () => {
  gulp.src('/path')
    .pipe(imagemin())
    .pipe(gulp.dest('/path'))
})

// 4.0
function minImage() {
    return src('/path')
            .pipe(imagemin())
            .pipe(dest('/path'))
}

// 新版本使用了函数和return进行任务设置，函数名不能和引入的插件变量名称重复

3. 执行任务方式

// v3.9
gulp.task('default', [task1, task2])

// v4.0,taskFn是设置任务的函数名
function defaultTask() {
    return series(taskFn1, taskFn2, taskFn3);  // series让任务按顺序执行
}
export.default = defaultTask() // 输出控制台执行任务的名称

// 新版本的export.xxxx，这个xxxx就是在控制台中gulp执行任务的名称，可以同时export设置多个任务
// 例如export.dev= dev()，想执行dev函数中返回的任务就在控制台输入gulp dev加回车！，如果是export.build = build()，则在控制台输入gulp build加回车！，如果是export.default = default()，直接输入gulp回车即可，以此类推

4. watch和series Api

// v3.9,老版本好像要安装一个queue的插件才可以实现按顺序执行任务
let watch = require('gulp-watch');
gulp.task('watch', () => {
  gulp.watch(['filePath1', 'filePath2'], [task1, task2]);
});

// 4.0
const { watch, series} = require('gulp');
function watchTask() {
    // 注意这里不需要使用return
    watch(['filePath1', 'filePath2'], series(taskFn1, taskFn2, taskFn3));
}

// 新版本直接引入watch即可实现任务监听功能，不用安装插件
// series也可以配合watch按顺序执行设置的任务函数

5. 插件gulp-autoprefixer配置变化

// v3.9
.pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
}))

// v4.0，需要在package.json文件添加browserslist键名或者在根目录添加一个.browserslistrc文件进行gulp-autoprefixer配置
// 详情可以参考：https://github.com/browserslist/browserslist#queries
.pipe(autoprefixer())

// .browserslistrc文件
last 1 version
> 1%
maintained node versions
not dead

// package.json
"browserslist": [
   "last 1 version",
   "> 1%",
   "maintained node versions",
   "not dead"
]

其他的配置感觉新版本和老版本都是大同小异，暂时就是发现了这么多,亲测可用

---

后记

我是使用sass + gulp-autoprefixer进行开发的，无意发现当autoprefixer碰到-webkit-box-orient: vertical;时会自动把这个样式给删了 0.0，折腾了一番找到解决方法如下

 -webkit-line-clamp: 3;
/*! autoprefixer:innore next */  2020-02-26更新
-webkit-box-orient: vertical;
overflow: hidden;

2020-02-26更新:

1、修复gulp-px3rem（px2rem）插件生成的css文件名成为xxx.debug.css的问题

(1)找到node_modules依赖包文件夹中的gulp-px3rem文件夹
(2)进入文件夹后修改index.js中第46行和第60行的代码

46  path: file.path.replace(/(.debug)?.css$/, dpr + 'x.debug.css'), 改成 path: file.path.replace(/(.debug)?.css$/, dpr + '.css'),

60  path: file.path.replace(/(.debug)?.css$/, '.debug.css') 改成 path: file.path.replace(/(.debug)?.css$/, '.css')
(3)重启服务

2、关于使用了gulp-px3rem（px2rem）后，1px的border不能正常显示的解决方法，在css语句后添加/*no*/表示忽略该语句

.selector {
  border: 1px solid #fff;/*no*/
}

3、个人使用px2rem的方法

1、在gulefile.js的px2rem配置中设置remUnit为设计稿的宽度，默认为75
  px2rem({
    remUnit: 750 // remUnit表示rem转换比例，现在的值为750表示1rem=750px
  })
2、把html的字体大小设置成屏幕大小,下面是限制了页面的最大宽度
window.onload = function() {
  let windowWidth = document.documentElement.clientWidth;
  document.documentElement.style.fontSize = (windowWidth > 750 ? 750 : windowWidth) + 'px';
}
3、设计稿是多少px，CSS就多少px

下面是我个人的gulp4.0.2配置，希望多多指点！