为 Bootstrap、SASS 和 BrowserSync 设置 Gulp 4答案

【问题标题】：Setting up Gulp 4 for Bootstrap, SASS, and BrowserSync为 Bootstrap、SASS 和 BrowserSync 设置 Gulp 4
【发布时间】：2020-06-04 23:33:10
【问题描述】：

尝试设置 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

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

【问题讨论】：

标签： gulp browser-sync

【解决方案1】：

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

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

请注意 '../ 到 ./ 的细微差别，它与您的 gulpfile.js 的位置有关，该位置已经在您想要保留的文件夹的顶层，因此 the current working directory 是 @987654325 @。但是../ 是一个目录，所以你可以去你不想做的_frontend 文件夹。

【讨论】：