为引导程序，SASS和BrowserSync设置Gulp 4

Question

正在尝试设置Gupl4和browsersync，我想将CSS文件放在资产文件夹中

//我的gulpfile：

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();


// compile scss into css
function style() {
  return gulp.src('_frontend/scss/**/*.scss')
    .pipe(sass().on('error',sass.logError))
    .pipe(gulp.dest('../assets/css'))
    .pipe(browserSync.stream());
}

function watch() {
  browserSync.init({
    server: {
      baseDir: "./_frontend",
      index: "/index.html"
    }
   });

  gulp.watch('_frontend/scss/**/*.scss', style)
  gulp.watch('./*.html').on('change',browserSync.reload);
  gulp.watch('./js/**/*.js').on('change', browserSync.reload); 
}

exports.style = style;
exports.watch = watch;



<link rel="stylesheet" type="text/css" href="assets/css/styles.css">

我收到此错误：

拒绝应用样式“ http://localhost:3000/assets/css/styles.css”，因为它的MIME类型（'text / html'）不是受支持的样式表MIME类型，也不是严格的MIME检查已启用。

// this is my folder organization:

 |_frontend
     |-assets
     |-css 
     |-js
     |-scss
        |-styles.scss
     |-index.html
  | assets
     | css
        | style.css
  |-gulpfile.js
  | package-json   

哪里出错了？有人可以向我解释我在做什么错吗？

Answer 1

在我看来，这就是您想要的：

.pipe(gulp.dest('./assets/css'))

请注意，从'../到./的微小差异是相对于gulpfile.js的位置而言的，该位置已经在您要保留的文件夹的顶层，因此the current working directory也就是./ 。但是../位于目录中，因此您可以移至不想执行的_frontend文件夹上方。