0

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);
});
4

0 に答える 0