gulp4.0升级小记

zorpan 发布于2019-08-23 18:12 / 2213人阅读

摘要：前言周日在公司的新电脑在以前配置的目录按下时发现报了错，百度了一下得知原来已经到了版本，就花了一点时间去升了个级，顺便记下我个人使用到的配置文件新版本的不同点，文笔和水平有限，多多见谅新引入新引入的可替换老版的和，代码更简洁是任务监听是任务

前言

周日在公司的新电脑在以前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 */之间的代码不会被删除

服务器托管云服务器 thinking-in小记 thinking-in-小记品牌升级域名升级

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104838.html

Vuex 升级入坑小记

摘要：升级入坑小记场景描述引入的版本为，开启调试工具默认升级后可以调试。遂升级，发现大量使用失效，报，的中文文档，没有及时更新。机票订单和用户信息。 Vuex 升级入坑小记场景描述引入Vuex的版本为0.3，开启调试工具默认升级后可以调试Vuex。给作者一个大大的赞。为提高开发体验也是操碎了心 (๑•̀ㅂ•́)و✧ (8。安利下(Vue Devtools）。 Vue Devtools ...

ziwenxie 2019-08-19 17:56 评论0 收藏0
react-router 升级小记

摘要：前言最近将公司项目的从版本升到了版本，跟完全不兼容，是一次彻底的重写。升级过程中踩了不少的坑，也有一些值得分享的点。没有就会匹配所有路由最后不得不说升级很困难，坑也很多。前言最近将公司项目的 react-router 从 v3 版本升到了 v4 版本，react-router v4 跟 v3 完全不兼容，是一次彻底的重写。这也给升级造成了极大的困难，与其说升级不如说是对 route...

isLishude 2019-08-21 18:30 评论0 收藏0
使用gulp配置代理，简单解决前端跨域问题

摘要：配置代理，解决跨域问题简单的解决跨域问题，有实时重新加载功能，适用于偶尔改个文件，或者活动页上面有简单的前后端交互初始化全局安装本地下载包下载包新建文件实时重新加载启动时默认浏览器打开的文件代理的域名因为升级到了，所以使 gulp配置代理，解决跨域问题简单的解决跨域问题，有实时重新加载功能，适用于偶尔改个文件，或者H5活动页上面有简单的前后端交互 npm init初始化全局安装gu...

taohonghui 2019-08-26 10:55 评论0 收藏0
async语法升级踩坑小记

摘要：普通的回调函数调用执行后续逻辑使用了以后的复杂逻辑获取到正确的结果输出两个文件拼接后的内容虽说解决了的问题，不会出现一个函数前边有二三十个空格的缩进。所以直接使用关键字替换原有的普通回调函数即可。从今年过完年回来，三月份开始，就一直在做重构相关的事情。就在今天刚刚上线了最新一次的重构代码，希望高峰期安好，接近半年的Node.js代码重构。包含从callback+async.w...

VioletJack 2019-08-23 12:10 评论0 收藏0
Django-Oscar小记：如何使用高版本Django开发网页的SEO模块

摘要：在使用搜索的插件时，很多插件都没有更新到，有的插件更新到了的高版本，但是不适用于的。在升级到版本的时候删除了很多类。正确指令不是，是完毕后，数据库生成表。我们最终使用到的表就是。有了自己的基类之后，在中配置的父类。在使用Google搜索Django的SEO插件时，很多插件都没有更新到Python3.x，有的插件更新到了Python的高版本，但是不适用于Django的2.x。 Django在升...

番茄西红柿 2019-04-23 11:54 评论0 收藏0