Источник Gulp из другой задачи

ProgramBox

Источник Gulp из другой задачи

Post author:admin
Запись опубликована:21 марта, 2023
Post category:Вопросы по программированию

#gulp

Вопрос:

Прямо сейчас я создаю временный файл в Gulp, который предварительно компилирует мои шаблоны. После этого я уродую и объединяю их в один файл javascript. Но я бы предпочел не иметь временных файлов. Есть ли способ иметь «динамические» источники в Gulp? Я попытался объединить потоки, но безрезультатно.

Пример кода:

 gulp.task('template', function () {
  gulp.src('./src/tpl/*.hbs')
    .pipe(ember())
    .pipe(concat('tpl.js')) // make sure to only do concat after
    .pipe(gulp.dest('tmp'));
});

gulp.task('uglify', ['template'], function() {
  gulp.src(['./tmp/tpl.js', './src/js/app.js'])
    .pipe(uglify())
    .pipe(concat('epg.js'))
    .pipe(gulp.dest('dist'))
});

Ответ №1:

Задачи нельзя напрямую передавать в другие задачи, но вы можете использовать event-stream для объединения потоков:

 var es = require('event-stream');
function template() {
  return gulp.src('./src/tpl/*.hbs')
    .pipe(ember());
}

function appjs() {
  return gulp.src(['./src/js/app.js']);
}

gulp.task('uglify', function() {
  return es.merge(template(), appjs())
    .pipe(uglify())
    .pipe(concat('epg.js'))
    .pipe(gulp.dest('dist'));
});

Ответ №2:

Таким образом, теоретически вы должны быть в состоянии сделать это с помощью gulp версии 3.8.0 или выше. Вот список изменений с примером функции.

Из журнала изменений:

gulp.src теперь доступен для записи, это означает, что вы можете использовать его для добавления файлов в свой конвейер в любой момент

Итак, ваша задача может быть такой:

 gulp.task('template', function () {
  return gulp.src('./src/tpl/*.hbs')
    .pipe(ember())
    .pipe(concat('tpl.js'))
    .pipe(gulp.src('./src/js/app.js', { passthrough: true }))
    .pipe(uglify())
    .pipe(concat('epg.js'))
    .pipe(gulp.dest('dist'))
});

К сожалению, похоже, что есть какая-то ошибка, из-за которой возникают проблемы с обработкой определенных глобусов, см. Проблемы, упомянутые здесь и здесь . Надеюсь, они скоро это решат. Это мешает мне использовать это в моем проекте, но в вашем вы добавляете только один файл, так что попробуйте, и, возможно, это сработает.

~~Если это не сработает, попробуйте использовать merge-stream https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md~~

Отредактировано, чтобы включить сквозную опцию в gulp.src, упомянутую Бьорном Типлингом

1. Хорошее решение. 1. Не могли бы вы уточнить этот комментарий: «убедитесь, что вы выполняете concat только после». Вроде как не имеет смысла … Означает ли это «после Ember» или «убедитесь, что вы объединили, прежде чем передавать новый источник»? Извините, если это очевидно, я просто хочу убедиться, что понимаю.

2. @mhulse, я понятия не имею, вам нужно спросить OP. Я сам был в замешательстве по этому поводу. Я только что скопировал из кода OP. Я отредактирую свой ответ, чтобы удалить этот комментарий, потому что он не связан с этим решением.

3. Дох! Мой плохой! Я не видел этого до сих пор. Спасибо за разъяснение и за ответ. 🙂

4. Этот ответ неверен, вам нужно { passthrough: true } в качестве второго аргумента gulp.src , пожалуйста, смотрите Мой ответ ниже, если вам нужен пример.

Ответ №3:

Для тех, кто все еще сталкивается с этой проблемой, вы можете полностью использовать gulp.src для добавления дополнительных файлов в средний поток задачи. Вам просто нужно добавить { passthrough: true } в качестве опции. Вот рабочий пример:

 gulp.task(tasks.SASS, () => {
  return gulp.src(paths.css.src)
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.src([ paths.css.vueStyles ], { passthrough: true }))
    .pipe(concat('styles.css'))
    .pipe(gulp.dest(paths.css.dest))

Единственная строка, которая имеет значение для этого вопроса:

     .pipe(gulp.src([ paths.css.vueStyles ], { passthrough: true }))

Эти детали не нужны для вопроса, но на случай путаницы я беру CSS-файлы, созданные с помощью SASS, как часть задачи, а затем объединяю их с файлами SASS, созданными webpack (извлеченными из файлов vue) в отдельной задаче. Мои tasks и paths переменные — это то, что я не использую жестко закодированные строки (большую часть времени).

Обратите внимание, я использовал gulp 4.0, но я не думаю, что это имеет значение, passthrough был добавлен в master в 2015 году