Как упростить задачу 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} является основным источником путь - «глобальные», «макеты/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, вы должны прослушать событие «ошибка» плагина gulp-sass. Если вы хотите сделать цепочку задач цепочки, вы должны вернуть результат последнего вызова pipe().

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

UPDATE: Исправить, возвращая один поток, обрабатывающий все файлы из задачи с помощью модуля merge-stream. Последовательность вызовов .pipe() не может быть продолжена другой стартовой цепочкой .src(). Отдельные таблицы стилей не будут создаваться в последовательности, но вызывающий сможет дождаться, пока все они будут созданы.