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

我想在你的手錶功能的線太寬： 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']);