如何使用gulp-if和lazypipe多个管道?

时间:2015-12-21 21:23:01

标签: javascript gulp gulp-useref gulp-if

我有一个不使用gulpif和lazypipes的Grunt文件,但我要做的是创建一个任务,使用gulpif将index.html页面中的脚本文件包含在内。然后lint JS uglifynotify /连接,var gulp = require('gulp'), jshint = require('gulp-jshint'), notify = require('gulp-notify'), gulpif = require('gulp-if'), lazypipe = require('lazypipe'), useref = require('gulp-useref'); uglify = require('gulp-uglify'); var anyJS = '/**/*.js', distFolder = 'dist'; //Lazy Tasks var jsTask = lazypipe() .pipe(jshint) .pipe(jshint.reporter('jshint-stylish')) .pipe(notify('JS Linting finished')) .pipe(uglify()) .pipe(notify('JS Compressing finished')); //Tasks gulp.task('mini', function () { return gulp.src('./index.html') .pipe(useref()) .pipe(gulpif(anyJS, jsTask())) .pipe(gulp.dest(distFolder)); }); 。我得到一个“错误:对lazypipe()的无效调用..”我正在看这篇文章https://github.com/OverZealous/lazypipe/issues/19,但我有点绿,不明白错误/如何修复它“管道( foo)vs. pipe(foo())“。 如果有人能告诉我我是如何使用lazypipe错误的=我应该很好。

grunt文件更大,我正在使用gulpif bc css也将使用,一旦这是工作。如果有更好的方式让我这样做,请告诉我,谢谢。

正在使用的插件:

{{1}}

2 个答案:

答案 0 :(得分:2)

所以我终于弄清楚出了什么问题。 LazyPipe中的所有函数调用都不能使用()!所以如果你有lazypipe()。pipe(jshint).pipe(uglify())。它不起作用 - 你也需要删除uglify上的()。

我想我会再次尝试使用LP和GF,但这是使用gulpFilter或至少90%。通知没有显示。

gulp.task('mini', function () {
    var jsFilter = gulpFilter(jsInput, {restore: true});
    var cssFilter = gulpFilter(cssInput, {restore: true});

    return gulp.src('./index.html')
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(useref())
        .pipe(jsFilter)
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(uglify())
        .pipe(notify('JS task finished'))
        .pipe(jsFilter.restore)
        .pipe(cssFilter)
        .pipe(sass())
        .pipe(autoPrefixer('last 2 versions'))
        .pipe(cssComb())
        .pipe(mmq({
            log: true
        }))
        .pipe(minifyCss())
        .pipe(notify('CSS task finished'))
        .pipe(cssFilter.restore)

        .pipe(gulp.dest(distFolder));
});

答案 1 :(得分:0)

就像您在自己的回答中指出的那样,当您使用 lazypipe 进行管道传输时,您需要使用流工厂本身(而不是结果)。对于不使用参数的工厂,这就像删除 () 一样简单,对于确实需要参数的工厂,您可以使用箭头函数来创建这样的工厂:

var jsTask = lazypipe()
    .pipe(jshint)
    .pipe(() => jshint.reporter('jshint-stylish'))
    .pipe(() => notify('JS Linting finished'))
    .pipe(uglify)
    .pipe(() => notify('JS Compressing finished'));

也可以使用 bind() 创建此类工厂,但上述方法更简单,因为您无需担心调用上下文。