Gulp 3 升级到 Gulp 4 的一些变化

Forece

3 年前

半小时看完了尚硅谷的 Gulp 教程，本来觉得 Gulp 其实还是挺简单的，没想到 Gulp 升级到 4.0.1 了。很多 API 也改变了使用方法，看着官方文档又学了一遍。今天 Forece 来讲一下 Gulp 3 升级到 Gulp 4 的一些变化。

Gulp 是前端工程化中最便捷的工具之一，用户通过配置个性化的插件，来提高工程师的开发效率。

- CSS、JS 文件合并
- LESS 文件解析转换 CSS
- CSS、JS、HTML 文件压缩
- ES6 转 ES5
- 代码实时同步使页面发生变化
- 等等

如果不想费事，还想使用 Gulp 3 版本的话，直接 npm 安装

npm install gulp@3.9.1 --save -dev

使用 gulp 之前别忘了安装 Gulp 的控制台

npm install --g gulp-cli

Gulp 4 对比 Gulp 3

引入Gulp

// Gulp3
var gulp = require('gulp')

// Gulp4
// parallel, series, src, dest, watch 这些是 Gulp 的 API，需要什么就写什么
const { parallel, series, src, dest, watch } = require('gulp');

创建任务

// Gulp3
gulp.task('build',function(){
    return console.log('build');
})

// Gulp4
// Gulp4 直接使用函数来创建任务
function build() {
    return console.log('build');
}

执行任务

// Gulp3
// 直接在控制台执行 Gulp taskname 就可以执行任务

// Gulp4
// 需要使用 exports 定义属性，才可以使用 gulp taskname 执行任务
exports.build = build;

默认任务

// Gulp3
// 定义了默认任务，直接 Gulp 就可以执行默认任务
gulp.task('default', ['js', 'css', 'html'])

// Gulp4
// exports.default 创建默认任务（单任务、同步、异步）
exports.default = parallel(js, css, html)

同步任务

// Gulp3
// 去掉 return 就是同步任务，顺序执行
gulp.task('css', function () {
    gulp.src('src/css/*.css')
    .pipe(dest('dist/css/'))
})

// Gulp4
// 使用 series 执行异步任务
exports.default = series(js, css, html);

异步任务

// Gulp3
// 只要有 return 就自动异步
gulp.task('css', function () {
    return gulp.src('src/css/*.css')
        .pipe(dest('dist/css/'))
})

// Gulp4
// 使用 parallel 执行异步任务
exports.default = parallel(js, css, html);

依赖任务

// Gulp3
// 只要创建任务时就可以定义依赖关系
gulp.task('css', ['less'], function () {
    return gulp.src('src/css/*.css')
        .pipe(dest('dist/css/'))
})

// Gulp4
// 使用 series 配合 parallel 定义执行顺序
exports.default = parallel(js, series(less, css), html);

调用API

// Gulp3
gulp.task('css', ['less'], function () {
    return gulp.src('src/css/*.css')
        .pipe(dest('dist/css/'))
})
// Gulp4
function css() {
    return src('src/css/*.css')
        .pipe(dest('dist/css/'))
})
// 貌似没什么太大变化，可以不用写 gulp 调用了

监听事件

// Gulp3
gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css']);

// Gulp4
watch(['src/css/*.css', 'src/less/*.less'], css);
// Gulp4 直接写方法名，或使用 series()

基本发现就这么多，有问题的可以一起讨论。

附：Gulp4 实现页面实时刷新

打赏赞