Использование 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 со своей картой.
Удачи!
Комментарии
Ответить