在gulpfile中排序任务

时间:2017-04-19 17:12:01

标签: javascript gulp

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

  1. 复制所有文件;
  2. 用值替换一些占位符;
  3. 缩小一些 文件;
  4. 为了这些目的,我创建了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
    

    任务tasks.subst执行得很好,但在与其他任务的链中,我看到执行复制和缩小的结果。 为什么这样?

1 个答案:

答案 0 :(得分:0)

地方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
  });
});