livereload のようにブラウザで css ファイルを更新するにはどうすればよいですか? 私のgulpfileの他のすべては機能していますが、gulp.destの後は何も起こっていないようです. エラーはなく、コンソールの出力は次のとおりです。
Starting 'sass'...
Finished 'sass' after 26 ms
write ./\main.css
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
browserSync = require('browser-sync').create(),
php = require('gulp-connect-php'),
sourcemaps = require('gulp-sourcemaps');
var paths = {
base: './**/',
webroot: './public_html/',
lib: './public_html/lib/'
};
paths.scssPath = paths.lib + 'scss/**/';
paths.scssMain = paths.scssPath + 'main.scss';
paths.scssAll = paths.scssPath + '*.scss';
paths.phpAll = paths.webroot + '**/*.php';
paths.css = paths.webroot + 'css/';
paths.cssAll = paths.css + '**/*.css';
gulp.task('php', function() {
php.server({ base: 'public_html', port: 8010, keepalive: true });
});
gulp.task('browser-sync', ['php'], function() {
browserSync.init({
proxy: 'localhost:8000/',
port: 8080,
open: true,
notify: false
});
});
gulp.task('sass', function () {
return sass(paths.scssMain)
.on('error', function(err) {
console.error('Error!', err.message);
})
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.css))
.pipe(browserSync.stream({match: '**/*.css'}));
});
gulp.task('default', ['sass', 'browser-sync'], function() {
gulp.watch(paths.scssAll, ['sass']);
gulp.watch([paths.phpAll], browserSync.reload);
});