如何在 gulp-if 和 lazypipe 中使用多个管道?
How to use multiple Pipes with gulp-if and lazypipe?
我有一个 Grunt 文件,它在不使用 gulpif 和 lazypipes 的情况下工作,但我想做的是创建一个任务,该任务将使用 [=12= 在我的 index.html 页面中接收脚本文件].然后 gulpif
JS lint
、uglify
/concatenate 和 notify
。我得到一个"Error: Invalid call to lazypipe()..",我正在看这个posthttps://github.com/OverZealous/lazypipe/issues/19,但我有点菜鸟,不明白error/how来修复它"pipe(foo) vs. pipe(foo())". 如果有人能告诉我我是如何使用 lazypipe 的错误 = 我应该很好。
grunt 文件更大,我正在使用 gulpif bc css 一旦它起作用,我也会使用它。如果有更好的方法让我知道,谢谢。
正在使用的插件:
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中的所有函数调用都不能使用()!所以如果你有 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));
});
就像您在自己的回答中指出的那样,当您使用 lazypipe
进行管道传输时,您需要使用流工厂本身(而不是结果)。对于不使用参数的工厂,这就像删除 ()
一样简单,对于需要参数的工厂,您可以使用箭头函数来创建这样的工厂:
var jsTask = lazypipe()
.pipe(jshint)
.pipe(() => jshint.reporter('jshint-stylish'))
.pipe(() => notify('JS Linting finished'))
.pipe(uglify)
.pipe(() => notify('JS Compressing finished'));
也可以使用 bind()
创建这样的工厂,但上面的方法更简单,因为您无需担心调用上下文。
我有一个 Grunt 文件,它在不使用 gulpif 和 lazypipes 的情况下工作,但我想做的是创建一个任务,该任务将使用 [=12= 在我的 index.html 页面中接收脚本文件].然后 gulpif
JS lint
、uglify
/concatenate 和 notify
。我得到一个"Error: Invalid call to lazypipe()..",我正在看这个posthttps://github.com/OverZealous/lazypipe/issues/19,但我有点菜鸟,不明白error/how来修复它"pipe(foo) vs. pipe(foo())". 如果有人能告诉我我是如何使用 lazypipe 的错误 = 我应该很好。
grunt 文件更大,我正在使用 gulpif bc css 一旦它起作用,我也会使用它。如果有更好的方法让我知道,谢谢。
正在使用的插件:
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中的所有函数调用都不能使用()!所以如果你有 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));
});
就像您在自己的回答中指出的那样,当您使用 lazypipe
进行管道传输时,您需要使用流工厂本身(而不是结果)。对于不使用参数的工厂,这就像删除 ()
一样简单,对于需要参数的工厂,您可以使用箭头函数来创建这样的工厂:
var jsTask = lazypipe()
.pipe(jshint)
.pipe(() => jshint.reporter('jshint-stylish'))
.pipe(() => notify('JS Linting finished'))
.pipe(uglify)
.pipe(() => notify('JS Compressing finished'));
也可以使用 bind()
创建这样的工厂,但上面的方法更简单,因为您无需担心调用上下文。