Опубликовано автор в категориях Верстальщику.

Мой следующий большой проект скорее всего будет на PostCSS, ну а пока, я использую SASS в качестве препроцессора в своем проекте. Естественно, для больших проектов лучше использовать менеджеры для сборки, и я использую GULP.
Так вот, на большом проекте, с большим количеством CSS модулей я использовал для сборки CSS плагин gulp-ruby-sass, также для проекта я использовал такие дополнительные модули к SASS, как sass-globbing, Compass, Sussy, Breakpoint. И именно из-за этого я использовал медленный gulp-ruby-sass вместо gulp-sass. И когда время сборки CSS добралось до 5.5 секунд, то работать стало просто не выносимо.
И вот, одним прекрасным утром я решил портировать свой проект на gupl-sass. Передо мной вырисовались две задачи совместимости, которые я должен был решить:

  1. Использование расширений для SASS, в моем случае Compass, Sussy, Breakpoint
  2. Импорт мелких файлов по директориям, а не по файлам (sass-globbing делает это для SASS)

Оказалось обе они решаются довольно просто, и не знаю почему я не сделал этого раньше.

Итак решение проблемы с использованием расширений для SASS мне подсказала вот эта статья про настройку Sussy и Breakpoint для gulp-sass. Я не буду переписывать ее, просто скажу ключевое решение. Мы добавляем нужные зависимости просто как компоненты Bower, и импортируем их в наши главные SASS файлы с помощью простых импортов. Так вы можете подключить Compass, Sussy и Breakpoint. Добавлю лишь то, что в своем проекте я не стал подключать Compass, потому как проверив проект на его использование, я просто ужаснулся, я использовал лишь два микшина из Compass, поэтому микшины были импортированы в собственные и Compass удален.

Далее мне нужно было сделать импорт множества CSS модулей, которые были разбиты на мелкие файлы. Раньше я это делал с использованием sass-globbing. И оказывается, что есть замечательный плагин для GULP — gulp-css-globbing, который, несмотря на название, также позволяет делать глобальные импорты и для .scss файлов, просто это нужно указать в настройках. В итоге, мой таск по генерации CSS в gulpfile.js стал выглядеть так:

gulp.task('styles', function () {
    gulp.src('app/styles/**/*.scss')
        .pipe($.cssGlobbing({
            // Configure it to use SCSS files
            extensions: ['.scss']
        }))
        .pipe($.sourcemaps.init())
        .pipe($.sass({
            outputStyle: 'expanded',
            precision: 3,
            includePaths: ['.']
        }).on('error', $.sass.logError))
    .pipe($.postcss([
        require('autoprefixer-core')({browsers: ['last 2 version']})
    ]))
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest('.tmp/styles'))
        .pipe(reload({stream: true}));
});

Итак, теперь мои стили собираются в среднем за 550 миллисекунд, а раньше они собирались 5-6 секунд. То есть мы имеем просто отличный прирост скорости компиляции, а значит и написания CSS. Так что, если ваш проект позволяет, то лучше использовать libSASS компилятор вместо нативного Ruby.

Оставить комментарий

  • (не будет показан)