Использование Gulp. Часть 4 - собираем стили.

Плагин gulp-debug
https://github.com/sindresorhus/gulp-debug

npm install --save-dev gulp-debug

var debug = require('gulp-debug');

Debug можно ставить на разных стадиях, он покажет какие файлы обрабатываются в данном пайпе.

.pipe(debug())

Если несколько дебагов, очень удобно установить им title(какой хотите), тогда будет лучше ориентироваться какой дебаг к какому этапу относится.


Запустим gulp. Через пайп sass прошло 3 файла, сконкатенирован 1 файл. Все ясно.


Сборка CSS-файлов.
Бывают случаи, когда надо создать css файл только для какой-то одной страницы или какой-то особый css.
Сейчас у нас один файл css и он грузится для каждой страницы. Но ведь можно уменьшить общий файл, а а для какой-то конкретной страницы создать свой css-файл, который будет загружаться только для данной страницы. Разумеется, это имеет смысл, если стилей именно для этой страницы много, и не хочется загромаждать ими общий css.
Например, стили для страницы сравнения товаров у нас только на странице сравнения, и они занимают достаточно много места. Вынесем их в отдельный файл. И этим, хоть совсем немножко, но ускорим загрузку других страниц.

Создаем в корневой папке src новый файл compare.scss и переносим в него стили для страницы сравнения.

Понятно, что если мы запустим gulp, то в main.css кода compare уже не будет, но как теперь получить скомпилированный файл compare.css?
Для начала создадим новую переменную

var app = {};

Мы будем хранить в ней наши собственные, кастомные функции.
Новую функцию назовем .addStyle и зададим ей два аргумента paths и outputFilename.
Скопируем все, что у нас внутри задачи sass и сделаем ее динамичной: источник - gulp.src(paths), для исходных файлов - .pipe(concat(outputFilename)).

app.addStyle = function(paths, outputFilename) {
    return gulp.src(paths)
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(debug({title: 'sass:'}))
    .pipe(concat(outputFilename))
    .pipe(debug({title: 'concat:'}))
    .pipe(gulpif(argv.prod, cleanCSS()))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./design/okay_shop/css'));
};

Изменим немного задачу sass.

gulp.task('sass', function() {
    app.addStyle([
        config.srcDir+'/sass/libs.scss',
        config.srcDir+'/sass/style.scss',
        config.srcDir+'/sass/responsive.scss'
    ], 'main.css');
    app.addStyle([
        config.srcDir+'/sass/compare.scss'
    ], 'compare.css');
});

Чтобы compare.css загружался только на странице сравнения, запишем условие в index.tpl

{if $module == 'ComparisonView'}
    <link href="design/{$settings->theme|escape}/css/compare.css" rel="stylesheet" />
{/if}

Но ведь в проектах используются не только sass.

Очень часто, особенно если мы подключаем стили сторонних плагинов, они идут как обычный css.
Например, файл libs.css - мы собрали в него стили Normalize, Autocomplete, Ui-slider, Slick slider, Fancybox да еще и стили, общие для всех тем оформления добавли - Common CSS. И делали все это вручную.  А при добавлении или обновлении какой-то библиотеки, мы опять будем делать все вручную? Да и перемещаться по длинному объединенному файлу, чтобы подправить кое-какие стили, не совсем удобно. Давайте автоматизируем и ускорим процесс.

В папке src создадим папку для css-файлов с соответвстующим именем css.
Разобьем libs.css на отдельные файлы для каждого плагина: common.css , normalize.css (чтобы знать какую версию мы используем, на первой строке в комментарии укажем Normalize.css v5.0.0), далее autocomplete.css, ui-slider.css, slick_slider.css и сохраним все эти файлы в только что созданную папку. 

Добавим все эти файлы в задачу sass. Переименуем нашу задачу sass в styles, потому что теперь она касается всех css, а не только sass. Изменим паттерн для css-файлов. И, соответсвенно нам надо поменять sass на styles и в задачах default и watch. 

Во второй версии OkayCms был обновлен плагин Fancybox. Разработчики добавили минифицированную версию стилей и прописали путь в index.tpl. Но ведь бывают случаи, когда надо изменить что-то в стилях фенсибокса, например, поменять закрывающую иконку, или цвет фона всплывающего окна. Естественно, заморачиваться с  min-файлом никто не будет, скорее всего добавят строки в стили темы, чтобы перебить дефолтные значения. Все меняется с использованием gulp. Сначала добавим в src не минифицированный, а обычный fancybox.css, и затем пропишем его в gulpfile.js.
Во-первых, не надо вносить никакие изменения в index.tpl. Во-вторых, вносить правки стало намного удобней. В-третьих, для продакшн мы делаем один минифицированный css файл, меньше запросов на сервер, ускоряется загрузка страницы. Profit.

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    cleanCSS = require('gulp-clean-css'),
    gulpif = require('gulp-if'),
    argv = require('yargs').argv,
    debug = require('gulp-debug');

var config = {
    srcDir: './src',
    stylePattern: '/**/*.+(scss|css)'
};

var app = {};

app.addStyle = function(paths, outputFilename) {
    return gulp.src(paths)
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(debug({title: 'sass:'}))
    .pipe(concat(outputFilename))
    .pipe(debug({title: 'concat:'}))
    .pipe(gulpif(argv.prod, cleanCSS()))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./design/okay_shop/css'));
};

gulp.task('styles', function() {
    app.addStyle([
        config.srcDir+'/css/normalize.css',
        config.srcDir+'/css/autocomplete.css',
        config.srcDir+'/css/ui-slider.css',
        config.srcDir+'/css/fancybox.css',
        config.srcDir+'/css/slick_slider.css',
        config.srcDir+'/css/common.css',
        config.srcDir+'/sass/style.scss',
        config.srcDir+'/sass/responsive.scss'
    ], 'main.css');
    app.addStyle([
        config.srcDir+'/sass/compare.scss'
    ], 'compare.css');
});

gulp.task('watch', function () {
    gulp.watch(config.srcDir+'/'+config.stylePattern, ['styles'])
});

gulp.task('default', ['styles', 'watch']);

Перезапускаем gulp - имеем объединенный файл main.css, карта для него и отдельный файл compare.css со своей картой.
Удачи!