gulp-注入 gulp-jade

Question

这是我与 gulp 的第一天 - 我正在尝试使用 gulp-inject 将应用程序文件夹中存在的一些脚本文件和 jade 文件转换为 html 到'temp' 文件夹正在使用网络服务器为 html 提供服务。如果我只使用 static html 我可以让这个工作正常，但是当我切换到 jade 它只在第一次我运行 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));
});

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

这样你的脚本任务只会运行并在 jade 任务完成后注入。

gulp-注入 gulp-jade

gulp-inject with gulp-jade

node.js

gulp

gulp-inject