Gulp - плагин gulp-ruby-sass

Reading time ~7 minutes

Рассмотрим очень нужный и полезный плагин

1
gulp-ruby-sass
под Gulp для компиляции файлов Sass в файлы формата CSS. Для разработчиков, которые пользуются препроцессором Sass данный плагин
1
gulp-ruby-sass
просто необходим.

Для компиляции Sass в CSS под Gulp имеется несколько плагинов. Например,

1
gulp-sass
или
1
gulp-ruby-sass
. Более стабильным плагином является
1
gulp-ruby-sass
. Вот его мы и установим.

Установка плагина gulp-ruby-sass

Команда установки уже стандартная для нас:

$ sudo npm install --save-dev gulp-ruby-sass

В директории

1
sass
заранее помещены мною два scss-файла
1
main.scss
и
1
style.scss
:

$ ls sass/
main.scss  style.scss

После этого создаю именованную задачу

1
sass
для плагина
1
gulp-ruby-sass
:

// Sass Compile Task
gulp.task('sass', function() {
  gulp.src('sass/**/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('build/css'))
});

И запускаем задачу

1
sass
:

$ gulp sass
  [14:31:48] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [14:31:48] Starting 'sass'...
  [14:31:48] Finished 'sass' after 12 ms
  [14:31:49] gulp-ruby-sass: directory
  [14:31:49] gulp-ruby-sass: write main.css
  [14:31:49] gulp-ruby-sass: write style.css

Оба файла скомпилированы

1
main.scss
и
1
style.scss
и помещены по пути
1
build/css
:

$ ls build/css/
  main.css  one.css  style.css

Взглянем на содержимое хотя бы одного из них (пускай это будет

1
main.css
), чтобы убедиться в том, что это уже CSS-файл, а не SCSS-файл:

Компиляция Sass в CSS с помощью gulp-ruby-sass

Да, действительно, перед нами CSS-файл!

Добавление опций к плагину gulp-ruby-sass

До этого момента все плагины, которые мы устанавливали и настраивали в виде задач, были без опций. То есть, в потоке мы просто вызывали плагин через переменную и передавали ему данные для обработки. На этом работа плагина заканчивалась.

Однако внимательный читатель мог уже при первом знакостве с плагинами заметить, что в руководстве почти к каждому из них, помимо описания установки, есть раздел, посвященный опциям данного плагина. Другими словами, плагин может не просто обрабатывать данные, а обрабатывать так, как нам это нужно.

Что касается плагина

1
gulp-ruby-sass
, то данный плагин может производить компиляцию из Sass в CSS несколькими способами. Достаточно почитать раздел API к документации к нему - gulp-ruby-sass.

Мы же воспользуемся всего одной опцией из этого списка и сделаем так, чтобы результат компиляции был более сжатым. Для этого немного изменим созданную ранее задачу

1
sass
и добавим опцию
1
style: 'compressed'
к переменной
1
sass
:

// Sass Compile Task
gulp.task('sass', function() {
  gulp.src('sass/**/*.scss')
  .pipe(sass({
    style: 'compressed'
  }))
  .pipe(gulp.dest('build/css'))
});

Снова запустим задачу

1
sass
из консоли:

$ gulp sass
  [14:52:57] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [14:52:57] Starting 'sass'...
  [14:52:57] Finished 'sass' after 8.68 ms
  [14:52:58] gulp-ruby-sass: directory
  [14:52:58] gulp-ruby-sass: write main.css
  [14:52:58] gulp-ruby-sass: write style.css

И взглянем на результат компиляции файла

1
main.scss
в файл
1
main.css
:

Компиляция gulp-ruby-sass с опцией compressed

Отлично! Видим, что плагин

1
gulp-ruby-sass
действительно отработал с опцией
1
compressed
и произвел не просто компиляцию из SCSS в CSS, но и сжатие CSS-файла
1
main.css
- удалены все лишние пробелы и табуляция, выкинуты лишние точки с запятой, а все CSS-правила размещены в одну строку.

Объединение нескольких плагинов в одной задаче

До недавнего момента при работе в Gulp мы всегда поступали таким образом - “один плагин - одна задача”. Однако, Gulp гораздо гибче и мощнее, чем можно было бы подумать. В частности, в одной задаче можно объединить несколько ранее установленных плагинов именно благодаря поточности Gulp.

Чтобы было более понятно, разберем все вышесказанное на живом примере. Дополним задачу

1
sass
плагином конкатенации, чтобы “склеить” два результирующих файла
1
main.css
и
1
style.css
в один файл
1
compile.css
. Как вы уже догадались, для этой цели мы воспользуемся уже установленным ранее плагином
1
gulp-concat
.

Видоизменим задачу

1
sass
, добавив строку
1
.pipe(concat('compile.css'))
после строки с вызовом плагина
1
gulp-ruby-sass
:

// Sass Compile Task
  gulp.task('sass', function() {
    gulp.src('sass/**/*.scss')
    .pipe(sass({
      style: 'compressed'
    }))
    .pipe(concat('compile.css'))
    .pipe(gulp.dest('build/css'))
  });

Вновь запустим в консоли задачу

1
sass
:

$ gulp sass
  [15:14:44] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [15:14:44] Starting 'sass'...
  [15:14:44] Finished 'sass' after 9.05 ms
  [15:14:45] gulp-ruby-sass: directory
  [15:14:45] gulp-ruby-sass: write main.css
  [15:14:45] gulp-ruby-sass: write style.css

Посмотрим содержимое по пути

1
build/css
:

aaron@zmk ~/Projects/gulp_test $ ls build/css/
  compile.css  one.css

Файл

1
compile.css
появился по указанному пути. Взглянем на его содержимое в редакторе Sublime Text:

Компиляция gulp-ruby-sass и конкатенация Sass в CSS под Gulp

Пример получился не совсем удачный, но, тем не менее, наглядный. Видим, чтобы оба плагина отработали. Была произведена компиляция, а затем “склейка” двух файлов в один.

Конечно, благодаря поточности в Gulp, в одну задачу можно добавлять не два плагина, а гораздо больше.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024