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

时间:2016-06-09 05:33:12

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

我是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.jsstyle.min.css时,文件为空。那么,我错过了一些步骤? (当我不使用Jade并仅使用HTML时,一切运行良好)。

1 个答案:

答案 0 :(得分: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'))
})