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

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

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

Answer 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'))
})

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

Css and JS files doesn't minify and concatenate when use gulp-jade and gulp-useref

javascript

node.js

gulp

gulp-useref

pug