Jekyll 使用 Gulp 清除构建文件夹答案

【问题标题】：Jekyll clear build folder with GulpJekyll 使用 Gulp 清除构建文件夹
【发布时间】：2017-05-03 21:27:17
【问题描述】：

我正在使用 Jekyll + Gulp 的构建环境。因此，使用下面的gulpfile.js，构建过程首先生成一个dist/css 文件夹，其中包含已编译的css，然后清除整个dist 文件夹以将jekyll build 结果放入其中。所以，我无法编译 dist 文件夹中的 scss 文件，因为每次 jekyll 都会完全清除它。

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var child       = require('child_process');


gulp.task('jekyll', function (done) {
    return child.spawn('jekyll' , ['build']).on('close', done);
});

gulp.task('jekyll-rebuild', ['jekyll'], function () {
    browserSync.reload();
});

gulp.task('browser-sync', ['sass', 'jekyll'], function() {
    browserSync({
        server: {
            baseDir: 'dist'
        }
    });
});

gulp.task('sass', function () {
    return gulp.src('src/_sass/theme.scss')
        .pipe(sass({
            includePaths: ['scss'],
            onError: browserSync.notify
        }))
        .pipe(browserSync.reload({stream:true}))
        .pipe(gulp.dest('dist/css'));
});

gulp.task('watch', function () {
    gulp.watch('src/_sass/*.scss', ['sass']);
    gulp.watch(['src/*.html', 'src/_layouts/*.html', 'src/_includes/*'], ['jekyll-rebuild']);
});

gulp.task('default', ['browser-sync', 'watch']);

【问题讨论】：

Jekyll 可以原生编译 sass，为什么要使用 gulp？
我不只是将它用于 sass

标签： gulp jekyll

【解决方案1】：

我必须避免与styles 和scripts 并行运行jekyll 任务，所以我使用了runSequence。

gulp.task('build', () => {
    runSequence('jekyll', ['styles', 'scripts']);
});

gulp.task('default', ['build', 'browser-sync', 'watch']);

【讨论】：

【解决方案2】：

在您的 Jekyll 配置中，您需要声明要保留哪些文件夹：

keep_files: [ css, build ]

在破坏站点目标时，保留选定的文件。对于不是由 jekyll 生成的文件很有用；例如由您的构建工具生成的文件或资产。路径是相对于目的地的。

https://jekyllrb.com/docs/configuration/

【讨论】：