Sass 如何在gulpwatch任务中添加jekyll build命令？

我需要在gulp watch任务期间运行

jekyll build

，我是按照以下代码执行的

var gulp = require('gulp-help')(require('gulp')),
    sass = require('gulp-sass');

gulp.task('sass', function(){
    return gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

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

gulp.task('default', ['sass'], function(){
    gulp.watch(['_includes/**/*.js', '_includes/**/*._', 'assets/styles/**/*.scss'], ['jekyll-build', 'sass']);
});

---

当我对任何文件进行一些更改并试图立即保存时，该命令会在终端中运行，但不会反映在UI中。我需要保存两到三次以反映更改。不确定问题出在哪里，也不确定是不是因为这里添加了gulp watch代码。感谢您的帮助。

当您说更改没有反映出来时，您的意思是浏览器没有刷新吗

mac和Windows启动jekyll build的线路不同，您的看起来就像mac，在Windows上，我在这条线路上使用

jekyll.bat

（jekyll，['build']）

在你的观察步骤中，你看的不多。与其试着告诉gulp去观察每一件不同的事情，我会做相反的事情，告诉gulp去观察每一件事情

***

，然后告诉它什么不应该看

！\u site/***

。这还可以让你观察配置文件的变化

另外，看起来您并没有使用浏览器同步实时重新加载，这是使用gulp和jekyll的一半乐趣（另一半是让gulp进行sass处理，因为它比jekyll快得多）

下面是我使用的一个吞咽文件和一个链接，链接到我对此所做的一篇评论：

var gulp=require（'gulp'）；
var browserSync=require（'browser-sync'）；
var cp=需要（“子流程”）；
var sass=需要（'gulp-sass'）；
var POSTSSS=需要（“大容量后处理”）；
var sourcemaps=require（'gulp-sourcemaps'）；
var autoprefixer=require（'autoprefixer'）；
var watch=需要（“大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口”；
var-uglify=需要（'gulp-uglify'）；
var cssnano=require（'cssnano'）；
var-imagemin=require（'gulp-imagemin'）；
var htmlhint=require（“gulp htmlhint”）；
变量消息={
jekyllBuild:'正在运行：$jekyllBuild'
};
//Gulp作为jekyll的资产管理器。请注意，资产文件夹从未清理过
//因此，您可能需要偶尔手动删除_site/assets文件夹。
//这是因为gulp将文件从assets目录移动到_site/assets，
//但是，如果您将它们从资产中删除，则不会将它们从站点/资产中删除。
/**
*为windos构建Jekyll站点。如果您在Mac/linux上，请将Jekyll.bat更改为just Jekyll
*/
吞咽任务（'jekyll-build'，函数（完成）{
browserSync.notify（messages.jekyllBuild）；
返回cp.spawn（'jekyll.bat'，['build']，{stdio:'inherit'}）
.在（‘关闭’，完成）时；
});
/**
*重建Jekyll&在监视的文件更改时重新加载页面（&D）
*/
gulp.task（'jekyll-rebuild'，['jekyll-build']，函数（）{
重新加载（）；
});
/**
*等待jekyll构建，然后启动服务器
*/
gulp.task（'serve'，['jekyll-build'，function（））{
browserSync.init({
服务器：“\u站点/”
});
});
/**
*监视jekyll源文件的更改，而不监视资源
*/
吞咽任务（'watch'，函数（）{
gulp.watch（['****'、'！\u site/***'、'！\u assets/***'、'！node\u modules/***'、'！.sass cache/***']、['jekyll-rebuild']）；
});
//只看sass文件-无需重建jekyll
gulp.task（'watch-sass'，['sass-rebuild'，function（））{
狼吞虎咽的手表（[''u资产/sass/***.scss']，['sass-rebuild']）；
});
//只看js文件
gulp.task（'watch-js'，['js-rebuild'，function（））{
狼吞虎咽的看着（[''u assets/js/***.js']，['js-rebuild']）；
});
//只看图像文件
gulp.task（'watch-images'，['images-rebuild'，function（））{
大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口；
});
//如果sass文件发生更改，只需使用gulp sass重新构建它们
gulp.task（'sass-rebuild'，function（）{
变量插件=[
autoprefixer（{browsers:['last 2 version']}），
cssnano（）
];
返回gulp.src（“U资产/sass/***.scss”）
.pipe（sourcemaps.init（））
.pipe（sass（））
.pipe（sourcemaps.init（））
.管道（POSTSS（插件））
.pipe（sourcemaps.write（'.'））
.pipe（gulp.dest（“'u site/assets/css/”）
.pipe（browserSync.reload({
溪流：对
}))
});
吞咽任务（'js-rebuild'，函数（cb）{
返回gulp.src（“U资产/js/***.js”）
.管道（丑（）
.管道（大口目的地（“现场/资产/js/”）
.pipe（browserSync.reload({
溪流：对
}))
});
吞咽任务（'images-rebuild'，函数（cb）{
返回gulp.src（“U资产/img/****”）
.管道（大口目的地（“现场/资产/img/”）
.pipe（browserSync.reload({
溪流：对
}))
});
/**
*默认任务，只运行'gulp'将
*编译jekyll站点，启动BrowserSync&watch文件。
*/
gulp.task（'default'，['service'，'watch'，'watch-sass'，'watch-js'，'watch-images']）；
//构建和部署东西
gulp.task（'imagemin'，function（）{
log（'最小化源文件中的图像！！'）；
返回gulp.src（“U资产/img/***”）
.pipe（imagemin（））
.pipe（gulp.dest（函数（文件））{
返回file.base；
}));
});
gulp.task（'w3'，function（）{
gulp.src（“\u site/***.html”）
.pipe（htmlhint（））
.pipe（htmlhint.reporter（））
})
//相反，从命令行进行验证更有效
//npm安装htmlhint-g
//htmlhint _site/***.html

你为什么要使用Gulp来编译你的Sass？Jekyll可以。我必须实现Gulp，因为我要执行JS缩小、丑化等，我必须在GitHub中托管它。所以我在构建任务中没有使用任何Jekyll插件或Jekyll。

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var cp          = require('child_process');
var sass = require('gulp-sass');
var postcss    = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');
var cssnano = require('cssnano');
var imagemin = require('gulp-imagemin');
var htmlhint = require("gulp-htmlhint");

var messages = {
    jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
// Gulp as asset manager for jekyll. Please note that the assets folder is never cleaned
//so you might want to manually delete the _site/assets folder once in a while.
// this is because gulp will move files from the assets directory to _site/assets,
// but it will not remove them from _site/assets if you remove them from assets.

/**
 * Build the Jekyll Site - for windos. If you are on a Mac/linux change jekyll.bat to just jekyll
 */
gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll.bat', ['build'], {stdio: 'inherit'})
        .on('close', done);
});

/**
 * Rebuild Jekyll & do page reload when watched files change
 */
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
    browserSync.reload();
});

/**
 * Wait for jekyll-build, then launch the Server
 */

gulp.task('serve', ['jekyll-build'], function() {
    browserSync.init({
        server: "_site/"
    });
});

/**
 * Watch jekyll source files for changes, don't watch assets
 */
gulp.task('watch', function () {
    gulp.watch(['**/*.*', '!_site/**/*','!_assets/**/*','!node_modules/**/*','!.sass-cache/**/*' ], ['jekyll-rebuild']);
});

//watch just the sass files - no need to rebuild jekyll
gulp.task('watch-sass', ['sass-rebuild'], function() {
     gulp.watch(['_assets/sass/**/*.scss'], ['sass-rebuild']);
});

// watch just the js files
gulp.task('watch-js', ['js-rebuild'], function() {
     gulp.watch(['_assets/js/**/*.js'], ['js-rebuild']);
});

// watch just the image files
gulp.task('watch-images', ['images-rebuild'], function() {
     gulp.watch(['_assets/img/**/*.*'], ['images-rebuild']);
});

//if sass files change just rebuild them with gulp-sass and what not
gulp.task('sass-rebuild', function() {
     var plugins = [
        autoprefixer({browsers: ['last 2 version']}),
        cssnano()
    ];
     return gulp.src('_assets/sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.init())
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write('.'))
    .pipe( gulp.dest('_site/assets/css/') )
    .pipe(browserSync.reload({
      stream: true
    }))
});

gulp.task('js-rebuild', function(cb) {
    return gulp.src('_assets/js/**/*.js')
      .pipe(uglify())
      .pipe( gulp.dest('_site/assets/js/') )
      .pipe(browserSync.reload({
      stream: true
    }))
});

gulp.task('images-rebuild', function(cb) {

     return gulp.src('_assets/img/**/*.*')
      .pipe( gulp.dest('_site/assets/img/') )
      .pipe(browserSync.reload({
      stream: true
    }))
});

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


//build and deploy stuff
gulp.task('imagemin', function() {
    console.log('Minimizing images in source!!');
 return gulp.src('_assets/img/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest(function (file) {
        return file.base;
    }));
});

gulp.task('w3', function() {
gulp.src("_site/**/*.html")
    .pipe(htmlhint())
    .pipe(htmlhint.reporter())
})
// validate from the command line instead, works better
// npm install htmlhint -g
// htmlhint _site/**/*.html