Css-und JS-Dateien nicht Minify und Verkettung, wenn Verwendung gulp-jade und gulp-useref

Question

Ich bin neu mit Schluck und ich versuche zu verketten und zu minimieren meine JS und CSS-Dateien. Ich benutze 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 

Als ich betreibe meine Aufgabe useref und dann lese ich meine main.min.js oder style.min.css die Dateien leer sind. Also, ich vermisse einen Schritt? (Wenn ich Jade nicht verwende und nur HTML benutze funktioniert alles gut).

Answer 1

Sie leiten Jade-Vorlagen in useref(). Jedoch hat gulp-useref keine Ahnung, wie Jade zu analysieren ist. Es kennt nur HTML.

Das bedeutet, dass Sie Ihre Jade-Vorlagen zu HTML vor kompilieren müssen Sie sie an useref(). Tun Sie es in einer separaten Aufgabe jade2html wie Sie versuchen, nicht wirklich funktioniert (zumindest nicht die Art, wie Sie es tun). Außerdem braucht man nur eine einzige Aufgabe:

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