Gulp-sass и Browser Sync

Question

Я не уверен, что проблема связана с синхронизацией браузера, но это будет мой лучший выбор. Моя проблема в том, что я использую gulp для автоматизации моего рабочего процесса в первый раз. И когда я запускаю «gulp things», он открывает новую веб-страницу с моим проектом, как должен, но когда я что-то меняю в своем SASS-файле, он не обновляет его, даже если я нажму кнопку обновления, единственный способ для меня обновить это, чтобы повторно глотать все.

У меня есть все зависимые обновления. Я также использую Jekyll. И некоторые другие глотки-плагины.

Heres моего gulpfile.js:

var gulp    = require('gulp'), 
    browserSync = require('browser-sync'), 
    sass     = require('gulp-sass'), 
    prefix    = require('gulp-autoprefixer'), 
    minifycss  = require('gulp-minify-css'), 
    jshint    = require('gulp-jshint'), 
    concat    = require('gulp-concat'), 
    uglify  = require('gulp-uglify'), 
    rename  = require('gulp-rename'), 
    cp   = require('child_process'), 
    jade  = require('gulp-jade'), 
    bourbon  = require('bourbon').includePaths; 

var messages = { 
    jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build' 
}; 


/** 
* Build the Jekyll Site 
*/ 
gulp.task('jekyll-build', function (done) { 
    browserSync.notify(messages.jekyllBuild); 
    var pl = process.platform === "win32" ? "jekyll.bat" : "jekyll"; 
    return cp.spawn(pl, ['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', 'js', 'jekyll-build'], function() { 
    browserSync({ 
     server: { 
      baseDir: '_site' 
     }, 
     notify: false 
    }); 
}); 


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


/** 
* Compile Jade 
*/ 
gulp.task('jade', function() { 
    return gulp.src('_jadefiles/*.jade') 
    .pipe(jade()) 
    .pipe(gulp.dest('_includes')); 
}); 


/* 
** JS Task 
*/ 
gulp.task('js', function() { 
    return gulp.src('assets/js/common.js') 
    .pipe(jshint()) 
    .pipe(jshint.reporter('default')) 
    .pipe(concat('common.js')) 
    .pipe(gulp.dest('assets/js')) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(uglify()) 
    .pipe(gulp.dest('assets/js')) 
    .pipe(gulp.dest('_site/js')); 
}); 


/** 
* Watch scss files for changes & recompile 
* Watch html/md files, run jekyll & reload BrowserSync 
*/ 
gulp.task('watch', function() { 
    gulp.watch('assets/js/**/*.js', ['js']).on("change", browserSync.reload); 
    gulp.watch('assets/css/**', ['sass']); 
    gulp.watch(['*.html', '_layouts/*.html', '_posts/*', '_includes/*'], ['jekyll-rebuild']); 
    gulp.watch('_jadefiles/*.jade', ['jade']); 
}); 


/** 
* 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

где ваши SASS файлы?

бит внизу - «смотреть», вероятно, там, где проблема.

Я думаю, вам нужно добавить, где находится ваша папка sass. Предполагая, что это _sass, возможно, добавив его к третьей строке gulp.watch, как это будет работать.

gulp.watch(['*.html','_sass/*', '_layouts/*.html', '_posts/*', '_includes/*'], ['jekyll-rebuild']);

Answer 2

Этот код устанавливает свои часы. Но только JS изменения установлены для уведомления браузера синхронизации:

gulp.task('watch', function() { 
    gulp.watch('assets/js/**/*.js', ['js']).on("change", browserSync.reload); 
    gulp.watch('assets/css/**', ['sass']); 
    gulp.watch(['*.html', '_layouts/*.html', '_posts/*', '_includes/*'], ['jekyll-rebuild']); 
    gulp.watch('_jadefiles/*.jade', ['jade']); 
}); 

СКАЖИТЕ глотком часы уведомить синхронизации браузера об изменении Sass:

gulp.watch('assets/css/**/*.sass', ['sass']).on("change", browserSync.reload); 

Но на самом деле вы хотите запустить «дерзость» на изменения Sass, а затем уведомить browserSync о изменениях css:

gulp.watch('assets/css/**/*.css').on("change", browserSync.reload); 
gulp.watch('assets/css/**/*.sass', ['sass'])