Перейти к содержимому


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 96 Вне конкурса за определение пользователя месяца

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 85.5 Вне конкурса за определение пользователя месяца

  • Фотография yuran
    #3

    yuran (yurbol.ru)
    Очков активности: 82.5 0 тем, 55 сообщений, 1 балл репутации

  • Фотография BLIK
    #4

    BLIK
    Очков активности: 51 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #5

    Mandarin
    Очков активности: 51 0 тем, 34 сообщения, 1 балл репутации

  • Фотография WGN
    #6

    WGN (worldgamenews.com)
    Очков активности: 45 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 31.5 2 темы, 15 сообщений, 1 балл репутации

  • Фотография алексс
    #8

    алексс
    Очков активности: 27 2 темы, 12 сообщений, 1 балл репутации

  • Фотография Андрей WPMasterKZ
    #9

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 19.5 0 тем, 13 сообщений, 1 балл репутации

  • Фотография Scool
    #10

    Scool (stostory.ru)
    Очков активности: 19.5 3 темы, 4 сообщения, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 15.11.2018
Топ 5 участников по репутации


ЛП: Основы работы с Gulp

#1 fedornabilkin

fedornabilkin
  • Модератор
  • 1132 сообщений
  • Репутация: 193
2

Отправлено 10 April 2018 - 16:53

Gulp за вас сделает много полезной работы и только поэтому стоит использовать его возможности. Чтобы запускать gulp, на сервер необходимо установить node.js, как это делали в этом посте. Или устанавливаем командой

sudo apt-get install -y nodejs

Затем необходимо перейти в директорию проекта и установить gulp с помощью пакетного менеджера npm. В корне проекта будет создана директория node_modules, куда npm распакует все необходимые зависимости для работы gulp.

cd /var/www/site.dev/
npm install gulp

Дополнительные пакеты:

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

  1. gulp-sass - для компиляции файлов sass в css
  2. gulp-clean-css - для очистки файлов стилей от комментариев и минификации
  3. gulp-rename - переименование файла
  4. gulp-gzip - сжатие js-файлов
  5. gulp-concat - объединение мелких файлов в один
  6. gulp-uglify - минификация js-файлов

Установим их с помощью npm все сразу (--save-dev значит на время разработки) и временно забудем об этом.

npm install --save-dev gulp-sass gulp-clean-css gulp-rename gulp-gzip gulp-concat gulp-uglify

Структура файлов:

Пока расширения устанавливаются, создадим структуру директорий и файлов для проекта, которая позволит быстро отыскивать нужное правило. Даже, если у вас небольшой проект, не стоит брезговать продумыванием архитектуры, потому что из маленьких проектов вырастают большие и неповоротливые. Столяр, слесарь и любой другой уважающий себя мастер раскладывает все по полочкам, чтобы не искать нужный инструмент. Так сделаем и мы.

 

Т.к. наш проект основан на базе фреймворка Yii2, то и файлы стилей и js будут от директории, доступной из web. Создаем директорию frontend/web/sass и формируем там структуру.

Для удобства создадим файл README.md и опишем в нем структуру.

main.sass - файл, в который объединяются все стили
base/ - глобальные стили по проекту. Сброс, шрифты, цвета, поля, отступы и т.д.
components/ - отдельные компоненты (кнопки, ссылки, картинки, модалки, слайдеры, инпуты и т.д.)
layout/ - стили для основного макета (хедер, футер, меню, контент, сайдбар)
pages/ - стили для страниц articles.sass, news.sass, products.sass, education.sass

В файле main.sass у нас будет список файлов, которые необходимо импортировать. Это глобальные файлы из каждой директории (base, components ...)

@import base/glob
@import components/glob
@import layout/glob
@import pages/glob

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

Содержимое base/glob.sass будет приблизительно таким

@import reset
@import colors
@import sizes
@import typography

В файле base/reset.sass указываем правила для обнуления дефолтных значений браузера. Я приверженик botstrap, поэтому обычно не заморачиваюсь по обнулению. Для примера, файл будет выглядеть приблизительно так

Спойлер

 

 

Обратите внимание (кто не знаком с синтаксисом sass), что мы не используем фигурные скобки и вместо точкозапятой ( ; ) используем перенос строки. Правила смещаем табуляцией. Смело оставляем комментарии, потому что gulp их подчистит без проблем.

 

В файле colors.sass в основном будут хранится переменные с цветами. Переменные стоит обзывать аккуратно, чтобы потом не путаться в них и они не перекрывали друг друга. Цвет называем обычно, цвет бэкграунда, бордера и т.д. с соответствующим префиксом.

$gray-dark: #31302f
$gray-light: #B8BABC
$green-light: #8DC63F
$green-dark: #55B949
$orange: #f78f21
$violett: #675c94
$blue: #225c95
$bg-light: #f4f2f0

Теперь более менее понятно (надеюсь) в какие файлы и какие правила добавлять. При создании нового файла, его необходимо импортировать в общую кучу из файла glob.sass в своей директории. При создании новой директории, создаем там файл glob.sass и не забываем его импортировать в main.sass.

 

 

 

Задачи для gulp:

Раскидали правила по разным файлам и теперь их все надо собрать. В корне проекта создаем gulpfile.js и запиливаем в него следующее содержимое, которое сейчас же и обсудим. Странно, но разматывать логику работы галповского файла лучше не с начала. Есть у галпа задачи, которые он выполняет. Задачи обычно называют так, что было понятно, что они делают, потому что с ростом проекта, может вырасти и список задач галпа. Создадим задачу compress, которая будет запускать задачу compress-css.

gulp.task('compress', ['compress-css']);

Теперь, если запускаем задачу compress-css, то надо ее описать. Эта задача в свою очередь запускает другую задачу (minify-css) и, после ее выполнения, выполняет свою. Берет файл стилей, сжимает его и кладет обратно. Чтобы заработал gzip(), надо его подключить в начале файла.

gulp.task('compress-css', ['minify-css'], function () {
return gulp.src(work_dir + '/web/min/all.min.css')
.pipe(gzip())
.pipe(gulp.dest(work_dir + '/web/min/'));
});

Т.к. файл стилей all.min.css появляется только после выполнения задачи minify-css, то вот и она. Дожидается выполнения задачи sass-css и выполняет свою. Берет файл main.css, минифицирует его (удаляет лишние переводы строк, пробелы, точказапятые и т.д.), удаляет комментарии и содержимое кладет в all.min.css, который нам и нужен.

gulp.task('minify-css', ['sass-css'], function () {
return gulp.src(work_dir + '/web/css/main.css')
.pipe(concat('all.min.css'))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest(work_dir + '/web/min/'));
});

А файл main.css появляется в результате выполнения задачи sass-css. Задача берет файл main.sass, компилирует из него (в него подключены несколько glob.sass, а в них подключены остальные файлы *.sass) общий файл стилей main.css.

gulp.task('sass-css', function () {
gulp.src(work_dir + '/web/sass/main.sass')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(work_dir + '/web/css/'));
});

Все сопутствующие пакеты, которые необходимо использовать в задачах, должны быть установлены и подключены в начале файла. Плюс создадим переменную с названием директории, в которой собираем файлы стилей.

const gulp = require('gulp');
const sass = require('gulp-sass');
const minifyCss = require('gulp-clean-css');
const rename = require('gulp-rename');
const gzip = require('gulp-gzip');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
var work_dir = 'frontend';

Полный листинг gulpfile.js. Тут еще добавлены задачи по обработке js-скриптов.

Спойлер

 

 

 

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

gulp compress

Команды галпа выполняем из той директории, в которой находится файл gulpfile.js


 

 

  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.





Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru