Question

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

Browsersync重新加载所有样式表因为路径＆＃39; HTML \ CSS \ theme.css＆＃39;不符合任何具体的。

我怀疑这是我遇到的道路问题，但我似乎无法弄明白。我试图尽可能地剥离。

这是我的文件夹结构：

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

这是我的代码：

＆＃13;

// 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 () { });

＆＃13;

Answer 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 );
});

在文档https://browsersync.io/docs/gulp#gulp-reload

中查看SASS和CSS注入

gulp浏览器同步重新加载而不是注入css

1 个答案: