0

这是我使用 gulp 的第一天 - 我尝试使用 gulp-inject 将一些脚本文件和转换为 html 的玉文件放入 app 文件夹中的“temp”文件夹中，该文件夹使用 webserver 来提供 html。如果我只是使用静态 html，我可以使这项工作正常，但是当我切换到玉时，它只能在我第一次运行 gulp 之后工作（我猜是因为它仍在处理 gulp-jade 'jade()' 第一个时间过去了，所以没有要注入的 html - 所以我有这段代码（当然，我已经完成了教程的一半，所以这甚至可能不是使用 gulp 的正确方法，但教程没有使用我更喜欢的翡翠）

var gulp = require('gulp');
var server = require('gulp-webserver');
var jade = require('gulp-jade');
var inject = require('gulp-inject');

var paths = {
  app: 'app/**/*.js',
  bower: 'bower_components',
  jade: 'app/*.jade',
  temp: 'temp',
  tempVendor: 'temp/vendor',
  index: 'temp/index.html'
}

gulp.task('default', ['scripts']);


gulp.task('scripts', function(){
  gulp.src(paths.jade)
    .pipe(jade())
    .pipe(gulp.dest(paths.temp));

var appFiles = gulp.src(paths.app).pipe(gulp.dest(paths.temp));
var vendor = gulp.src(mainBower()).pipe(gulp.dest(paths.tempVendor));

gulp.src(paths.index)
  .pipe(inject(appFiles,{relative:true}))
  .pipe(inject(vendor, {relative:true, name: 'vendorinject'}))
  .pipe(gulp.dest(paths.temp));
});
4

1 回答 1

0

您应该将 gulp 任务拆分为 2 个任务，并使用 gulp 依赖项来确保其中 1 个任务在其他任务开始之前运行和完成。

var gulp = require('gulp');
var server = require('gulp-webserver');
var jade = require('gulp-jade');
var inject = require('gulp-inject');

var paths = {
  app: 'app/**/*.js',
  bower: 'bower_components',
  jade: 'app/*.jade',
  temp: 'temp',
  tempVendor: 'temp/vendor',
  index: 'temp/index.html'
}

gulp.task('default', ['scripts']);

gulp.task('jade', function() {
    return gulp.src(paths.jade)
    .pipe(jade())
    .pipe(gulp.dest(paths.temp));
});

gulp.task('scripts', ['jade'], function(){ 
    var appFiles = gulp.src(paths.app).pipe(gulp.dest(paths.temp));
    var vendor = gulp.src(mainBower()).pipe(gulp.dest(paths.tempVendor));

    gulp.src(paths.index)
      .pipe(inject(scripts,{relative:true}))
      .pipe(inject(vendor, {relative:true, name: 'vendorinject'}))
      .pipe(gulp.dest(paths.temp));
});

这样，您的脚本任务将仅在翡翠任务完成后运行和注入。

于 2015-05-05T17:30:48.030 回答