Yii2 использование sass и gulp
  • 1901

Yii2 использование sass и gulp

Автор: admin | 21 августа (Вт.) 2018г. в 23ч.22м.

Для конвертации sass файлов в css стили очень удобно использовать такой инструмент, как gulp. К тому же gulp может очень многое помимо конвертации scss. Я в своих проектах на yii2 использую также менификацию стилей и скриптов, которые подключаются на рабочем сайте, а для разработки используется обычный, не ужатый файл. Не буду описывать все возможности и приемущества использования gulp в проектах на yii2, а сразу приступим к делу. Перед тем, как установить gulp, нужно установить на компьютер node.js 

Установка node.js на компьютер.

node.js можно скачать и установить с официального сайта https://nodejs.org. Я использую на компьютере ubuntu, поэтому установлю с помощью терминала, воспользовавшись пакетным менеджером apt
sudo apt-get update
sudo apt-get install nodejs​

Также желательно установить npm - менеджер пакетов, который нужен для установки самого gulp и модулей для node.js

sudo apt-get install npm

Теперь перейдем к установке gulp.

Установка gulp.

После установки node.js и npm можем перейти к установке gulp
npm install --global gulp​
Данная команда установит gulp глобально. Теперь перейдем в терминале в папку проекта yii2 и в корне выполним команду для инициализации package.json файла, в котром мы будем прописывать все необходимые модули для работы с gulp и в часности для конвертации scss в css:
npm init​
Теперь наконец перейдем к установке gulp локально в наш проект. В терминале из корня проекта yii2 выполним команду:
npm install gulp --save-dev​
После установки в корне проекта yii2 должна появиться папка node_modules. Внутри данной папки лежит папка с gulp и другие пакеты. Именно внутри node_modules будут распологаться пакеты, которые нам будут необходимы для сборки frontend.

Теперь нужно создать тут же в корне файл gulpfile.js, в котором  и будут описаны все "магические инструкции", которые будут делать такую полезную работу, как конвертация sass в css, сжатие файлов css и js, генерация спрайтов из отдельных картинок и т.п. 

Создаем файл gulpfile.js и добавляем первые задачи:
var gulp = require('gulp');


gulp.task('hello', function() {
  console.log('hello world!');
});​

В начале файла подключаем нужные модули. Сначала подключим сам gulp и добавляем тестовую задачу "hello" для проверки работоспособности установки. В терминале из корня приложения, где лежит файл gulpfile.js выполним команду:

gulp hello

На экране должна появиться надпись 'hello world!'. Теперь настроим gulp для работы. Для начала скачаем и установим в папку node_modules необходимые пакеты:
-gulp-sass
-gulp-rename
-gulp-notify
-gulp-combine-mq
-gulp-clean
-gulp-autoprefixer
-gulp.spritesmith

Инструкции, как установить эти пакеты можно найти на сайте https://www.npmjs.com. Так, например для установки gulp-combine-mq из корня приложения выполним в терминале:

npm i gulp-combine-mq

Данный пакет появится в папке node_modules и запись об установке появится в package.json:

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-combine-mq": "^0.4.0"
}
Так устанавливаем все нужные пакеты и подключаем их в gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');// подключаем gulp-sass
var minifyCss = require('gulp-clean-css');//минификация css
var rename = require('gulp-rename');
var notify = require("gulp-notify");
var autoprefixer = require('gulp-autoprefixer');
var clean = require('gulp-clean');
var combineMq = require('gulp-combine-mq');
var spritesmith = require('gulp.spritesmith');​
Теперь, когда подключены все необходимые модули, можем приступить в созданию задач сборки frontend. Но прежде нужно создать структуру папок ресурсов по такому принципу, что создаем отдельные папки с исходными ресурсами и результирующими, в которых будут стили и скрипты, подготовленные для веб. Именно эти ресурсы будут подключены для сайта в yii\web\AssetBundle.

Создание папок ресурсов в web.

Создадим в директории web папку source c такой структурой:
sourse
    -sass
           -abstract
           -vars
           -vendor
           -style
           main.scss

В папке sass как понятно из названия, будут содержаться scss файлы, которые разделены по разным папкам и собраны в одном файле main.scss.
Структура папок может быть какая угодно. В интернете можно найти различные варианты создания структуры папок. Все зависит от личных предпочтений.

В папке abstract будем содержать файлы миксинов и функций _mixins.scss и _functions.php. Обратите внимание на нижний слеш в начале имени файла, который позволяет запретить интрепритатору конвертировать этот файл в момент, когда мы будем конвертировать scss файлы в файлы стилей css. Единственный файл, который будеть обработан - main.scss, в котором будут включены и собраны в одно целое все файлы scss из папки sass. В папке vars будут файлы, содержащие переменные: _colors.scss, _fonts.scss и т.п. Папка vendor будет содержать какие-либо библиотеки, напимер bootstrap. В папке style будут основные стили сайта, в которых будем использовать арсенал из остальныз директорий, указанных выше: миксинов, переменных и прочего.
Файл main.scss может выглядеть вот так:
@charset 'UTF-8';

// 2. Vendors
@import
'var/fonts',
'vendor/my-bootstrap/main';

@import
'var/colors',
'var/img',
'var/icons',
'var/config';

@import
'abstracts/functions',
'abstracts/mixins';

@import
'style/callout',
'style/base',
'style/media';​
Подключаем все нужные scss файлы с помощью @import, при этом в названии файла не указываем нижнее подчеркивание и расширение. Так, _mixins.scss указываем как "absrtact/mixins".

Теперь создадим в web папку styles с такой структурой:
styles
       -css
       -css-min

Именно в эти папки будут генерироваться файлы scss.

Создаем инструкции для gulp.

Структуру папок для sass и css создали. Теперь опишем задачи в gulpfile.css:
var gulp = require('gulp');
var sass = require('gulp-sass');// подключаем gulp-sass
var minifyCss = require('gulp-clean-css');//минификация css
var rename = require('gulp-rename');
var notify = require("gulp-notify");
var autoprefixer = require('gulp-autoprefixer');
var clean = require('gulp-clean');
var combineMq = require('gulp-combine-mq');
var spritesmith = require('gulp.spritesmith');

//==============================================================================
//**************************  FrontEnd  ****************************************
//==============================================================================
//ПУТИ
var F_webDir = 'frontend/web/';

var F_sourseDir = F_webDir + 'source/',
    F_sassDir = F_sourseDir + 'sass/',
    F_sassMainFile = F_sassDir + 'main.scss';

var F_destCssDir = F_webDir + 'styles/css/',
    F_destCssMinDir = F_webDir + 'styles/css-min/';    

var sassOptions = {
    outputStyle: 'nested',
    precison: 3,
    errLogToConsole: true,
};

//------------------------------------------------------------------------------
//                  компиляция sass
//------------------------------------------------------------------------------
gulp.task('front:compileSass', ['front:clean'], function(){
  return gulp
    .src([F_sassMainFile])
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(autoprefixer({
            browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'],
            cascade: false
        }))
    .pipe(combineMq({
        beautify: false
    }))    
    .pipe(gulp.dest(F_destCssDir))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifyCss({processImport: false}))
    .pipe(gulp.dest(F_destCssMinDir))
    .pipe(notify("front:compileSass was compiled!"));
});

// Очистка перед новой записью
gulp.task('front:clean', function() {
  return gulp.src([F_destCssDir, F_destCssMinDir], {read: false})
    .pipe(clean())
    .pipe(notify("front:clean was compiled!"));
});

//------------------------------------------------------------------------------
//Создание спрайтов
//------------------------------------------------------------------------------
gulp.task('sprite', function () {
    var spriteData = gulp.src(F_webDir + 'img-styles/icons48X48/*.png').pipe(spritesmith({
      imgName: 'sprite-icons48X48.png',
      cssName: 'sprite-icons48X48.scss'
    }));
    return spriteData.pipe(gulp.dest(F_webDir + 'img-styles/sprite-icons48X48/'));
});


//------------------------------------------------------------------------------
//Наблюдение за файлами. (запуск из консоли - gulp watch)
//------------------------------------------------------------------------------

gulp.task('watch', function(){
    
    gulp.watch(F_sassDir + '**/*.scss', [
        'front:clean', 
        'front:compileSass', 
//        'front:combineMq'
                                    ]);
    
});

//тестируем
gulp.task('hello', function() {
  console.log(F_sassDir + '**/*.scss');
});​
Теперь можем перейти в терминале в корень нашего yii2 приложения и запустить команду gulp watch    которая соответствует задаче watch из gulpfile.js . После того, как команда выполнена, мы можем вносить изменения в файлы scss и при сохранении gulp будет автоматически заменять css файлы на актуальные. Пути, где расположены файлы sass и куда сохранять стили указаны в gulpfile.js.

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

Подключение ресурсов в AssetBundle.

Подключим файлы стилей, которые генерирует gulp в прилажение через yii\web\AssetBundle:
<?php

namespace frontend\assets;

use yii;
use yii\web\AssetBundle;

/**
 * Main frontend application asset bundle.
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [];
    public $js = [];
    
    public $jsOptions = [
        'position' => \yii\web\View::POS_END,
    ];
    
    public $depends = [
        'yii\web\YiiAsset',
        
    ];
    
    public function init()
    {
        if (YII_ENV_DEV)
        {
            $this->css = [
                'styles/css/main.css',
            ];
            
        }else if(!YII_ENV_DEV){
            $this->css = [
                'styles/css-min/main.min.css',
            ];
            
        }
        
        parent::init();
    }
    
    
}
​
Далее укажем в файле видов подключаемый пакет ресурсов:
frontend\assets\AppAsset::register($this);​

Итоги.

Теперь можно работать непосредственно с файлами scss, которые с помощью  gulp watch будут генерировать и обновлять css, подключенные к сайту. После каждого изменения sass нужно лишь обновить страницу, чтобы посмотреть изменения стилей на сайте. При этом можно настроить gulp так, чтобы страница в браузере обновлялась автоматически когда меняются стили, но я предпочитаю обновлять браузер "вручную". На этом все. Пользуйтесь таким полезным инструметом как gulp и пишите комментарии и влпросы. Буду рад дискуссии.

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

Если Вам был полезен материал на моем сайте, поддержите пожалуйста мой проект, чтобы о нем узнали другие люди - кликните plizz :) на иконку в соц. сети, чтобы поделиться материалом с другими.