Gulp浏览器同步不注入样式



我正在尝试使用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);

最新更新