[英]There's an issue with my browserSync, it isn't reloading my sass file
我正在嘗試更改sass文件時讓gulpfile觀看重新加載。 目前,我必須在終端中關閉gulp cmd並刷新以使其正常工作。
我在這里想念什么?
提前致謝!
let gulp = require('gulp'); let sass = require('gulp-sass'); let browserSync = require('browser-sync').create(); gulp.task('styles', function() { gulp.src("app/scss/*.scss") .pipe(sass()) .pipe(gulp.dest("app/css")) .pipe(browserSync.reload({stream: true})); }); gulp.task('serve', function () { browserSync.init({ server: { baseDir: './app' } }); gulp.watch('app/scss/*.scss', ['styles']); gulp.watch('app/**/*.html').on('change', browserSync.reload) }); gulp.task('default', ['styles', 'serve']);
如果您使用Gulp4。請使用以下代碼:
let gulp = require('gulp');
let sass = require('gulp-sass');
let browserSync = require('browser-sync');
gulp.task('styles', function() {
return gulp.src('app/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css')) //removed semicolon
.pipe(browserSync.reload({ stream:true }));
});
// watch Sass files for changes, run the Sass preprocessor with the 'sass' task and reload
gulp.task('serve', gulp.series('styles', function() {
browserSync({
server: {
baseDir: './app'
}
});
gulp.watch('app/scss/*.scss', gulp.series('styles'));
gulp.watch('app/css/*.css', browserSync.reload);
gulp.watch('app/**/*.html', browserSync.reload);
}));
如果您使用舊的Gulp:
let gulp = require("gulp");
let sass = require("gulp-sass");
let browserSync = require("browser-sync").create();
let runSequence = require('run-sequence'); // npm install run-sequence --save-dev
gulp.task("styles", function () {
gulp
.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest('app/css'))
});
// Static server
gulp.task("serve", function () {
browserSync.init({
server: {
baseDir: "./"
}
});
});
//watch for files changes
gulp.task('watch', ['styles', 'serve'], function () {
// sass files changes
gulp.watch('app/scss/*.scss', ['styles']);
// CSS files changes
gulp.watch('app/css/*.css', browserSync.reload);
// html files changes
ulp.watch('app/**/*.html', browserSync.reload)
});
// The default task (called when you run 'gulp' from cli)
gulp.task('default', function (callback) {
runSequence(['styles', 'serve', 'watch'],
callback
)
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.