Question

我有一个Jekyll网站，该网站使用Gulp编译Jekyll文件以及其他任务，例如编译我的sass，js文件和运行Browsersync。我正在迁移到Gulp 4.0，因此一直在更新gulpfile.js以反映这一点……但是，当我在命令行中运行“ gulp”并更新Jekyll文件时，构建现在会无限循环。这仅在更新Jekyll文件或js文件时发生，而在更新sass文件时则不会发生。这是我的代码：

    var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    sass = require('gulp-sass'),
    babel = require('gulp-babel'),
    autoprefixer = require('gulp-autoprefixer'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    svgmin = require('gulp-svgmin'),
    sourcemaps = require('gulp-sourcemaps'),
    cp = require('child_process'),
    jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll';



// =======================================================================
// Browser Sync
// =======================================================================

gulp.task('browser-sync', function(done)
{
    browserSync.init({
        server: {
             baseDir: "_site"
        },
        port: 3004,
        open: false
    });

    done();
});

gulp.task('browser-sync-reload', function(done)
{
    browserSync.reload();
    done();
});



// =======================================================================
// SASS
// =======================================================================

var sassOptions = {
    includePaths: ['scss'],
    errLogToConsole: true,
    outputStyle: 'compressed',
    //sourceComments: 'map'
};

//Auto prefixer options
var autoPrefixerOptions = {
    browsers: ['last 15 versions', '> 1%', 'ie 8', 'ie 7']
};

var styleInput = [
    '_sass/**/_*.scss',
    '_sass/site.scss'
];

gulp.task('sass-style', function()
{
    return gulp.src(styleInput)
        .pipe(sass(sassOptions).on('error', sass.logError))
        .pipe(autoprefixer(autoPrefixerOptions, { cascade: true }))
        .pipe(rename('styles.css'))
        .pipe(gulp.dest('_site/css'))
        .pipe(gulp.dest('css'))
        .pipe(browserSync.stream());
});



// =======================================================================
// JS
// =======================================================================

var jsInput = [
    'js/libs/**/*.js',
    'js/site.js'
];

//Compile js to older browser compatible output
gulp.task('babel-js-min', function() {
    return gulp.src(jsInput)
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(concat('site.js'))
        .pipe(uglify())
        .pipe(rename('scripts.min.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('_site/js/dist'))
        .pipe(gulp.dest('js/dist'))
        .pipe(browserSync.stream());
});

//Compile js to older browser compatible output
gulp.task('babel-js', function() {
    return gulp.src(jsInput)
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(concat('site.js'))
        .pipe(rename('scripts.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('_site/js/dist'))
        .pipe(gulp.dest('js/dist'))
        .pipe(browserSync.stream());
});



// =======================================================================
// SVGs
// =======================================================================

function onError(error)
{
    console.log(error);
    this.emit('end');
}

var svgInput = [
    '_includes/svgs/src/**/*'
];

gulp.task('svgmin', function()
{
    return gulp.src(svgInput)
        .pipe(svgmin())
        .on('error', onError)
        .pipe(gulp.dest('./_includes/svgs/dist'));
});



// =======================================================================
// Jekyll
// =======================================================================

var jekyllFiles = [
    '_includes/*.html',
    '_layouts/*.html',
    '**/*.md'
];


gulp.task('jekyll-build', function(done)
{
    return cp.spawn("bundle", ["exec", "jekyll", "build"], { stdio: "inherit" }).on('close', done);
});



// =======================================================================
// Watch
// =======================================================================

gulp.task('watch', function()
{
    gulp.watch(styleInput, gulp.series('sass-style'));
    gulp.watch(jsInput, gulp.series('babel-js-min'));
    gulp.watch(jsInput, gulp.series('babel-js'));
    gulp.watch(svgInput, gulp.series('svgmin'));
    gulp.watch(jekyllFiles, gulp.series('jekyll-build', 'browser-sync-reload'));
});



// =======================================================================
// Define the default task and add the watch task to it
// =======================================================================

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

任何帮助，将不胜感激。

Answer 1

我为存在相同问题的任何人弄清楚了...我的Jekyll子进程正在引起无限循环（仅在编辑Jekyll文件时）。将其更新为以下内容即可达到目的：

return cp.spawn(jekyll, ['build', '--incremental', '--drafts'], {stdio: "inherit"}).on('close', done);

运行gulp watch时出现无限循环

1 个答案: