Как использовать несколько Pipes с gulp-if и lazypipe?
У меня есть файл Grunt, который работает без использования gulpif и lazypipes, но я пытаюсь создать задачу, которая будет принимать файлы сценариев на моей странице index.html, используя useref
, затем gulpif
JS lint
, uglify
/ объединить и notify
, Я получаю сообщение "Ошибка: Неверный вызов lazypipe()..", и я просматривал этот пост https://github.com/OverZealous/lazypipe/issues/19, но я немного зелен и не понимаю ошибка / как это исправить "труба (foo) против трубы (foo())". Если кто-то может сказать мне, как я использую лентяй неправильно = я должен быть хорошим.
Файл 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));
});
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));
});
Как вы указали в своем собственном ответе, вам нужно использовать сами потоковые фабрики (вместо результата), когда вы подключаетесь к
lazypipe
. Для фабрик, которые не используют параметр, это так же просто, как удаление
()
, а для фабрик, которым требуются параметры, вы можете использовать стрелочные функции для создания таких фабрик:
var jsTask = lazypipe()
.pipe(jshint)
.pipe(() => jshint.reporter('jshint-stylish'))
.pipe(() => notify('JS Linting finished'))
.pipe(uglify)
.pipe(() => notify('JS Compressing finished'));
Также можно создавать такие фабрики, используя
bind()
, но описанный выше подход проще, так как вам не нужно беспокоиться о контексте вызова.