Условные настройки для плагинов Gulp зависят от исходного файла - PullRequest
Новая
       30

Условные настройки для плагинов Gulp зависят от исходного файла

2 голосов
/ 20 апреля 2020

Плагин gulp-pug позволяет передавать глобальные переменные в файлы pug через свойство data. Что если нам не нужен полный набор данных в каждом файле .pug? Чтобы реализовать ввод условных данных, нам нужно получить доступ к текущему vinyl экземпляру файла внутри pipe(this.gulpPlugins.pug({}) или хотя бы узнать абсолютный путь к исходному файлу. Возможно? 

const dataSetForTopPage = {
    foo: "alpha",
    bar: "bravo"
};

const dataSetForAboutPage = {
    baz: "charlie",
    hoge: "delta"
};


gulp.src(sourceFileGlobsOrAbsolutePath)
    .pipe(gulpPlugins.pug({
      data: /* 
       if path is 'top.pug' -> 'dataSetForTopPage',  
       else if path is 'about.pug' -> 'dataSetForAboutPage'
       else -> empty object*/
    }))
    .pipe(Gulp.dest("output"));

Я использую плагин gulp-intercept . Но как синхронизировать его с gulpPlugins.pug? 

gulp.src(sourceFileGlobsOrAbsolutePath)
    .pipe(this.gulpPlugins.intercept(vinylFile => {
      // I can compute conditional data set here
      // but how to execute gulpPlugins.pug() here?
    }))
    // ...

Это был только один пример, но мы столкнемся с той же проблемой, когда понадобятся условия условных плагинов для других плагинов gulp. Например: 

.pipe(gulpPlugins.htmlPrettify({ 
  indent_char: " ", 
  indent_size: // if source file in 'admin/**' -> 2, else if in 'auth/**' -> 3 else 4
}))

1 Ответ

3 голосов
/ 28 апреля 2020

Вам потребуется изменить поток вручную - вероятно, наиболее используемый пакет для этой цели - через2 . Оказавшись в обратном вызове through2, вы можете передать поток своим плагинам gulp (при условии, что их функции преобразования доступны) и условно передать им параметры. Например, вот задача: 

pugtest = () => {
    const dataSet = {
        'top.pug': {
            foo: "alpha",
            bar: "bravo"
        },
        'about.pug': {
            foo: "charlie",
            bar: "delta"
        }
    };

    return gulp.src('src/**/*.pug')
        .pipe(through2.obj((file, enc, next) => 
            gulpPlugins.pug({
                // Grab the filename, and set pug data to the value found in dataSet by that name
                data: dataSet[file.basename] || {}
            })._transform(file, enc, next)
        ))
        .pipe(through2.obj((file, enc, next) => {
            const options = {
                indent_char: ' ',
                indent_size: 4
            };

            if(file.relative.match(/admin\//)) {
                options.indent_size = 2;
            } else if(file.relative.match(/auth\//)) {
                options.indent_size = 3;
            }

            file.contents = new Buffer.from(html.prettyPrint(String(file.contents), options), enc);
            next(null, file);
        }))
        .pipe(gulp.dest('output'));
}

Для шага pug мы вызываем through2.obj и создаем плагин pug, передавая ему данные, извлеченные из литерала нашего объекта, проиндексированного по имени файла в этом примере. Итак, теперь данные, передаваемые в компилятор, поступают из этого литерала объекта.

Для упомянутого вами шага html gulp- html -prettify не предоставляет свою функцию преобразования, поэтому мы не можем добраться до него и передать преобразование обратно в поток. Но в этом случае все нормально, если вы посмотрите на источник, это просто оболочка для prettyPrint в пакете html. Это буквально все, что он делает. Таким образом, мы можем просто ускорить наш шаг, используя through2, чтобы сделать то же самое, но изменив наши параметры на основе относительного пути винилового файла.

Вот и все! Рабочий пример см. В этом репо: https://github.com/joshdavenport/stack-overflow-61314141-gulp-pug-conditional

...