Question

我在其他插件中使用浏览器同步和sass，但由于某种原因，浏览器同步没有注入css，sass正在编译并被监视但是就是这样。

这是我的gulp文件：

'use strict';
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const pug = require('gulp-pug');
const browserSync = require('browser-sync').create();
const rename = require('gulp-rename');

const reload = browserSync.reload;

// Compile sass files to css
gulp.task('sass', function () {
  return gulp.src('./assets/css/*.sass')
      .pipe(sass().on('error', sass.logError))
      .pipe(autoprefixer({
        browsers: ['last 15 versions'],
        cascade: true
      }))
      .pipe(gulp.dest('./site/css'))
      .pipe(browserSync.stream())
});
// Compile pug files to html
gulp.task('pug', () =>{
  return gulp.src('_pugfiles/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('./_include'))
    .pipe(gulp.dest('./site'))
});

gulp.task('js', function () {
  gulp.src("./assets/js/function.js")
  .pipe(rename("js/function.js"))
  .pipe(gulp.dest("./site"));
});
// the working directory
gulp.task('browser-sync', ['sass', 'pug', 'js'] ,function() {
    browserSync.init({
        server: {
            baseDir: "./site"
        },

    });
});
// Watch files compiling
gulp.task('watch', function () {
  gulp.watch('./assets/css/*.sass', ['sass']);
  gulp.watch('./_pugfiles/*.pug', ['pug']);
  gulp.watch('./site/*.html').on('change', reload);
  gulp.watch('./assets/js/*.js', ['js']);
  gulp.watch('./site/js/*.js').on('change', reload)
});

gulp.task('default', ['watch', 'browser-sync']);

这是我的文件夹结构：

应用
- _include
- _pugfiles
- _site
- _assets
  - css
  - img
  - JS
- node_modules
- 位点

所以这是我到目前为止所尝试的，再次重建它，删除了一些观察任务还尝试.pipe(browsersync.stream({match: '**/*.css'}));和files: ['!**/*.maps.css']忽略css地图文件。

也许我已经尝试了其他的东西，但我无法记住，我昨天大部分时间都在努力修复它。

gulp没有注入已编译的css

0 个答案: