0

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

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

4

1 回答 1

2

您正在将 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'))
})
于 2016-06-09T09:25:05.560 回答