Question

问题：我想维护文件的“集合”。这将有助于构建时间和灵活性。例如，每当我编辑我的app.js文件时，我都不想重新编译我的所有Twitter引导程序文件。

我当然可以通过2个任务和2个监视声明实现这一点 - 问题是除了文件数组之外，任务是相同的。理想情况下，我想在watch声明中传递这些作为参数有没有办法做类似下面的伪代码？：

var files = {
    scripts: [
        'www/assets/scripts/plugins/**/*.js', 
        'www/assets/scripts/main.js', 
    ],
    vendor: [
        'vendor/jquery/dist/jquery.js',
        'vendor/jqueryui/ui/jquery.ui.widget.js',                       
        'vendor/holderjs/holder.js'
    ],              
};
...


gulp.task('js', ['lint'], function (files, output) {
    return gulp.src(files)
        .pipe(debug())
        .pipe(concat(output))
        .pipe(uglify({outSourceMap: true}))
        .pipe(gulp.dest(targetJSDir))       
        .pipe(notify('JS minified'))
        .on('error', gutil.log) 
});

...

gulp.watch('scripts/**/*.js', ['lint', 'js'], files.scripts, 'app.min.js');
gulp.watch('vendor/**/*.js', ['lint', 'js'], files.vendor, 'vendor.min.js');

以另一种方式翻转：是命名空间调用任务的监视声明吗？通过这种方式，我可以检查哪个手表触发了任务，并在任务本身内对这些事件进行了条件化。

Answer 1

问题是除了文件数组之外，任务是相同的。

我相信lazypipe (see its gh page)很好适合你的需要。这是一个有趣的问题。我将尝试回答我认为你所问的问题（lazypipe满意）以及我认为你可能正在考虑的内容，或者最终会想到你是否超越了管道的参数化问题。

我们想要的一个方面是我们不想在没有改变的文件上重新运行jshint。另外，我们希望保持DRY，除了更改的文件之外，我们还想要获取新文件。

这是经过测试并适用于我：

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var es = require('event-stream');
var lazypipe = require('lazypipe');
var gutil = require('gulp-util');
var path = require('path');

var files = {
  scripts: ['src/**/*.js'],
  vendor: ['vendor/**/*.js']
};

// sets up a lazy pipe that does jshint related stuff
function getJsMultiPipe(name) {
  return lazypipe()
    .pipe($.jshint)
    .pipe($.jshint.reporter, 'jshint-stylish')

    // if you don't want to fail on style errors remove/comment this out:
    .pipe($.jshint.reporter, 'fail');
}

// sets up a lazy pipe that does concat and post-concat stuff
function getJsCombinedPipe(groupName, outfile) {
  return lazypipe()
      .pipe($.concat, outfile)
      .pipe($.uglify, {outSourceMap: true})
      .pipe(gulp.dest, 'build')
      .pipe($.notify, {message: groupName + ' JS minified', onLast: true});
}

// sets up a pipe for the initial build task, combining the above two pipes
function getBuildPipe(groupName, outfile) {
  return gulp.src(files[groupName])
        .pipe(getJsMultiPipe(groupName)())
        .pipe(getJsCombinedPipe(groupName, outfile)());
}

// sets up a watch pipe, such that only the changed file is jshinted,
// but all files are included in the concat steps
function setWatchPipe(groupName, outfile) {
  return $.watch({
    glob: files[groupName],
    name: groupName,
    emitOnGlob: false,
    emit: 'one'
  }, function(file, done) {
    return file
        .pipe($.debug({title: 'watch -- changed file'}))
        .pipe(getJsMultiPipe(groupName)())
        // switch context
        .pipe(gulp.src(files[groupName]))
        .pipe($.debug({title: 'watch -- entire group'}))
        .pipe(getJsCombinedPipe(groupName, outfile)())
        .pipe($.debug({title: 'watch -- concatted/source-mapped'}))
        .pipe($.notify({message: 'JS minified', onLast: true}));
  });
}

// task to do an initial full build
gulp.task('build', function() {
  return es.merge(
      getBuildPipe('scripts', 'app.min.js'),
      getBuildPipe('vendor', 'vendor.min.js')
  )
  .pipe($.notify({message: 'JS minified', onLast: true}));
});


// task to do an initial full build and then set up watches for
// incremental change
gulp.task('watch', ['build'], function(done) {
  setWatchPipe('scripts', 'app.min.js');
  setWatchPipe('vendor', 'vendor.min.js');
  done();
});

我的依赖关系看起来像：

  "devDependencies": {
    "jshint-stylish": "^0.1.5",
    "gulp-concat": "^2.2.0",
    "gulp-uglify": "^0.2.1",
    "gulp-debug": "^0.3.0",
    "gulp-notify": "^1.2.5",
    "gulp-jshint": "^1.5.3",
    "gulp": "^3.6.0",
    "gulp-load-plugins": "^0.5.0",
    "lazypipe": "^0.2.1",
    "event-stream": "^3.1.1",
    "gulp-util": "^2.2.14",
    "gulp-watch": "^0.5.3"
  }

编辑：我再次瞥了一眼，我注意到这些：

    // switch context
    .pipe(gulp.src(files[groupName]))

请注意，自从我写这篇文章以来，我认为gulp.src API已经发生了变化，并且当你将内容输入gulp.src时，它当前不会切换上下文，因此这个位置可能需要更改。对于较新版本的gulp，我认为会发生的情况是，您将添加到上下文中，而不是可能会失去一点效率。

Answer 2

您可以编写一个包装函数来捕获参数并将其传递给任务。例如。（在lodash库的帮助下）：

// We capture the options in this object. We use gulp.env as a base such that
// options from cli are also passed to the task.
var currentOpts = _.clone(gulp.env);

// Here we define a function that wraps a task such that it can receive
// an options object
function parameterized(taskFunc) {
    return function() {
        taskFunc.call(null, currentOpts);
    }
}

// Here we create a function that can be used by gulp.watch to call
// a parameterized task. It can be passed an object of "task" : {options} pairs
// and it will return a task function that will capture these options
// before invoking the task.
function withArgs(tasks) {
    return function() {
        _.each(tasks, function (opts, task) {
            currentOpts = _.extend(currentOpts, opts);
            gulp.run(task);
            currentOpts = _.clone(gulp.env);
        });
    }
}

var files = {
    scripts : [ "src/**/*.js"],
    vendor : ["vendor/**/*.js"
};

// We pass the task function to parameterized. This will create a wrapper
// function that will pass an options object to the actual task function
gulp.task("js", parameterized(function(opts) {
    gulp.src(files[opts.target])
        .pipe(concat(opts.output));
}));

gulp.task("watch", function() {
    // The withArgs function creates a watch function that invokes 
    // tasks with an options argument
    // In this case it will invoke the js task with the options object
    // { target : "scripts", output : "scripts.min.js" }
    gulp.watch(files.scripts, withArgs({
        js : {
            target : "scripts",
            output : "scripts.min.js"
        }
    }));
    gulp.watch(files.vendor, withArgs({
        js : {
            target : "vendor",
            output : "vendor.min.js"
        }
    }));
});

Answer 3

我遇到了同样的问题 - 如何将参数传递给gulp任务。很奇怪这个功能不是内置的（例如，这是一个常见的任务，例如，两个版本的包，参数化任务看起来像一个非常干的解决方案）。

我想让它尽可能简单，所以我的解决方案是为每个可能的参数动态创建任务。如果您有少量精确定义的值，它可以正常工作。它不适用于宽范围值，如整数或浮点数。

任务定义包含在一个带有所需参数的函数中，并且该参数被附加到任务的名称（为方便起见，“$”之间）。

您的代码可能如下所示：

function construct_js(myname, files, output) {
  gulp.task('js$' + myname, ['lint'], function () {
      return gulp.src(files)
          .pipe(debug())
          .pipe(concat(output))
          .pipe(uglify({outSourceMap: true}))
          .pipe(gulp.dest(targetJSDir))       
          .pipe(notify('JS minified'))
          .on('error', gutil.log) 
  });
}

construct_js("app", files.scripts, 'app.min.js');
construct_js("vendor", files.vendor, 'vendor.min.js');

gulp.watch('scripts/**/*.js', ['lint', 'js$app']);
gulp.watch('vendor/**/*.js', ['lint', 'js$vendor']);

或者更好，在数据定义稍有变化的情况下，我们在循环中调用任务生成（因此，如果在configs数组中添加新的“版本”，它将立即起作用：

var configs       = [
  {
    name : "app",
    output: 'app.min.js',
    files: [                'www/assets/scripts/plugins/**/*.js', 
                            'www/assets/scripts/main.js', 
                        ]
  },
  {
    name : "vendor",
    output: 'vendor.min.js',
    files: [                'vendor/jquery/dist/jquery.js',
                            'vendor/jqueryui/ui/jquery.ui.widget.js',                       
                            'vendor/holderjs/holder.js'
                        ]
  }
];

function construct_js(taskConfig) {
  gulp.task('js$' + taskConfig.name, ['lint'], function () {
      return gulp.src(taskConfig.files)
          .pipe(debug())
          .pipe(concat(taskConfig.output))
          .pipe(uglify({outSourceMap: true}))
          .pipe(gulp.dest(targetJSDir))       
          .pipe(notify('JS minified'))
          .on('error', gutil.log) 
  });
}

for (var i=0; i <  configs.length; i++) {
  construct_js(configs[i]);
}

如果我们使用下划线表示最后一个“for”：

_(configs).each(construct_js);

我在项目中使用了这种方法并取得了良好的效果。

Answer 4

我想提出一些替代方案。假设我们有一个名为* -text的任务，我们希望在给定某个参数的情况下有条件地进行uglify。

这两种方法使用两个具有单个构建任务的手表。

备选方案＃1：

您可以使用gulp-exec使用参数启动任务。

build

请注意这种方法有点慢，因为它的作用是执行命令行gulp。

备选方案＃2：

设置全局变量：

var exec = require('child_process').exec;

gulp.task('build', function(){
   // Parse args here and determine whether to uglify or not
})

gulp.task('buildWithoutUglify' function(){
   exec('gulp build --withoutUglify')
})

gulp.task('watch', function(){
    gulp.watch(someFilePath, ['buildWithoutUglify'])
})

Gulp：将参数从watch声明传递给任务

4 个答案: