Question

我尝试使用清单JSON文件将特定的javascript文件复制，连接并缩小到dist bower_components目录，以保持清洁。

我想在单独的任务中运行concat和uglify，但加载文件的延迟意味着任何相关任务在完成之前运行。

// editorial tools gulp file
var gulp = require("gulp");

var path = require("path"),
argv = require("yargs").argv,
fs = require("fs"),
runSequence = require("run-sequence");

// load plugins
var $ = require("gulp-load-plugins")({ lazy: false });

gulp.task("other-task", ["read-manifest"], function () {
    // something else before read-manifest...
});

gulp.task("read-manifest", function () {

var cwd = process.cwd();

// vendor JS to compile (get manifest of files to bring in)
fs.readFile(cwd + "/src/bower_manifest.json", "utf-8", function (err, _data) {
    if (err) {
        console.log("Error: " + err);
        return;
    }

    // manifest string to JSON
    data = JSON.parse(_data);

    // copy bower files in manifest
    var fileList = data.fileUrls,
        loadOrder = data.loadOrder,
        filesToCopy = [];

    for ( var i = 0, len = loadOrder.length; i < len; i ++ ) {
        filesToCopy.push("./src/bower_components/" + fileList[loadOrder[i]]);
    }

    // add shared js
    filesToCopy.push("./src/javascripts/*.js");

    console.log(filesToCopy);

    // concat and uglify
    return gulp.src(filesToCopy)
        .pipe($.concat("shared.min.js"))
        // .pipe($.uglify())
        .pipe(gulp.dest("./dist/javascripts/"));

    $.util.log($.util.colors.green("JS combined and uglified"));
});
});

控制台：

[gulp] Starting 'read-manifest'...
[gulp] Finished 'read-manifest' after 476 μs
[gulp] Starting 'other-task'...
[ './src/bower_components/jquery/jquery.min.js',
  './src/bower_components/aight/aight.min.js',
  './src/bower_components/d3/d3.min.js',
  './src/bower_components/aight/aight.d3.min.js',
  './src/javascripts/*.js' ]
[gulp] Finished 'other-task' after 15 ms

Answer 1

据我所知，您遇到的主要问题是您尝试将此任务用作另一个任务的依赖项，并且该任务在此任务完成之前启动。

要支持异步任务，您需要返回承诺，流或致电完成回调。你现在做的是返回一个流，但在回调中。因此任务函数不会返回流（因为它是异步）。因此，更简单的方法是使用promise或回调..

使用回调的示例：

// note the "done" callback
gulp.task("read-manifest", function (done) {

    var cwd = process.cwd();

    // vendor JS to compile (get manifest of files to bring in)
    fs.readFile(cwd + "/src/bower_manifest.json", "utf-8", function (err, _data) {
         if (err) {
             console.log("Error: " + err);
             return;
         }
         // ... etc ...
        gulp.src(filesToCopy)
            .pipe($.concat("shared.min.js"))
            // .pipe($.uglify())
            .pipe(gulp.dest("./dist/javascripts/"))

            // when stream ends, call callback
            .on('end', done); 
    });
});

或者您可以使用这样的承诺：

var Q = require('q');

gulp.task("read-manifest", function () {
    var deferred = Q.defer();
    var cwd = process.cwd();

    // vendor JS to compile (get manifest of files to bring in)
    fs.readFile(cwd + "/src/bower_manifest.json", "utf-8", function (err, _data) {
         if (err) {
             console.log("Error: " + err);
             return;
         }
         // ... etc ...
        gulp.src(filesToCopy)
            .pipe($.concat("shared.min.js"))
            // .pipe($.uglify())
            .pipe(gulp.dest("./dist/javascripts/"))

            // when stream ends, call callback
            .on('end', function () {
                 deferred.resolve();
            }); 
    });
    return deferred.promise;
});

这有什么意义吗？这样，家属就知道这项任务何时完成。详细了解async support in the documentation

Answer 2

// gulpfile.js
var gulp = require('gulp');
var Promise = require('promise');

gulp.task('lazy-load-task', function(){
    var LazyLoad = require('your-lazy-load-js');
    return new Promise(function(resolve, reject){
        // define your lazy task depends on LazyLoad
        gulp.task('lazy-task', function(){
            // TODO: do your logic with LazyLoad here
            resolve(0);
            return Promise.resolve(0); // optional
        });
        // execute it
        gulp.start('lazy-task');
    });
});

gulp.task('default', ['lazy-load-task']);

加载文件后运行gulp任务

2 个答案: