【问题标题】:Enabling gulp-watch conditionally with gulp-if (or something else)使用 gulp-if (或其他)有条件地启用 gulp-watch
【发布时间】:2014-06-11 18:52:55
【问题描述】:

基本上,我想设置我的任务,以便如果我执行gulp less --watch 它会观看,否则只需执行构建。这是我目前所拥有的:

'use strict';

var gulp = require('gulp');
var less = require('gulp-less');
var gulpif = require('gulp-if');
var watch = require('gulp-watch');
var cli = require('minimist')(process.argv.slice(2));

gulp.task('less', function () {
  return gulp.src(['./client/styles/styles.less', './client/styles/libs.less'])
    .pipe(less({ sourceMap: !cli.production }))
    .pipe(gulp.dest('./dist/styles'))
    .pipe(gulpif(cli.watch, watch()));
});

发生的情况是它仍然执行watch,但不传递任何文件。这也阻止了任务来自process.exit()ing..

我假设我必须将它包装在某些东西中,或者使用其他方法(不是 gulp-if)..

【问题讨论】:

  • 所以如果通过了--watch,您希望构建+继续观察并在LESS源发生变化时再次构建?
  • 很想在这里得到@robrich 的意见:)

标签: javascript build gulp gulp-watch gulp-less


【解决方案1】:

gulp-watch 是一个无穷无尽的流,所以如果调用它永远不会允许进程退出。您的任务始终调用watch() 以便将其传递给gulpif,即使if 不需要它。这意味着您将运行一个独立的观察者。此外,观察者需要在管道链中排在第一位,这样它才能重新触发剩余的处理程序。

您需要做的是使用命令行参数有条件地调用并附加watch()。运行一个进行观察的任务。此外,如果在观察者之后出现错误,请使用 gulp-plumber (https://github.com/floatdrop/gulp-plumber) 来保持流工作。

var plumber = require('gulp-plumber');
gulp.task('less', function () {
    var src = gulp.src(['./client/styles/styles.less', './client/styles/libs.less']);

    if (cli.watch) {  // watch() won't be called without the command line arg
        src = src.pipe(watch()).plumber(); 
    }

    return src.pipe(less({ sourceMap: !cli.production }))
        .pipe(gulp.dest('./dist/styles'));
});

【讨论】:

  • 我找到了一个解决方法,与您的不完全一样,但它也可以。我正在使用pipe(cli.watch ? watch() : gutil.noop())。感谢您提供此解决方案。
  • lazypipe().pipe(watch) 可能也可以工作 npmjs.org/package/lazypipe
【解决方案2】:

不是那么优雅,但这基于NODE_ENV(与gulp-environments 一起使用),我想通过(在开发中是,在生产/部署中不是)来确定watch 的开始。免责声明:我刚开始使用 Gulp(4.0 beta 以便 gulp.series 工作),所以这可能很糟糕,但它可以完成工作.. :-)

var environment = require('gulp-environments'); var development = 环境.开发; 变种生产=环境。生产; 如果(发展()){ gulp.task('default', gulp.series('flow', 'babel', 'cleanup', 'watch'), function(done) { 完毕(); }); } 别的 { gulp.task('default', gulp.series('flow', 'babel', 'compress', 'cleanup'), function(done) { 完毕(); }); }

【讨论】:

    猜你喜欢
    • 2023-04-09
    • 1970-01-01
    • 2016-12-24
    • 2017-12-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多