Как упростить задачу Gulp для структуры жестких папок?

Question

Я работаю с gulp-sass, gulp-sourcemaps, browsersync и у меня есть проект с жесткой структурой папок для sass-таблиц стилей. Теперь задача выглядит так:

gulp.task('sass', function () {
  // bootstrap compilation
    gulp.src('./sass/bootstrap.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass'}))
  .pipe(gulp.dest('./assets/global/plugins/bootstrap/css/'))

  // global theme stylesheet compilation
    gulp.src('./sass/global/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/global'}))
  .pipe(gulp.dest('./assets/global/css'))

  gulp.src('./sass/apps/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/apps'}))
  .pipe(gulp.dest('./assets/apps/css'))

  gulp.src('./sass/pages/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/pages'}))
  .pipe(gulp.dest('./assets/pages/css'))

  // theme layouts compilation
  gulp.src('./sass/layouts/layout4/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/layouts/layout4'}))
  .pipe(gulp.dest('./assets/layouts/layout4/css'))

  gulp.src('./sass/layouts/layout4/themes/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/layouts/layout4/themes'}))
  .pipe(gulp.dest('./assets/layouts/layout4/css/themes'))
});

Но я думаю, что эта задача может быть проще. Спасибо.

Answer 1

Вы должны быть в состоянии сократить код и улучшить его сопровождение, определяя каждый *.scss шаг обработки только один раз.

Ваши исходные каталоги с *.scss файлы следуют той же схеме, за исключением первого и последнего:

source files:     './sass/{path}/*.scss'
source maps root: '/sass/{path}'
destination root: './assets/{path}/css'

Где {path} такое ядро ​​пути источника - "global", "layouts/layout4" и т. д. Как насчет хранения ядер пути в массиве и обработки массива локальной функцией?

Например, давайте использовать массив объектов, где src ключ является исходным путем ядра и необязательным dest ключ может переопределить шаблон назначения корня по умолчанию:

var merge = require('merge-stream');

gulp.task('sass', function () {
  // src: './sass/{src}/*.scss', sourceRoot: '/sass/{src}'
  // dest: './assets/{dest}', default './assets/{src}/css'
  var stylesheets = [
        {src: '', dest: '/global/plugins/bootstrap/css'},
        {src: '/global'},
        {src: '/apps'},
        {src: '/pages'},
        {src: '/layouts/layout4'},
        {src: '/layouts/layout4/themes', dest: '/layouts/layout4/css/themes'}
      ],
      streams = stylesheets.map(function (stylesheet) {
        var src = stylesheet.src,
            dest = stylesheet.dest || src + '/css';
        return gulp.src('./sass' + src + '/*.scss')
          .pipe(sourcemaps.init())
          .pipe(sass().on('error', sass.logError))
          .pipe(sourcemaps.write('.', {
            includeContent: true,
            sourceRoot: '/sass' + src
          }))
          .pipe(gulp.dest('./assets' + dest + '/'));
      });
  return merge.apply(this, streams);
});

Другие улучшения: если вы не хотите, чтобы ошибка в *.scss файл для сбоя цепочки задач gulp, вы должны прослушать событие "error" gulp-sass плагин. Если вы хотите, чтобы задача gulp была цепной, вы должны вернуть результат последней pipe() позвони с него.

Интеграция задач, таких как gulp-livereload, gulp-minify-css или же gulp-autoprefixer было бы просто вопросом добавления соответствующего pipe() позвоните в цепочку и все файлы будут затронуты.

ОБНОВЛЕНИЕ: Исправлена ​​ошибка, при которой возвращался один поток, обрабатывающий все файлы из задачи, с помощью модуля слияния. Последовательность .pipe() звонки не могут быть продолжены другим .src() стартовая цепь. Отдельные таблицы стилей не будут создаваться в последовательности, но вызывающая сторона сможет ждать, пока все они будут созданы.