• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

前端工程构建之谈:gulp3要不要升级到Gulp4

其他 freephp 2723次浏览 0个评论

关于升级还是不升级,这是一个哲学问题。

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和parallel
export.build = exports.build = series(clean,parallel(babelJs, babelCss),babelHtml);

这还是一个简易的构建脚本,还缺少一个watch,监听项目中css、js、html文件的变化,一旦发生变化就触发对应的方法。gulp服务一直运行着,实时刷新。
我个人认为,如果是长期维护的项目,还是可以考虑拥抱gulp4,毕竟Gulp4的强大,是真香!


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明前端工程构建之谈:gulp3要不要升级到Gulp4
喜欢 (0)

您必须 登录 才能发表评论!

加载中……