Как использовать несколько 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(), но описанный выше подход проще, так как вам не нужно беспокоиться о контексте вызова.

Другие вопросы по тегам