CSS 축소 후 Gulp 동기 인라이닝 CSS

Question

Gulp로 축소 된 CSS를 인라인하는 데 문제가 있습니다. 여기

내 gulpfile.js입니다 :

var gulp = require('gulp'), 
    runSequence = require('run-sequence'), 
    $ = require('gulp-load-plugins')(), 
    browserSync = require('browser-sync'), 
    del = require('del'); 

gulp.task('clean', function(){ 
    del(['build/**']) 
}); 

/* Minifying CSS */ 
gulp.task('css', function(){ 
    gulp.src('./css/*.css') 
    .pipe($.minifyCss()) 
    .pipe(gulp.dest('./build/css')) 
    .pipe(browserSync.reload({stream: true})); 

    gulp.src('./views/css/*.css') 
    .pipe($.minifyCss()) 
    .pipe(gulp.dest('./build/views/css')) 
    .pipe(browserSync.reload({stream: true})); 
}); 

/* Inline CSS and Minify HTML */ 
gulp.task('inline-and-minify', function(){ 
    gulp.src('./*.html') 
    .pipe($.smoosher({ 
     base: './build' 
    })) 
    .pipe($.minifyHtml()) 
    .pipe(gulp.dest('./build')) 
    .pipe(browserSync.reload({stream: true})); 

    gulp.src('./views/*.html') 
    .pipe($.smoosher({ 
     base: './build/views' 
    })) 
    .pipe($.minifyHtml()) 
    .pipe(gulp.dest('./build/views')) 
    .pipe(browserSync.reload({stream: true})) 
}); 

/* Task Bundles, runs tasks one after the other (instead of in parallel) */ 
gulp.task('build-html', function(callback){ 
    runSequence('clean', 'css', 'inline-and-minify'); 
}); 

gulp.task('default', ['build-html']); 

내가 얻을 다음과 같은 출력 : 시간 inline-에 의해 폐쇄되지 축소 된 된 CSS 파일처럼 나에게 보이는

events.js:72 
     throw er; // Unhandled 'error' event 
      ^
Error: ENOENT, open 'build/css/style.css' 

and-minify 작업이 실행됩니다.

gulp.task('build-html', function(callback){ 
    runSequence('clean', 'css'); 

    setTimeout(function(){ 
    gulp.run('inline-and-minify'); 
    }, 2000); 
}); 

이 조금 어설픈 보인다 플러스 gulp.run가되지 않습니다 :

내가 작업하고 그 사이에 약 2 초 타임 아웃을 포함하여이 시도는 문제를 해결하기 위해 보인다. 그것을하는 더 좋은 방법이 있습니까?

Answer 1

작업이 완료되었음을 알리기 위해 gulp (으)로 다시 전화해야합니다. 스트림을 반환하여이 작업을 수행하거나 작업 함수에서 콜백 인수를 전달하여 호출 할 수 있습니다. 전 접근 방식을 권장합니다. 덤프 작업에 여러 스트림이 있으므로 merge-stream을 사용하십시오.

var gulp = require('gulp'), 
    runSequence = require('run-sequence'), 
    $ = require('gulp-load-plugins')(), 
    browserSync = require('browser-sync'), 
    merge = require('merge-stream'), 
    del = require('del'); 

gulp.task('clean', function(cb) { 
    del(['build/**'], cb); 
}); 

/* Minifying CSS */ 
gulp.task('css', function() { 
    var css1 = gulp.src('./css/*.css') 
    .pipe($.minifyCss()) 
    .pipe(gulp.dest('./build/css')) 
    .pipe(browserSync.reload({stream: true})); 

    var css2 = gulp.src('./views/css/*.css') 
    .pipe($.minifyCss()) 
    .pipe(gulp.dest('./build/views/css')) 
    .pipe(browserSync.reload({stream: true})); 

    return merge(css1, css2); 
}); 

/* Inline CSS and Minify HTML */ 
gulp.task('inline-and-minify', function() { 
    var html1 = gulp.src('./*.html') 
    .pipe($.smoosher({ 
     base: './build' 
    })) 
    .pipe($.minifyHtml()) 
    .pipe(gulp.dest('./build')) 
    .pipe(browserSync.reload({stream: true})); 

    var html2 = gulp.src('./views/*.html') 
    .pipe($.smoosher({ 
     base: './build/views' 
    })) 
    .pipe($.minifyHtml()) 
    .pipe(gulp.dest('./build/views')) 
    .pipe(browserSync.reload({stream: true})); 

    return merge(html1, html2); 
}); 

/* Task Bundles, runs tasks one after the other (instead of in parallel) */ 
gulp.task('build-html', function(callback) { 
    runSequence('clean', 'css', 'inline-and-minify'); 
}); 

gulp.task('default', ['build-html']);