使用 gulp-jade 和 gulp-useref 时，Css 和 JS 文件不会缩小和连接答案

【问题标题】：Css and JS files doesn't minify and concatenate when use gulp-jade and gulp-useref使用 gulp-jade 和 gulp-useref 时，Css 和 JS 文件不会缩小和连接
【发布时间】：2016-06-09 05:33:12
【问题描述】：

我是 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'))
})

index.jade

// 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 时，一切正常）。

【问题讨论】：

标签： javascript node.js gulp pug gulp-useref

【解决方案1】：

您正在将 Jade 模板导入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'))
})

【讨论】：