Gulp浏览器同步不注入样式

Question

I'm trying to get browser-sync to inject styles using gulp. I've pretty much copied and pasted from the tutorial, but nothing happens. The sass gets compiled correctly, but the injection doesn't happen. Any ideas what I've done wrong, or how to debug this?

I'm also using MAMP if it makes any difference at all.

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']);

The response in my console:

[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

If it matters, here is my package.json:

{
  "devDependencies": {
    "browser-sync": "^2.9.11",
    "gulp": "^3.9.0",
    "gulp-sass": "^2.0.4"
  }
}

Answer 1

The problem in my case was Drupal - it uses @import instead of link to add CSS files. This module solves it! https://www.drupal.org/project/link_css

Answer 2

您说您已经复制了本教程中的内容，但没有复制此部分，该部分实际上将更改通知了browserSync：

gulp.watch('../css/source/*.scss').on('change', browserSync.reload);