npm - Gulp jekyll 浏览器同步重建循环

Question

我一直在 Jekyll 项目上使用 Gulp 脚本以及浏览器同步和其他一些插件(以缩小/连接 JS/Sass 并缩小图像和 svg)。

从几天前开始(我不确定是什么原因导致的，使用我的旧 gulp 脚本没有帮助)，每次保存 HTML 或 JS 文件时都会导致 2-15 次重新加载的循环。

这会在终端中返回以下内容:

[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

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

/**
 * 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，这不会拾取任何 Markdown 文件。

解决这个问题导致了这个 - 我认为这将是我的新 watch (我没有理由不观看所有文件，其他人可能不想要这个):

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']);