0

我可以了解为什么我在 chrome 控制台中收到此消息，它似乎可以防止 css 代码注入。

Browsersync 重新加载所有样式表，因为路径 'html\css\theme.css' 不匹配任何特定的。

我怀疑这是我遇到的路径问题，但我似乎无法弄清楚。我试图尽可能地脱掉衣服。

这是我的文件夹结构：

/_base/gulpfile.js
/_base/html/index.html
/_base/html/css/theme.css
/_base/src/scss/theme.scss

这是我的代码：

// Defining requirements
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var browserSync = require('browser-sync').create();
var sourcemaps = require('gulp-sourcemaps');
var notify = require('gulp-notify');

// var style lint

//general error handler with plumber
var pb_errorHandler = { errorHandler: notify.onError({
  title: 'Gulp',
  message: 'Error: <%= error.message %>'
})
};

// stage 1 - HTML CSS JS FILE CREATION
// A. scss to css
var s1_sassOptions = {
  errLogToConsole: true,
  outputStyle: 'expanded'
};

// compile stage1 scss files, use plumber and sorcemaps. 
// to do : need to check what error handling to use - curently 2
gulp.task('create-css', function () {
  gulp.src('src/scss/theme.scss')
  .pipe(plumber(pb_errorHandler))
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sass(s1_sassOptions).on('error', sass.logError))
  .pipe(sourcemaps.write(undefined, { sourceRoot: null }))
  .pipe(gulp.dest('html/css/'))
});


// automatically reloads the page when files coressponding to this paths are changed:
var s1_broswserSync_files = [
'html/css/*.css'
];

// browsersync options
var s1_browserSync_options = {
  server:"./html"
};


gulp.task('browser-sync', function() {
  browserSync.init(s1_broswserSync_files, s1_browserSync_options );
});

// Starts watcher. Watcher runs gulp sass task on changes
gulp.task('stage1-watch', function () {
  gulp.watch(['src/scss/*.scss'], ['create-css']);
});

// Starts watcher with browser-sync. Browser-sync reloads page automatically on your browser
gulp.task('stage1', ['browser-sync', 'stage1-watch'], function () { });

4

1 回答 1

1

看起来您的选项browserSync.init()不正确。init 方法接受配置选项和回调函数的两个可选参数。请参阅https://browsersync.io/docs/api#api-init

你想像这样设置你的选项。

var s1_browserSync_options = {
    server:"./html",
    files: "html/css/*.css"
};

gulp.task('browser-sync', function() {
    browserSync.init(s1_browserSync_options );
});

看看文档中的 SASS 和 CSS 注入https://browsersync.io/docs/gulp#gulp-reload

于 2018-01-15T15:10:02.797 回答