javascript - Gulp-inject 说 "Nothing to inject into index.html"

Question

我试图在我的索引中注入(inject)一些文件，所有这些文件都连接并缩小到一个 .tmp 文件夹中，如下所示:

gulp.task('prep-js',['clean'], function(){
  var jspath = './src/page/**/*.js';
  var treatJs = gulp.src(jspath)
         .pipe(plugins.concat('scripts.js'))
         .pipe(plugins.uglify())
         .pipe(gulp.dest('.tmp/page/js'))
});

但是当我运行注入(inject)任务时，它显示“没有任何东西可以注入(inject)到 index.html 中”。这是代码:

gulp.task('inject-deps', ['prep-css', 'prep-js'], function(){

  //select main bower files
  var bowerDep = gulp.src(plugins.mainBowerFiles(), {read: false});

  //inject files
  return  gulp.src('./src/page/index.html')
          .pipe(plugins.inject(bowerDep, {relative: true, name:'bower'}))
          .pipe(plugins.inject(gulp.src('.tmp/page/js/*.js'), {name:'frontjs'}))
          .pipe(plugins.inject(gulp.src('.tmp/page/css/*.css'), {name:'frontcss'}))
          .pipe(gulp.dest('.tmp/page'));
});

有趣的是，注入(inject)主要 Bower 文件的第一个管道工作得很好，但在接下来的两个管道中却没有发生。

此外，仅供引用，“插件”是一个需要我的插件的变量。

对这个问题有什么想法吗？

Answer 1

您需要在您的 prep-js 任务中返回流:

gulp.task('prep-js',['clean'], function(){
  var jspath = './src/page/**/*.js';
  return gulp.src(jspath)
         .pipe(plugins.concat('scripts.js'))
         .pipe(plugins.uglify())
         .pipe(gulp.dest('.tmp/page/js'))
});

否则 inject-deps 不会等待 prep-js 完成后才运行，这意味着连接和丑化的 JS 文件不会在 .tmp 中/page/js 还没有。

Gulp documentation 的相关部分:

Note: By default, tasks run with maximum concurrency -- e.g. it launches all the tasks at once and waits for nothing. If you want to create a series where tasks run in a particular order, you need to do two things:

• give it a hint to tell it when the task is done,
• and give it a hint that a task depends on completion of another.