前言
周日在公司的新电脑在以前gulp3.9配置的目录按下npm install时发现报了错，百度了一下得知原来gulp已经到了4.0版本，就花了一点时间去升了个级，顺便记下我个人使用到的配置文件新版本的不同点，文笔和水平有限，多多见谅
1. 新Api引入
// v3.9let gulp = require('gulp');// v4.0const { series, src, dest, watch } = require('gulp');// 新引入的src,dest可替换老版的gulp.src和gulp.dest，代码更简洁// watch是任务监听// series是任务按顺序执行2. 新的创建任务方式
// 下面以压缩图片插件 gulp-imagemin 为例let imagemin = require('gulp-imagemin');// v3.9gulp.task('imagemin', () => { gulp.src('/path') .pipe(imagemin()) .pipe(gulp.dest('/path'))})// 4.0function minImage() { return src('/path') .pipe(imagemin()) .pipe(dest('/path'))}// 新版本使用了函数和return进行任务设置，函数名不能和引入的插件变量名称重复3. 执行任务方式
// v3.9gulp.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.0const { 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 versionsnot 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 */之间的代码不会被删除