Файлы Css и JS не минимизируются и не объединяются при использовании gulp-jade и gulp-useref.

Я новичок в 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, все работает хорошо).


node.js javascript gulp pug gulp-useref
person Isaac    schedule 09.06.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы загружаете шаблоны Jade в useref(). Однако gulp-useref понятия не имеет, как анализировать Джейд. Он знает только 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'))
})
person Sven Schoenung    schedule 09.06.2016