Gulp jekyll 浏览器同步重建循环

Question

我一直在我的 Jekyll 项目中使用 Gulp 脚本以及浏览器同步和一些其他插件（minify/concat JS/Sass 并缩小图像和 svg）。

几天前开始（我不确定是什么原因造成的，使用我的旧 gulp 脚本没有帮助）每次我保存一个 HTML 或 JS 文件。

此 returns 在终端中的以下内容：

[00:51:47] Finished 'jekyll-build' after 850 ms
[00:51:47] Starting 'jekyll-rebuild'...
[BS] Reloading Browsers...
[00:51:47] Finished 'jekyll-rebuild' after 241 μs
[00:51:47] Starting 'jekyll-build'...
      Generating... 
                    done in 0.188 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[00:51:48] Finished 'jekyll-build' after 881 ms
[00:51:48] Starting 'jekyll-rebuild'...
[BS] Reloading Browsers...
[00:51:48] Finished 'jekyll-rebuild' after 480 μs
[00:51:48] Starting 'jekyll-build'...
      Generating... 
                    done in 0.251 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[00:51:49] Finished 'jekyll-build' after 826 ms
[00:51:49] Starting 'jekyll-rebuild'...
[BS] Reloading Browsers...
[00:51:49] Finished 'jekyll-rebuild' after 942 μs

我的 Gulp 文件如下所示。抱歉在这里粘贴了这么多代码。

/**
 * Build the Jekyll Site
 */
gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll', ['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', 'jekyll-rebuild', 'imagemin', 'svgmin'], function() {
    browserSync({
        server: {
            baseDir: '_site'
        }
    });
});

/**
 * Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
 */
gulp.task('sass', function () {
    return gulp.src('_scss/main.scss')
        .pipe(sass({
            includePaths: ['scss'],
            onError: browserSync.notify
        }))
        .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
        .pipe(gulp.dest('_site/css'))
        .pipe(browserSync.reload({stream:true}))
        .pipe(gulp.dest('css'))
        .pipe(rename({
            extname: ".min.css"
        }))
        .pipe(uglifycss())
        .pipe(gulp.dest('css'))
        .pipe(gulp.dest('_site/css'));
});

/** optimize images **/

gulp.task('imagemin', function() {
    return gulp.src('assets/img/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('./_site/assets/img'))
        .pipe(browserSync.reload({stream:true}));
});

gulp.task('svgmin', function() {
    return gulp.src('assets/svg/*.svg')
        .pipe(svgmin())
        .pipe(gulp.dest('./_site/assets/svg'));
});

gulp.task('scripts', function() {
    return gulp.src([
        '***scripts***' //removed for readability
        ])
        .pipe(include())
        .pipe(plumber({
            errorHandler: function(err){
                notify('JS compile error: ' + err);
            }
        }))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('javascript'))
        .pipe(rename({
            extname: ".min.js"
        }))
        .pipe(uglify())
        .pipe(gulp.dest('javascript'))
        .pipe(browserSync.reload({stream:true}))
        .pipe(notify('JS Compiled'));
});

/** Lint JS **/

gulp.task('lint', function() {
    return gulp.src('javascript/app/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

/**
 * Watch scss files for changes & recompile
 * Watch html/md files, run jekyll & reload BrowserSync
 */
gulp.task('watch', function () {
    gulp.watch('_scss/**/**/**/*.scss', ['sass']);
    gulp.watch('assets/img/*', ['imagemin']);
    gulp.watch('assets/svg/*', ['svgmin']);
    gulp.watch('javascript/app/*.js', ['lint', 'scripts']);
    gulp.watch(['*.html', '**/*.html', 'javascript/main.js', '_layouts/*.html', '_includes/**/**/*.html'], ['jekyll-rebuild']);
});

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

有没有人看到可能导致此问题的原因？

Answer 1

我认为你的 watch 函数中的行太宽泛了： gulp.watch(['*.html', '**/*.html', 'javascript/main.js', '_layouts/*.html', '_includes/**/**/*.html'], ['jekyll-rebuild']);

第二个 - '**/*.html' 我认为它会看到任何子文件夹，其中包括 _site 文件夹，因此它会看到那里的所有更改并陷入循环。你更改一个文件，它重新生成，_site 文件夹被转储，它看到，重新生成等等。

编辑排除的 _site 文件夹
如果您有很多子文件夹并想将它们包含在 **/*.html 中，请尝试通过将 '!_site/**/*' 添加到列表中来排除 _site 目录。

此外，请记住您指定的是 .html，它不会拾取任何降价文件。

解决这个问题导致了这个 - 我想这将是我的新手表（我没有理由不看所有文件，其他人可能不想要这个）：

gulp.watch(['**/*.*', '!_site/**/*', '!node_modules/**/*','!.sass-cache/**/*' ], ['jekyll-rebuild']);

第一部分似乎可以看到所有内容，第二部分排除了站点文件夹及其中的所有内容，然后 node_modules 和 .sass-cache.. 到目前为止我还没有能够破解它，这比我拥有的要简单得多：

gulp.watch(['./*', '_layouts/*', '_videos/*', 'order-online/*', '_includes/*', '_posts/*', '_sass/*', 'css/*', 'services/*', '_data/*' ], ['jekyll-rebuild']);

Gulp jekyll 浏览器同步重建循环

Gulp jekyll browser-sync rebuild loop

reload

jekyll

npm

gulp

browser-sync