Question

我正在尝试使用gulp进行浏览器同步以注入样式。我几乎从教程中复制并粘贴了，但没有任何反应。 sass被正确编译，但注入不会发生。我有什么想法，或者如何调试这个？

如果它有任何不同，我也在使用MAMP。

我的Gulp文件：

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"
  }
}

Answer 1

我的案例中的问题是Drupal - 它使用@import而不是link来添加CSS文件。这个模块解决了它！ https://www.drupal.org/project/link_css

Answer 2

您说您已从教程中复制粘贴，但您没有复制实际通知browserSync更改的此部分：

function *generator() {      // <-- this is your generator function
  let numbers = [1,2,3,4,5];
  numbers.map(function(n){   // <-- this one isn't a generator
    yield (n + 1)            // <-- there's your yield
  }.bind(this));
}

Gulp浏览器同步不注入样式

2 个答案: