乐趣区

gulp40升级小记

jiezi

前言

周日在公司的新电脑在以前 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: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;

// 在 /* autoprefixer: off */ 和 /* autoprefixer: on */ 之间的代码不会被删除
退出移动版