0
我有一个浏览器同步运行和js/sass编译的gulp文件。它为我的Angular SPA服务。它看起来像这样:当SASS更新时,浏览器同步无法使用吞噬
gulp.task('default', function(){
return runSequence(['build-css', 'build-js'], 'serve-dev');
});
gulp.task('serve-dev', function() {
browserSync.init(null, {
server: {
baseDir: './',
middleware: [
modRewrite([
'!\\.\\w+$ /index.html [L]'
])
]
}
});
gulp.watch(paths.js.dir + '/**/*.js', ['watch-js']);
gulp.watch(paths.css.dir + '/**/*.scss', ['watch-css']);
gulp.watch(paths.html.dir + '/**/*.html').on('change', browserSync.reload);
});
gulp.task('watch-css', ['build-css'], browserSync.reload);
gulp.task('watch-js', ['build-js'], browserSync.reload);
gulp.task('build-css', function() {
return gulp.src(paths.css.src)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['> 0.5%']
}))
.pipe(cleanCSS())
.pipe(rename('app.min.css'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.css.dest));
});
gulp.task('build-js', function() {
return gulp.src(paths.js.src)
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.js.dest));
});
它的工作原理最初以服务的网站,当我更新的HTML文件都会刷新,但是当我更新SASS文件,它不会刷新。所有的路径都是正确的,因为初始编译工作正常。
我不能搞乱生成任务。还有构建任务也运行生产,我不能让浏览器同步在生产版本上工作。 – Coop
然后创建该任务的开发版本? – kasperoo
是的,在这种情况下,您需要为dev版本创建一个单独的任务。 –