我正在尝试使用gulp来获得浏览器同步注入样式。我已经从教程中复制和粘贴了很多,但什么也没发生。sass被正确编译,但是没有发生注入。有什么想法我做错了,或者如何调试这个?
我也在使用MAMP,如果它有任何不同的话。
My Gulp file:
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync').create();
// Proxy Server
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy: "local.website.com"
});
gulp.watch('../css/source/*.scss', ['sass']);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src('../css/source/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('../css/build'))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
控制台的响应:
[gulp] Starting 'default'...
[gulp] Finished 'default' after 4.61 μs
[BS] Proxying: http://local.website.com
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.8.12:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://192.168.8.12:3001
-------------------------------------
[gulp] Starting 'sass'...
[BS] 1 file changed (main.css)
[gulp] Finished 'sass' after 114 ms
[gulp] Starting 'sass'...
[BS] 1 file changed (main.css)
[gulp] Finished 'sass' after 115 ms
如果有关系,这里是我的package.json:
{
"devDependencies": {
"browser-sync": "^2.9.11",
"gulp": "^3.9.0",
"gulp-sass": "^2.0.4"
}
}
我的问题是Drupal——它使用@import而不是link来添加CSS文件。这个模块解决了这个问题!https://www.drupal.org/project/link_css
你说你已经从教程中复制粘贴了,但是你没有复制这个通知browserSync更改的部分:
gulp.watch('../css/source/*.scss').on('change', browserSync.reload);