为引导、SASS和BrowserSync设置Gulp 4

Question

正在尝试设置Gupl4和browsersync，我想将css文件放在assets文件夹中

//我的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的位置，它已经在您想要保留的文件夹的顶层，因此当前工作目录，它是./。但是.../是去一个目录，所以你去你的_frontend文件夹上面，你不想这样做。