刚开始使用 BrowserSync,我有一个关于 SASS + CSS 注入(inject)配置的常见用例的问题。
我有点困惑的是我可以为 server
属性指定自己的名称。
在文档中 here他们使用 "./app"
。我可以使用其他名称,例如 "./site"
还是只能使用 "./app"
?
这是代码
// task
gulp.task('serve',['sass'], function (){
// static server
browserSync.init({
server: "./app"
});
// watching html and scss files for changes then reloading browser
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
最佳答案
已更新
如果您希望将 browserSync
设置为具有实时重新加载功能的静态服务器,那么您的方法非常正确。您可以使用 baseDir
选项将 browsersync 指向存储库中的任何文件夹。您也可以使用多个目录。有关更多信息,请查看选项 documentation .
首先。我希望拆分您的任务。
就个人而言,我会选择让我的服务器任务类似于;
gulp.task('serve', ['build'], function(event) {
var server = browsersync.create();
server.init({
baseDir: 'app/'
});
return server.watch('app/**', function(evt, file) {
server.reload();
});
});
请注意 build
是如何依赖的。这可确保在我们启动 BrowserSync 时我们提供的所有文件都已就位。
保持它的通用性,然后我们可以将与 SCSS 相关的任务拆分为它们自己的任务,例如 scss:compile
和 scss:watch
。
gulp.task('scss:compile', function(){
return gulp.src('src/scss/**/*.scss')
.pipe(plumber())
.pipe(scss())
.pipe(gulp.dest('app/css/');
});
和
gulp.task('scss:watch', function() {
gulp.watch('src/scss/**/*.scss', ['scss:compile']);
});
用于 CSS 注入(inject)。有两种选择可以做到这一点
记住注入(inject)不同于重新加载。重新加载会重置页面状态,而注入(inject)不会影响当前页面状态,只会注入(inject)样式。
选项一是使用 SASS 编译的管道内容调用 browsersync.stream()
,如下所示;
gulp.task('scss:compile', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(plumber())
.pipe(scss())
.pipe(gulp.dest('app/css')
.pipe(browsersync.stream());
});
请注意,最后一个管道注入(inject)了更改。这还需要检查 BrowserSync watch 中的文件类型,以便仅在非 CSS 文件更改时重新加载。
这个选项没问题。但是,我认为将它捆绑在最后并与 BrowserSync 设置代码分开并不清楚。
第二个选项(个人首选)是使用 BrowserSync 观察变化,如果 CSS 文件发生变化,使用 vinyl
将这些变化流式传输到 BrowserSync。
像下面这样的东西往往会起作用;
var gulp = require('gulp'),
browsersync = require('browser-sync'),
vss = require('vinyl-source-stream'),
vb = require('vinyl-buffer'),
vf = require('vinyl-file');
gulp.task('serve', ['build'], function() {
var server = browsersync.create();
server.init({ baseDir: 'app/' });
return server.watch('app/**', function(evt, file) {
if (evt === 'change' && file.indexOf('.css') === -1)
server.reload();
if (evt === 'change' && file.indexOf('.css') !== -1)
vf.readSync(file)
.pipe(vss(file))
.pipe(vb())
.pipe(server.stream());
});
});
希望对您有所帮助!
关于javascript - 使用 Gulp 和 BrowserSync 注入(inject) SASS + CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32239370/