Gulpfile.js для обработки нескольких файлов в нескольких папках

Question

Я регулярно работаю над несколькими проектами WordPress, где одновременно работаю над созданием как тем, так и плагинов. У меня есть gulpfile.js в моей папке темы, которая компилирует .scss в .css-файлы. Мне интересно, могу ли я создать какой-то «главный» gulpfile, поместить его в корневую папку и затем скомпилировать файлы .scss всякий раз, когда мы их имеем. Идея состоит в том, что если какая-либо папка содержит папку/scss, Gulp будет компилировать ее основные .scss-файлы, а затем сгенерировать папку/css (такая же идея может быть адаптирована для скомпилированных js-файлов, изображений и т. Д.).

Вот моя задача, которая компилирует файлы .scss до сих пор.

var gulp = require('gulp'), 
     sass = require('gulp-sass'), 
     autoprefixer = require('gulp-autoprefixer'), 
     minifycss = require('gulp-minify-css'), 
     rename = require('gulp-rename'), 
     clean = require('gulp-clean'), 
     concat = require('gulp-concat'), 
     cache = require('gulp-cache'), 
     notify = require('gulp-notify'), 
     projectTitle = 'Project Name'; 

// styles task 
gulp.task('styles', function() { 
    return gulp.src('src/styles/*.scss') 
     .pipe(sass({ paths: ['src/styles/'], outputStyle: 'expanded' })) 
     .pipe(notify({ 
     title: projectTitle, 
     message: 'File: <%= file.relative %> was compiled!' 
     })) 
     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(rename({ suffix: '.min' })) 
     .pipe(minifycss()) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(notify({ 
     title: projectTitle, 
     message: 'Minified file: <%= file.relative %> was created/updated!' 
     })) 
}); 

// styles task 
gulp.task('editor-styles', function() { 
    return gulp.src('src/styles/editor-styles.scss') 
     .pipe(plumber()) 
     .pipe(sass({ paths: ['src/styles/'] })) 
     .pipe(notify({ 
     title: projectTitle, 
     message: 'File: <%= file.relative %> was compiled!' 
     })) 
     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(rename({ suffix: '.min' })) 
     .pipe(minifycss()) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(notify({ 
     title: projectTitle, 
     message: 'Minified file: <%= file.relative %> was created/updated!' 
     })) 
}); 

// watch task 
gulp.task('watch', function() { 

    // Watch .scss files 
    gulp.watch('src/styles/**/*.scss', [ 'styles' ]); 

}); 

Каков наилучший подход в этом случае строить глобальный gulpfile.js, который работает, как это? Также было бы идеально, если задача компилирует только то, что необходимо (я видел некоторые задачи, которые все время компилируют).

Answer 1

./sites/**/scss/*.scss 

Это работает, поместите это внутри gulp.watch и gulp.src

скажем, у вас есть корень рабочего пространства ака.
Там вы устанавливаете глоток и глоток. Создайте там папку, в которой будут представлены все ваши проекты, я назвал мой sites. Поэтому, если у вас есть 10 разных сайтов, например. site1, site2, site3. Все должно войти в папку sites.

Он следит за всеми сайтами/[имя случайной папки]/папкой scss для всех файлов .scss и выдает css внутри него. Я не знаю, как создать карту css и поставить вывод там.