gulp4.0升级小记

栏目: Node.js · 发布时间: 5年前

内容简介:周日在公司的新电脑在以前gulp3.9配置的目录按下npm install时发现报了错,百度了一下得知原来gulp已经到了4.0版本,就花了一点时间去升了个级,顺便记下我是使用sass + gulp-autoprefixer进行开发的,无意发现当autoprefixer碰到-webkit-box-orient: vertical;时会自动把这个样式给删了 0.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文件或者在根目录添加一个.browserslistrc文件进行gulp-autoprefixer配置
// 详情可以参考:https://github.com/browserslist/browserslist#queries
.pipe(autoprefixer())

// .browserslistrc文件
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 */之间的代码不会被删除

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机视觉

计算机视觉

Richard Szeliski / 艾海舟、兴军亮 / 清华大学出版社 / 2012-1 / 109.00元

《计算机视觉——算法与应用》探索了用于分析和解释图像的各种常用技术,描述了具有一定挑战性的视觉应用方面的成功实例,兼顾专业的医学成像和图像编辑与交织之类有趣的大众应用,以便学生能够将其应用于自己的照片和视频,从中获得成就感和乐趣。本书从科学的角度介绍基本的视觉问题,将成像过程的物理模型公式化,然后在此基础上生成对场景的逼真描述。作者还运用统计模型来分析和运用严格的工程方法来解决这些问题。 本......一起来看看 《计算机视觉》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具