Question

我的第一天与gulp一起 - 我试图使用gulp-inject将一些脚本文件和jade文件转换为app文件夹中存在的html文件，并将其放入＆＃39; temp＆＃39;使用webserver来提供html的文件夹。如果我只是使用静态html，我可以做好这项工作，但是当我切换到玉器时，它只能在我第一次运行gulp之后工作（我猜是因为它仍在处理gulp-jade＆jade玉石（）＆＃39;第一次通过所以没有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));
});

Answer 1

您应该将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));
});

这样，只有在玉器任务完成后，您的脚本任务才会运行并注入。

gulp-jul吞下gulp-jade

1 个答案: