如何在其他任务之前运行 Gulp 任务

Question

我是 Gulp 构建系统的新手，到目前为止，我发现定义任务（与替代方案相比）非常简洁直观，直到我不得不开始订购任务......

我猜，这是一个非常常见的用例：我尝试在运行其他构建任务之前运行一个干净的任务。

我首先天真地写了这样的东西（coffeescript）：

gulp.task 'dist', ['clean:dist', 'copy-libs:dist', 'minify']

问题当然是所有依赖任务都是并行运行的，不能保证后续任务不会在清理任务之前运行。

那么，解决办法是什么？

Answer 1

好的，回答我自己的问题：

社区里有人推荐使用依赖系统。 因此我必须重写我所有的任务并让它们依赖于干净的任务。

但我有时希望在不运行干净任务的情况下运行这些任务。 这意味着我必须复制这些任务（一个有依赖的版本，一个没有依赖的版本）。

坦率地说，对我来说，这违背了使用 Gulp 的目的，因为我使用 Gulp 主要是因为它的简洁性、可读性（尤其是用 CoffeeScript 编写时）和“代码优于配置”的方法。

所以，我现在的解决方案是使用 run-sequence 插件和 merge-stream 来实现这一点，同时保持可读且紧凑的构建文件（见下文）。

gulp.task 'dist', -> runSequence 'clean:dist', ['copy-libs:dist', 'minify']

看起来 Gulp 4 将使用 'runSeries' 和 'runParallel' 函数解决这个问题。

请注意，我正在使用 merge-stream 插件，因为我的一项任务（复制库）处理多个流。而且，这里有一个非常好的建议，您的所有任务都应该返回一个流并且只有 一个 流（因此是合并流）。

---

这是我的完整构建文件：

# Load all required libraries
gulp = require 'gulp'
del = require 'del'
coffee = require 'gulp-coffee'
less = require 'gulp-less'
changed = require 'gulp-changed'
uglify = require 'gulp-uglify'
cssmin = require 'gulp-minify-css'
htmlmin = require 'gulp-htmlmin'
size = require 'gulp-filesize'
runSequence = require 'run-sequence'
merge = require 'merge-stream'

typeIsArray = Array.isArray || ( value ) -> return {}.toString.call( value ) is '[object Array]'
bower = (value) -> # prefix the given path/array with the bower directory
    if !typeIsArray value then "bower_components/" + value else value.map (str) -> bower str

gulp.task 'clean:development', (cb) ->
    del [
        "src/js/*.js", "!src/js/data.js" # in development, delete all .js files except data.js
        "src/css/main.css", "src/css/sidebar.css", "src/css/bootstrap*"
        "src/fonts/"
        "src/js/libs/"
    ], cb

gulp.task 'clean:dist', (cb) ->
    del "build/", cb

gulp.task 'coffee', ->
    gulp.src "src/js/main.coffee"
        .pipe coffee()
        .pipe gulp.dest "src/js"

gulp.task 'less', ->
    gulp.src "src/css/main.less"
        .pipe less()
        .pipe gulp.dest "src/css"

gulp.task 'copy-libs:development', -> # install and copy only the required bower files to the right directory (under src/)
    merge( # here we have to merge the streams otherwise only the latest one will be returned
        gulp.src bower [
                "jquery/dist/*",
                "angular/angular*.{js,js.map}"
                "angular-sanitize/*.{js,js.map}"
                "angular-animate/*.{js,js.map}"
                "bootstrap/dist/js/*"]
            .pipe changed "src/js/libs"
            .pipe gulp.dest "src/js/libs"
        gulp.src bower "bootstrap/dist/fonts/*"
            .pipe changed "src/fonts"
            .pipe gulp.dest "src/fonts"
        gulp.src bower ["bootstrap/dist/css/bootstrap.css*", "bootstrap/dist/css/bootstrap.min.css"]
            .pipe changed "src/css"
            .pipe gulp.dest "src/css"
    )

gulp.task 'watch', ->
    gulp.watch "src/js/main.coffee", ['coffee']
    gulp.watch "src/css/main.less", ['less']

gulp.task 'minify', ['coffee', 'less'], ->
    merge(
        gulp.src "src/js/main.js"
            .pipe uglify()
            .pipe gulp.dest "build/js"
        gulp.src "src/css/main.css"
            .pipe cssmin()
            .pipe gulp.dest "build/css"
        gulp.src "src/index.html"
            .pipe htmlmin {collapseWhitespace: true, removeComments: true}
            .pipe gulp.dest "build"
    )

gulp.task 'copy-libs:dist', ['copy-libs:development'], ->
    # the 'base' option here is used to keep the structure under the src/ directory (otherwise it is flattened)
    gulp.src ["js/data.js", "js/libs/*", "fonts/*", "css/bootstrap.min.css"], {cwd: "src", base: "src"}
        .pipe size()
        .pipe gulp.dest "build"


# Main tasks
gulp.task 'default', -> console.log 'no-op default task'
gulp.task 'clean', ['clean:development', 'clean:dist']
gulp.task 'development', -> runSequence 'clean:development', ['copy-libs:development', 'coffee', 'less', 'watch']
gulp.task 'dist', -> runSequence 'clean:dist', ['copy-libs:dist', 'minify']