使用gulp-jade和gulp-useref時，css和JS文件不會縮小和連接

Question

我是gulp的新手，正在嘗試合並和縮小JS和CSS文件。 我在用翡翠。

gulpfile.js

gulp.task('jade2html', function() {
  return gulp.src('app/*.jade')
    .pipe(jade({pretty: true}))
    .pipe(gulp.dest('dist'));
})

gulp.task('useref', function() {
  return gulp.src('app/*.jade')
    .pipe(useref())
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(gulp.dest('dist'))
})

玉器

// build:css css/style.min.css
link(rel='stylesheet', href='/css/style.css')
link(rel='stylesheet', href='/css/print.css')
// endbuild

// build:js js/main.min.js
script(src='js/lib/a-library.js')
script(src='js/lib/another-lib.js')
script(src='js/main.js')
// endbuild

當我運行任務useref ，然后檢查main.min.js或style.min.css文件是否為空。 所以，我缺少一些步驟嗎？ （當我不使用Jade且僅使用HTML時，一切正常。）

Answer 1

您正在將Jade模板useref()到useref() 。 但是gulp-useref不知道如何解析Jade。 它只知道HTML。

這意味着您需要先將 Jade模板編譯為HTML， 然后再將它們傳遞給useref() 。 像您要嘗試的那樣，在單獨的任務jade2html執行此操作實際上無效（至少不是您執行該操作的方式）。 此外，您實際上只需要一項任務即可開始：

gulp.task('useref', function() {
  return gulp.src('app/*.jade')
   .pipe(jade({pretty: true}))
   .pipe(useref())
   .pipe(gulpIf('*.js', uglify()))
   .pipe(gulpIf('*.css', cssnano()))
   .pipe(gulp.dest('dist'))
})