Question

我是gulp的新手，我正在尝试连接和缩小我的JS和CSS文件。我正在使用Jade。

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

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

1 个答案: