Css and JS files doesn't minify and concatenate when use gulp-jade and gulp-useref

Question

I'm new with gulp and I'm trying to concatenate and minify my JS and CSS files. I'm using 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

When I run my task useref and then I check my main.min.js or style.min.css the files are empty. So, I'm missing some step? (When I don't use Jade and use just HTML everything works well).

Answer 1

You're piping Jade templates into useref(). However gulp-useref has no clue how to parse Jade. It only knows HTML.

That means you need to compile your Jade templates to HTML before you pipe them to useref(). Doing it in a separate task jade2html like you're trying to doesn't really work (at least not the way you're doing it). Besides you only really need one task to begin with:

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