最新の gulp sass と browsersync を使用しています。scss ファイルを編集して保存すると、コンパイルされて「injecting styles.css」が表示されますが、ブラウザもリロードされます。
これがいつ変更されるかはわかりませんが、以前はリロードせずに新しい css ファイルを挿入するだけでした。
私の仕事:
var sassFiles = './app/assets/sass/**/*.{scss,sass}';
var cssFiles = './app/assets/css';
var cssBuildFiles = './build/assets/css';
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compact'
};
var autoprefixerOptions = {
browsers: ['last 2 versions']
};
gulp.task('sass', function () {
return gulp
.src(sassFiles)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer(autoprefixerOptions))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(cssFiles))
.pipe(browserSync.stream());
});
マップファイルがリロードをトリガーしていると誰かが私に言ったので、フィルターを使用して css ファイルのみを browsersync にパイプしました。ほとんどのオンラインの例はここにあるようなものなので、本当にそれを行う必要があるかどうかはわかりません...