我是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时,一切运行良好)。
答案 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'))
})