css - 如何以正确的方式配置这个 gulpfile 以获得良好的工作流程

Question

我是 jekyll、sass 等的新手，我正在尝试以正确的方式配置 gulfile。我正在使用 shakyShane jekyll-gulp-sass-browser-sync我想要做的是合并 gulp-minify-css、gulp-minify-html、gulp-imagemin。我做了一些事情，但问题是 minify-css 首先运行那个 sass 任务，速度也很慢。我不知道如何解决它。我读了minify-css的配置但仍然。我不能让它工作。

我的gulp文件是

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var prefix      = require('gulp-autoprefixer');
var cp          = require('child_process');

var minifyCss = require('gulp-minify-css');
var minifyHTML = require('gulp-minify-html');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var jpegtran = require('imagemin-jpegtran');
var gifsicle = require('imagemin-gifsicle');
var replace = require('gulp-replace');

var messages = {
    jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};

/**
 * Build the Jekyll Site
 */
gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll.bat', ['build'], {stdio: 'inherit'}).on('close', done);

});

/**
 * Rebuild Jekyll & do page reload
 */
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
    browserSync.reload();
});

/**
 * Wait for jekyll-build, then launch the Server
 */
gulp.task('browser-sync', ['sass', 'jekyll-build'], function() {
    browserSync.init({
        server: {
            baseDir: '_site'

        }
    });
});

/**
 * Compile files from _sass into both _site/css (for live injecting) and site (for future jekyll builds)
 */
gulp.task('sass', function () {
     return gulp.src('assets/css/main.sass')
        .pipe(sass({
            includePaths: ['sass'],
            onError: browserSync.notify
        }))
        .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
        .pipe(gulp.dest('_site/assets/css'))
        .pipe(browserSync.reload({stream:true}))
        .pipe(gulp.dest('assets/css'));
});
gulp.task('minify-css', function() {
  return gulp.src('assets/css/*.css')
    .pipe(minifyCss({compatibility: 'ie8'}))
    .pipe(gulp.dest('assets/css/'));
});
/**
 * Watch sass files for changes & recompile
 * Watch html/md files, run jekyll & reload BrowserSync
 */
gulp.task('watch', function () {
    gulp.watch('assets/css/**', ['sass']);
    gulp.watch('assets/js/**' ['jekyll-rebuild']);
    gulp.watch(['*.html', '_layouts/*.html','_includes/*.html', '_posts/*'], ['jekyll-rebuild']);
});

gulp.task('optimize-images', function () {
    return gulp.src(['_site/**/*.jpg', '_site/**/*.jpeg', '_site/**/*.gif', '_site/**/*.png'])
        .pipe(imagemin({
            progressive: false,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant(), jpegtran(), gifsicle()]
        }))
        .pipe(gulp.dest('_site/'));
});

gulp.task('optimize-html', function() {
    return gulp.src('_site/**/*.html')
        .pipe(minifyHTML({
            quotes: true
        }))
        .pipe(replace(/<link href=\"\/assets\/css\/main.css\"[^>]*>/, function(s) {
            var style = fs.readFileSync('_site/assets/css/main.css', 'utf8');
            return '<style>\n' + style + '\n</style>';
        }))
        .pipe(gulp.dest('_site/'));
});

/**
 * Default task, running just `gulp` will compile the sass,
 * compile the jekyll site, launch BrowserSync & watch files.
 */
gulp.task('default', ['optimize-images','optimize-html','browser-sync', 'watch','minify-css']);

我运行 gulp 的结果是

    $ gulp
[20:15:41] Using gulpfile c:\Users\user\desktop\folder\gulpfile.js
[20:15:41] Starting 'optimize-images'...
[20:15:41] Starting 'optimize-html'...
[20:15:41] Starting 'sass'...
[20:15:41] Starting 'jekyll-build'...
[20:15:41] Starting 'watch'...
[20:15:41] Finished 'watch' after 80 ms
[20:15:41] Starting 'minify-css'...
[20:15:42] Finished 'minify-css' after 608 ms
[20:15:42] Finished 'sass' after 750 ms
[20:15:43] Finished 'optimize-html' after 2.14 s
Configuration file: c:/Users/user/desktop/folder/_config.yml
            Source: c:/Users/user/desktop/folder
       Destination: c:/Users/user/desktop/folder/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 32.875 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[20:16:17] Finished 'jekyll-build' after 36 s
[20:16:17] Starting 'browser-sync'...
[20:16:17] Finished 'browser-sync' after 151 ms
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.56.1:3000
 -------------------------------------
[BS] Serving files from: _site
[20:16:30] gulp-imagemin: Minified 41 images (saved 7.44 MB - 43.3%)
[20:16:30] Finished 'optimize-images' after 49 s
[20:16:30] Starting 'default'...
[20:16:30] Finished 'default' after 7.41 μs

Answer 1

为了在 sass 之后运行 minify-css，您必须指定 dependency .

gulp.task('minify-css', ['sass'], function() {...

表示 minify-css 依赖于 sass 完成。

关于 sass perf，您的自动前缀使用量很大，因此，完成需要时间是正常的。看看文档 here和 here .

来自:

.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))

您可以提高效率:

.pipe(prefix(['> 1%'], { cascade: false }))