Как разделить поток на несколько файлов в Gulp.js?

Question

[Дмитрий Сергеевич]

Всем привет, у меня есть один таск в gulpfile.js:

var global_css = [
        './source/sass/global/*.scss',
        './source/sass/features/*.scss',
        './source/sass/pages/*.scss',
        './source/sass/layout/*.scss'
    ];

gulp.task('sass-global', function () {

            return gulp.src(global_css)
                .pipe(plugins.plumber({errorHandler: plugins.notify.onError("<%= error.message %>")}))
                .pipe(plugins.sourcemaps.init())
                .pipe(plugins.sass())
                .pipe(plugins.autoprefixer({
                    browsers: prefix_list,
                    cascade: false
                }))
                .pipe(plugins.csscomb('./dev/libs/comb/research.json'))
                .pipe(plugins.sourcemaps.write('./'))
                .pipe(gulp.dest('./public/css'));
        });

Можно ли сделать так чтобы в одном таком таске, каждая указанная папка в global_css конкатинировалась в отдельный файл и потом уже по этому файлу проходились CSScomb Прехифаер и Сурсмап?

Answer 1

[Юрий Ярош]

var merge = require('merge-stream');
gulp.task('sass-global', function () {
  var merged = merge();
  global_css.forEach((entry) => {
    merged.add(gulp.src(entry)
      .pipe(plugins.plumber({errorHandler: plugins.notify.onError("<%= error.message %>")}))
      .pipe(plugins.sourcemaps.init())
      .pipe(plugins.sass())
      .pipe(plugins.autoprefixer({
        browsers: prefix_list,
        cascade: false
      }))
      .pipe(plugins.csscomb('./dev/libs/comb/research.json'))
      .pipe(plugins.sourcemaps.write('./'))
      .pipe(gulp.dest('./public/css')));
  });

  return merged;
});

Типа так

Comments

[Юрий Ярош]

Я сейчас пишу gulp-seed для react'a с кучей всего
https://github.com/VoidNugget/gulp-seed
Уверен что будет полезно глянуть

[Дмитрий Сергеевич]

Юрий Ярош: Юрий, спасибо! Обязательно ознакомлюсь, как раз собирался использовать реакт

[Юрий Ярош]

Дмитрий Сергеевич: да, я постараюсь в скором времени дописать.
Я слез с SASS'a из-за слоупочности на stylus, хотя если нет возможности слезть, то лучше использовать node-sass без compass'a.

[Дмитрий Сергеевич]

Юрий Ярош: А в чем конкретно выражается слоупочность SASS? У меня компилируется за 22мs

[Юрий Ярош]

Ruby / jRuby sass очень медленный, node-sass на много быстрее.
gulp-sass использует именно его. Есть очень много фанатов Compass'а, который не особо то и дружит с node-sass. На stylus'е проще скриптить, и он бывает чуть быстрее node-sass. А вообще, люди извращаются как могут thesassway.com/advanced/implementing-bubble-sort-w...

[Дмитрий Сергеевич]

Юрий Ярош: Спасибо за вашу правку, но ничего не сработало! Ошибки не выводит, файлы не компилируются. Возможно проблема в том что поток должен конкатенировать все файлы. Но если я подставляю в него .pipe(plugins.concat('global.css')) то компилируется только один файл, как конкатенировать с помощью merge-stream, увы, я не могу понять

[Дмитрий Сергеевич]

Дмитрий Сергеевич: Если лень разбираться, то напишите, я отмечу ответом и продолжу сам разбираться!

[Юрий Ярош]

Я написал пример как это может работать, естестенно работоспособность не проверял так как не до конца понимаю что вообще нужно сделать.

Получается по потоку на каждый файл, и они объединяются в один поток с помощью merge-stream.

gulp.task('sass', () => {
var merged = merge();
[
'oneFile.sass', 'otherFile.sass'
].forEach((file) => {
merged.add(gulp.src(file).pipe(sass()).pipe(gulp.dest('dist/stylesheets')));
});

return merged
});

Таким образом получится 2 файла oneFile.css и otherFile.css.
Естественно можно добавить sourcemap'ы, и в качестве источника указать glob выражение с конкатенацией, хотя я лично привык указывать конкретный файлов без конкатенации - так проще контролировать порядок подгрузки.

[Юрий Ярош]

Пишите в скайп void.nugget
Разберёмся...