从另一个任务中获取Gulp源码

Question

我现在正在使用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'))
});

- Peter Briers

---

不要忘记在 gulp.src 前面加上 return，例如 return gulp.src(...)，这样任务就会返回一个承诺，在任务完成时得到履行。 - RustyToms

Answer 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'));
});

- Ben

---

这个答案已经过时且不正确，请查看我的答案，我使用了{passthrough: true}和gulp.src。 - Bjorn

Answer 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'))
});

不幸的是，似乎存在某种错误，它无法处理某些通配符，可以查看此处提到的问题：here 和 here。希望他们能尽快解决这个问题。这阻止了我在我的项目中使用它，但在你的项目中，你只需要添加一个文件，所以试一试，也许它会起作用。

如果它不起作用，请尝试使用merge-stream：https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

编辑以包括由Bjorn Tipling提到的gulp.src传递选项

- RustyToms

---

不错的解决方案，给你点赞。你能否澄清一下这个评论：“在之后执行concat操作”，有点不太理解……是指“在Ember之后执行”，还是“确保在将新源连接到管道之前进行concat操作”？如果很明显我就道歉了，我只是想确保我理解得正确。 - mhulse

@mhulse，我不知道，你得问一下原帖作者。我自己也对那个感到困惑。我只是从原帖作者的代码中复制了过来。我会编辑我的回答，删除那个评论，因为它与这个解决方案无关。 - RustyToms

抱歉！我的错！我直到现在才看到。感谢您的澄清和回答。 :) - mhulse

这个答案是不正确的，你需要在 gulp.src 的第二个参数中加入 { passthrough: true }，如果你需要示例，请查看下面我的回答。 - Bjorn

Answer 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 }))

这些细节对于问题来说并不重要，但是如果存在困惑的话，我将把通过SASS构建的CSS文件作为任务的一部分，并与由webpack（从vue文件中提取）构建的SASS文件进行合并。我的tasks和paths变量是我不使用硬编码字符串（大多数情况下）的方式。

请注意，我使用了gulp 4.0，但我认为这并不重要，passthrough在2015年加入了主干分支。

- Bjorn

---

使用 gulp 3 对我没有效果，因为它依赖于旧版本的 vinyl-fs。我不得不运行 npm install --save-dev vinyl-fs 命令，并将 gulp.src 替换为 require('vinyl-fs').src。 - alarive