sass编译没完成浏览器就刷新了
刷新完sass才编译完成
这个时候还要再刷新一边浏览器浏览器才能看到修改的样式
感觉有点问题 请大神帮我看一下
var gulp = require('gulp');
var changed = require('gulp-changed');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require("gulp-sourcemaps");
var browserSync = require('browser-sync').create();
gulp.task('sass', function () {
return gulp.src('./assets/sass/**/*.scss')
.pipe(changed('./css'))
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: true,
remove:true
}))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./css/'))
.pipe(browserSync.stream());
});
gulp.task('serve',["sass"],function() {
browserSync.init({
proxy: "localhost:8080/"
});
gulp.watch("assets/sass/**/*.scss", ['sass']);
});
gulp.task('default', ['serve']);
**我的配置你看下**
//静态服务器 + 监听 scss/html 文件
gulp.task('browser-sync', function() {
browserSync.init({
server: "./"
});
gulp.watch("css/*.css").on('change', reload);
gulp.watch("*.html").on('change', reload);
gulp.watch("*.js").on('change', reload);
});
gulp.task('default', ["browser-sync"]);
// 监听文件变化
gulp.watch('sass/*.scss', function() {
gulp.run('sass');
});
gulp.watch('css/*.css', function() {
gulp.run('default');
});
你可以选择监听sass编译完输出的css文件呀,就不会出现这种问题了。
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
// static server
gulp.task('server', function () {
// 要监听的目录文件 你可以设置为你自己想要监听的目录结构
var files = [
'./views/*.html',
'./dist/**/*.css',
'./dist/**/*.js'
];
browserSync.init(files, {
server: {
baseDir: './'
}
})
})
// scss
gulp.task('sass', function () {
return gulp.src('src/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
})
//watch
gulp.task('watch', function () {
gulp.watch('src/sass/*.scss', ['sass']);
})
gulp.task('default', function () {
gulp.run('server', 'sass', 'watch')
})