Простое использование gulp в Symfony

Иногда при построении приложении Symfony (в заметке речь пойдет о Symfony3), хочется использовать sass в рамках модульной структуры. То есть, использовать gulp и всего один таск для компиляции sass файла в css и его минификации в ту же самую папку, где и сам sass.

Можно использовать webpack для самых разнообразных задач и не заморачиваться, тем более что в симфони для этого хорошая поддержка, но для простых операции подойдёт и это решение.

Предположим, есть структура приложения, состоящая из нескольких модулей (бандлов). Каждый бандл это законченная часть приложения со своими сущностями, контроллерами, роутами, сервисами и.т.д и, конечно, своим набором ресурсов,- стилей, скриптов и.т.д. Так вот надо сделать так, чтобы sass билдился в ту же папку того же бандла, где он и находится (например каталог styles). И чтобы watcher следил за изменениями всех таких файлов и автоматически перезаписывал новые минифицированные файлы css по всем бандлам.

Как установить nodejs, npm и gulp я рассказывал здесь. Но вообще, даже первые ссылки из Гугла дадут исчерпывающие ответы на эту тему.

Итак, в каждом бандле нужно предусмотреть структуру директории /Resources/public/styles/. В папке styles файл sass. После компиляции результирующий css появился рядом с sass в этой же папке. Если установка бандла идёт впервые, то не забыть сделать php bin/console assets:install --symlink, чтобы создать символическую ссылку бандла в начале (содержимого закрытой директории Resources бандла) в доступную для веб, папку web/. Минифицированный готовый css уже можно прописать в базовом шаблоне бандла, например в твиге, через {{assets("/bundles/path/to/style.css")}}

Заводим package.json:

{
  // ... Информация ...

  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean-css": "^3.9.4",
    "gulp-sass": "^4.0.1"
  }
}
npm install

gulpfile.js в корне проекта:

'use strict';

// Пакеты
var gulp = require('gulp');
var sass = require('gulp-sass');
var minCSS = require('gulp-clean-css');


// Переменные
var pathToSassFiles = './src/**/Resources/public/styles/*.sass';


// Таск
gulp.task('compileSass', function () {
    gulp.src(pathToSassFiles)
        .pipe(sass())
        .pipe(minCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('./src/'))
    ;
});


// Наблюдение
gulp.task('watcher', ['compileSass'], function () {
    gulp.watch(pathToSassFiles, ['compileSass']);
});


// Дефолтная команда gulp
gulp.task('default', ['watcher']);

Запуск из консоли gulp. Или же, если используется phpstorm, то там через gui можно удобно запускать (настройка в Run - Edit configuration).

Опция includePaths

При работе с файлами sass, как известно, можно использовать замечательную инструкцию @import. Только вот, например, при импорте отдельных файлов из каталога node_modules, gulp стал ругаться, о том что файл не читаем. (по умолчанию используется знак ~ из любого файла sass, для указания того что мы начинаем смотреть в каталог node_modules/). Решается это добавлением опции includePaths:

// ... вышестоящий код
.pipe(sass({
   includePaths: ['node_modules']
}))
// ... нижестоящий код

После этого импортируем как обычно из node_modules, только уже без указания знака ~ в начале.



Похожие заметки:

Программная платформа Node.js

Развивающаяся популярная платформа единого языка - реальность или миф? Основные отличия и преимущества Node.js перед другими технологиями, а также освещение сферы применения

Открыть здесь

1107

Немного про Gulp

Краткий экскурс в таск раннер Gulp

Открыть здесь

1279

Удобная разработка с livereload, установка browser-sync

Livereload — «живая» перезагрузка страниц в браузере, при изменении в файлах проекта. Обычно очень удобно при разработке нового проекта, когда постоянно вносятся и тестируются изменения, особенно если дебажим во многих вкладках и браузерах сразу

Открыть здесь

1381


Перед тем как писать комментарии, рекомендую ознакомиться:

Markdown синтаксис »

Оформление кода »

Нужна аватарка »

Комментарии