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

My 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

我认为您的手表功能中的线条过于宽泛： 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浏览器同步重建循环

1 个答案: