前端构建之谈:Gulp3升级到Gulp4?

Posted 成都有娃儿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端构建之谈:Gulp3升级到Gulp4?相关的知识,希望对你有一定的参考价值。

关于升级还是不升级,这是一个哲学问题。
gulp4的语法更加现代,支持ES6的大部分写法,使用exports的方式去暴露任务组合,更加灵活和便捷。
gulp4同时也提供了很多强大的API,例如parallel()和series()。此外,gulp4不再支持同步任务,所以可以看到编写任务的时候也不再推荐使用.task()方法去编写,而是独立定义一个函数方法,然后用return去返回一个回调函数的结果。例如一个处理的css的任务,定义如下。
function minHeaderCss() { // 这是一个回调函数的返回对象,本身也是异步的 return src([ './static/css/header.css', './static/css/boot.css', './static/css/wrap.css', './static/css/feedback.css', './static/css/pronemove.css' ]) .pipe(minCss()) .pipe(concat('main_header.min.css')) .pipe(dest('./static/css/min/'));}
parallel()是并行执行多个任务(task),一个任务的错误将整个任务组合都结束,但是其他并行的任务可能执行完,也可能执行完。series()是顺序执行,任何一个任务出错,所有后续任务都停止,有点单线程的感觉。这两个方法都可以从gulp里面获得,如下。
const { series, parallel } = require('gulp');
只需要将需要执行的任务添加到series()或者parallel()里面即可:
const { series, parallel } = require('gulp');
function javascript(cb) { // body omitted cb();}
function css(cb) { // body omitted cb();}
exports.build = series(javascript, css);
exports.buildParallel = parallel(javascript, css)
如果想执行build任务组合,那么在命令行中执行如下语句:
gulp build
至于使用哪种方式,还是要看是否构建过程很漫长。如果构建的步骤多,任务重,时间又长,肯定优先考虑使用parallel()来并行构建任务组合。不同的任务组合还可以进行二次组合,可以对一些适合顺序执行的任务使用series(),对一些适合并行的任务使用parallel()。例如一些需要babel编译的Sass和js的任务使用parallel(),一个比较完整的构建脚本如下所示:
const {src, dest, watch, series, parallel, connect} = require('gulp');const babel=require('gulp-babel');const revAll = require('gulp-rev-all');const cssver = require('gulp-make-css-url-version');const del = require('del');const htmlmin = require('gulp-htmlmin');
// 可以使用ES6 => 语法来编写任务const babelCss = () => src(['./css/**/*.css']).pipe(cssver()).pipe(cleancss({compatibility: 'ie7', format: 'keep-breaks', keepSpecialComments :'*'})).pipe(dest('./dist/css/')).pipe(connect.reload());
function babelJs() { return src(['./js/**/*.js']) .pipe(babel({presets: ['@babel/env']})) .pipe(uglify({ mangle:true, compress:true}) .pipe(dest('./dist/js/')) .pipe(revAll.manifestFile()) .pipe(dest('./dist/rev/'));}
function clean() { return del('./dist');}
function babelHtml() { return src(['./app/tpl/*.html']) .pipe(htmlmin({ removeComments: true, collapseWhitespace: true })) .pipe(dest('./dist/html/'));}
// 嵌套使用series和parallelexport.build = exports.build = series(clean,parallel(babelJs, babelCss),babelHtml);
这还只是一个简易的构建脚本,还缺少一个watch,监听项目中css、js、html文件的变化,一旦发生变化就触发对应的方法。gulp服务一直运行着,实时刷新。
综上所述,我个人认为,如果是长期维护的项目,还是可以考虑拥抱gulp4,毕竟Gulp4的强大,是真香!

以上是关于前端构建之谈:Gulp3升级到Gulp4?的主要内容,如果未能解决你的问题,请参考以下文章

Gulp 3 到 Gulp 4:如何观看 scss 并将其缩小/编译成 css?

gulp4坑:assert.js throw err AssertionError

9012教你如何使用gulp4开发项目脚手架

gulp 4 依赖项和插件

经验之谈——gulp使用教程

gulp的使用