Настройка Gulp 4 для Bootstrap, SASS и BrowserSync - PullRequest
Новая
       34

Настройка Gulp 4 для Bootstrap, SASS и BrowserSync

0 голосов
/ 20 февраля 2020

Попытка настроить Gupl4 и browsersyn c, и я хочу, чтобы мой файл 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

Где ошибка? Может кто-нибудь объяснить мне, что я делаю не так?

1 Ответ

0 голосов
/ 21 февраля 2020

Мне кажется, это то, что вы хотите: 

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

обратите внимание на небольшую разницу от '../ до ./ Это относительно местоположения вашего файла gulpfile. js, который уже на верхнем уровне вашей папки, в которой вы хотите остаться, следовательно, the current working directory, что ./. Но ../ это go папка вверх, так что вы go над вашей папкой _frontend, которую вы не хотите делать.

...