【问题标题】:Ordering of tasks in a gulpfilegulpfile 中的任务排序
【发布时间】:2017-04-21 22:53:57
【问题描述】:

我想通过 Gulp 在我的项目中实现非常简单的任务链:

  1. 复制所有文件;
  2. 用值替换一些占位符;
  3. 缩小一些 文件;

为了这些目的,我创建了 gulpfile,主要任务如下:

gulp.task(tasks.build, [
          tasks.simplyCopy, 
          tasks.minifyXml, 
          tasks.minifyJs, 
          tasks.subst]);

这是一个非常简单和自我描述的。

下面我写了完整的 gulpfile.js:

var gulp       = require('gulp');
var prettyData = require('gulp-pretty-data');
var uglify     = require('gulp-uglify');
var renvy      = require('gulp-renvy');

var tasks = {
    simplyCopy: "simply-copy",
    minifyXml:  "minify-xml",
    minifyJs:   "minify-js",
    subst:      "renvy-subst",
    build:      "build"
};

// Collection of tasks
gulp.task(tasks.build, [tasks.simplyCopy, tasks.minifyXml, tasks.minifyJs, 
tasks.subst]);

// By this task sources simply copy to the destination
var destination = 'dist/';
gulp.task(tasks.simplyCopy, function () {
    gulp.src(['Source/**/*.*', '!Source/www/res/strings/*.*'], {base: 
'Source/www'})
    .pipe(gulp.dest(destination));
});

var stringsDestPath = 'dist/res/strings/';
var stringSrcPath   = 'Source/www/res/strings/';

// By this task some xml files minify
gulp.task(tasks.minifyXml, [tasks.simplyCopy], function() {
    gulp.src(stringSrcPath + '*.xml')
        .pipe(prettyData({
            type: 'minify',
            preserveComments: true,
            extensions: {
                'xlf': 'xml',
                'svg': 'xml'
            }
        }))
        .pipe(gulp.dest(stringsDestPath))
});

var placeholder = {
    '%version%': {'prod':'010.00',   'dev':'010.00'}
};


// By this task in some files placeholders replaces with value
gulp.task(tasks.subst, [tasks.minifyXml, tasks.minifyJs], function(){
    return gulp.src(stringsDestPath + '*.*')
        .pipe(renvy(placeholder, 'dev'))
        .pipe(gulp.dest(stringsDestPath));
});


// By this task some js files minify 
gulp.task(tasks.minifyJs, [tasks.simplyCopy], function () {
    gulp.src(stringSrcPath + '*.js')
        .pipe(uglify())
        .pipe(gulp.dest(stringsDestPath))
});

但我有这样意想不到的行为:

不会替换占位符,但会执行。

[16:29:51] Using gulpfile C:\PDDirectory\Workspace\src\some_workbench\User_Part\gulpfile.js
[16:29:51] Starting 'simply-copy'...
[16:29:51] Finished 'simply-copy' after 17 ms
[16:29:51] Starting 'minify-xml'...
[16:29:51] Finished 'minify-xml' after 7.49 ms
[16:29:51] Starting 'minify-js'...
[16:29:51] Finished 'minify-js' after 5.84 ms
[16:29:51] Starting 'renvy-subst'...
[16:29:51] Finished 'renvy-subst' after 28 ms
[16:29:51] Starting 'build'...
[16:29:51] Finished 'build' after 5.66 ?s

Task tasks.subst 单独执行工作正常,但在与其他任务的链中,我只看到执行复制和缩小的结果。 为什么会这样?

【问题讨论】:

    标签: javascript gulp


    【解决方案1】:

    地点tasks.subst 具有tasks.build 的唯一依赖项

    gulp.task(tasks.build, [tasks.subst]);
    

    由于tasks.subst 需要所有其他任务,因此排序应该是正确的,添加所有其他任务可能会导致排序问题。

    来自gulp.task documentation

    注意:您的任务是否在依赖项完成之前运行? 确保您的依赖任务正确使用异步运行 提示:接受回调或返回承诺或事件流

    为确保在执行任务之前满足任务依赖关系,Gulp 需要每个任务返回 stream 或承诺,或调用 task function callback parameter

    在您的情况下,以下任务应该只是 return 流:

    • tasks.minifyXml
    • tasks.minifyJs
    • tasks.simplyCopy

    例如:

    gulp.task(tasks.minifyXml, [tasks.simplyCopy], function(done) {
        // just return the task stream here
        return gulp.src(stringSrcPath + '*.xml')
            .pipe(prettyData({
                // ...
            }))
            .pipe(gulp.dest(stringsDestPath));
    });
    

    或在无法返回流时使用回调:

    gulp.task('somename', function(done) {
    
      // async function which does not return a stream like other gulp functions
      getFilesAsync(function(err, res) {
        // pass any errors to the callback
        if (err) return done(err);
    
        var stream = gulp.src(res)
          .pipe(minify())
          .pipe(gulp.dest('build'))
          .on('end', done); // use the callback when it's done
      });
    });
    

    【讨论】:

    • 是的,我尝试单独放置task.subst,不幸的是,它不起作用。在这种情况下,我执行的任务日志相同,但结果相同。
    • @PavelPraulov 当我浏览你的问题时,我看到tasks.subst 正确地返回了流并假设其他任务也是如此。我用有关异步任务排序的其他信息更新了我的答案。
    • 现在可以了。感谢您的关注、知识和快速解答。
    猜你喜欢
    • 2019-04-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多