Gulp смотреть все файлы .scss и компилировать в css как братья и сестры? - PullRequest
Новая
       6

Gulp смотреть все файлы .scss и компилировать в css как братья и сестры?

0 голосов
/ 20 сентября 2019

У меня есть сайт с несколькими модулями, которым необходимо, чтобы их css-файлы существовали отдельно друг от друга, но я хотел бы написать стили, используя scss, а также использовать gulp для автофиксации.Можно ли наблюдать за изменениями в любых файлах scss в данном дереве каталогов, а затем записывать css для обновленного файла как одноуровневый?Структура, по сути, будет выглядеть примерно так (хотя она может иметь вложенные каталоги на большую глубину): 

Gulpfile.js
module1
- styles1.scss
- styles1.css
- dir
-- styles2.scss
-- styles2.css
module2
- dir
-- subdir
--- styles3.scss
--- styles3.css

В другом месте у меня есть следующая настройка Gulpfile для обработки моей общей компиляции scss, но я не уверенкак я мог бы изменить его, чтобы вместо этого обрабатывать вышеупомянутый сценарий. 

// Requirements 
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var sassOptions = {
  errLogToConsole: true,
  outputStyle: 'expanded'
};

gulp.task('scss', function () {
  return gulp
    .src('scss/style.scss')
    .pipe(sourcemaps.init())
    .pipe(sassGlob())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(postcss([require('postcss-flexibility')]))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write(''))
    .pipe(gulp.dest('css'))
    .resume();
});

// Create 'watch' task
gulp.task('watch', function () {
  return gulp
    // Watch the input folder for change,
    // and run `sass` task when something happens
    .watch('scss/**/*.scss', gulp.series('scss'))
    // When there is a change,
    // log a message in the console
    .on('change', function (event) {
      console.log('File ' + event + ' was updated' + ', running tasks...');
    })
  ;
});
...