Евроремонт по-ларавельски

Mar 26, 08:41 am Категория:

Каждый фреймворк имеет раздел типа “Быстрый старт”. В этом разделе в духе “3 клика, 2 минуты, готовый результат” рассказывается о том, как просто и быстро можно начать пользоваться их замечательным продуктом. И это правда. Но только про первую дозу, которая, как все знают, бесплатна. А потом уже не соскочить и приходится платить. Временем, деньгами, нервами и… В общем – платить. В публикации по выбору фреймворка для фронтенда набежал нехилый список дополнений, делающих интеграцию, разработку и внешний вид более лучшими. Уточню.

Для начала работы с Twitter Bootstrap требуется совсем немного. Базовый шаблон выглядит просто и понятно

<!DOCTYPE html>
<html lang=“en”>
<head>
    
    
    
    Bootstrap 101 Template

    




    
    
    
  
  
    

Hello, world!

</body> </html>

Подключены свежие стили и скрипты, включая jQuery. Можно исполнять весь репертуар. Довольно убогий, если честно. Да, тема тоже подключена, но… Одним словом, дорабатывать и дорабатывать. И это без учёта “мобайл фёст” и интересов мобильных пользователей: “вес” минифицированных стилей и скриптов почти 300 килобайт. И вроде грузить их пользователю всего один раз, но это не факт и далеко не у всех топовые девайсы в карманах. И да, это ведь ещё без текстов, картинок и прочего контента, за которым пользователь зашёл. Ведь никто не думает, что он за скриптами и стилями здесь, правда? И ещё есть деталь: чем меньше количество подключаемых файлов при одинаковом их размере, тем лучше. В идеале этих файлов может быть два: в начале со стилями и в конце со скриптами. А можно и вообще в тело документа шить. Короче, с этим нужно что-то делать.

Самый простой способ – это зайти на страницу Customize and download и на ней “галочками и точечками” отсечь лишнее, выбрать нужное и результат скачать. Даже можно с цветами, бордюрами и размерами поиграться. Выглядит неплохо. Но это при условии, если уже ничего не нужно менять. А если то одно прибавится, то другое убавится, а то опять всё взад вертать? Не находишься, говорят про такое в народе. И вот для этого придуманы всякие умные штуки из списка на предыдущей странице.

Сейчас я перечислю действия для создания прокачанного центра разработки фронтенда на базе Laravel. Рекомендую перед исполнением подобного сольного номера определиться с набором установки и дочитать текст до конца. А то вдруг оно и не нужно совсем.

Во-первых, совсем не обязательно использовать тот же набор, что и я. Самое главное понять: в Laravel легко встраивается механизм сборки css/js файлов из различных полуфабрикатов. Я для себя выбрал Bootstrap и SASS. Этот выбор позволяет легко подключать и другие популярные штуки типа Font Awesome и им подобные. Но можно использовать LESS, CoffeeScript, Stylus и что там ещё существует. Кстати, это касается не только текста. Можно собирать картинки в спрайты и ещё какой-нибудь непотребщиной заниматься. Дело личного выбора.

Итак, определились и поехали.

1. Проверяем наличие установленной Node.js

node -v

Получили версию? Идём дальше. Нет? Устанавливаем. rpm, dpkg, yum, apt-get или иной подходящий менеджер пакетов в руки. И главное не забыть установить npm. Без него не получится. С установленным npm ставим глобально gulp и bower. Можно и в одну строку, если что. Я такие действия от рута провожу. Будет ли это работать от локального пользователя не проверял, но думаю, что нет.

npm install --global gulp
npm install --global bower

Теперь в корне проекта необходимо создать файл .bowerrc для указания места загрузки всякого-разного.

{
  "directory": "resources/assets/vendor"
}

И запускаем

npm install bower

Теперь нужно проконтролировать попадание директории node_modules в файл .gitignore. Создаём bower.json примерно такого содержания

{
  "name": "Super Site",
  "version": "0.0.0",
  "description": "My superb site",
  "ignore": [
    "**/.*",
    "node_modules",
    "resources/vendor",
    "test",
    "tests"
  ]
}

Если лень его создавать руками, можно запустить процесс его умной генерации

bower init

И добавить нужные пакеты, наборы и компоненты в bower.json

bower install jquery --save
bower install bootstrap-sass --save
bower install fontawesome --save
bower install bootswatch --save

Это богатство установится по указанному ранее пути. Если bower.json заполнялся полностью вручную, то нужно выполнить команду

bower update

Таким образом собрано всё, что должно быть обработано. По мене необходимости можно добавлять или удалять что-либо. Теперь к настройке собственно gulp.

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

    "bootstrap-sass": "^3.0.0"

из файла package.json. Важно не забыть убрать запятую в предшествующей строке. Иначе будут ошибки при чтении json файла. И запускаем

npm install

Этот процесс может занять какое-то время. Пока он идёт, я советую в шаблон страницы сайта, в том месте где должны находиться стили и скрипты сделать две простых вставки для стилей и скриптов, соответственно:



Это позволит избежать проблем с кэшированием подключаемых файлов при отладке. И последний штрих: донесение до gulp своих пожеланий. У всех они разные, но возможно всё. На автомате файлы могут копироваться, сливаться, обрабатываться препроцессорами, минифицироваться и всё это может происходить как по требованию, так и по факту внесения изменения в исходники.

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

├── resources
|   └── assets
|       ├── sass
|       |   └── style.sass
|       └── vendor
|           ├── bootstrap-sass
|           ├── font-awesome
|           └── jquery
|
├── public
    └── assets
        ├── css
        ├── fonts
        ├── images
        └── js

Таким образом, мне нужно после каждого обновления bower копировать то, что не нуждается в последующей обработке. Обычно это картинки и шрифты. Так же сначала можно копировать минифицированные файлы стилей и скриптов, если они подключаются отдельно и процессе разработки не принимают участия. А устраивать полную сборку непосредственно перед деплоем. А можно отдельно стили и скрипты процессить. Чисто время сэкономить. Короче, сценариев очень много. Нужно научиться выбирать правильные.

В качестве теста я хочу jquery.js и bootstrap.js копировать во временную директорию, а шрифты скопировать в public/assets/fonts только когда я явно это укажу. На регулярной основе компилировать файл resources/assets/style.sass с подключенными Bootstrap и Fonf Awesome и получать style.css в public/assets/css, а из скопированных ранее во временную директорию скриптов компилировать style.js в public/assets/js. Для этого нужно отрыть файл gulpfile.js и привести его к такому виду:

var gulp = require('gulp');
var elixir = require('laravel-elixir');
gulp.task("copyfiles", function() {
  gulp.src("resources/assets/vendor/jquery/dist/jquery.js")
    .pipe(gulp.dest("resources/assets/js/"));
  gulp.src("resources/assets/vendor/bootstrap-sass/assets/javascripts/bootstrap.js")
    .pipe(gulp.dest("resources/assets/js/"));
  gulp.src("resources/assets/vendor/bootstrap-sass/assets/fonts/**")
    .pipe(gulp.dest("public/assets/fonts"));
  gulp.src("resources/assets/vendor/font-awesome/fonts/**")
    .pipe(gulp.dest("public/assets/fonts"));
});
elixir(function(mix) {
  // Combine scripts
  mix.scripts([
      'js/jquery.js',
      'js/bootstrap.js'
    ],
    'public/assets/js/script.js',
    'resources/assets'
  );
  // Compile Sass
  mix.sass('style.sass', 'public/assets/css/style.css');
  mix.version(['assets/css/style.css', 'assets/js/script.js']);
});

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

/* Style SASS */
@import url(http://fonts.googleapis.com/css?family=Roboto)
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab&subset=latin,cyrillic-ext)
/* Bootstrap */
@import "../vendor/bootstrap-sass/assets/stylesheets/_bootstrap-compass.scss"
@import "../vendor/bootstrap-sass/assets/stylesheets/_bootstrap.scss"
/* Font Awesome */
@import "../vendor/font-awesome/scss/font-awesome.scss"

Теперь при выполнении команды gulp copyfiles, будет производиться копирование шрифтов и скриптов. А при запуске gulp будет компилироваться файл стилей style.css и скрипты будут “сцепляться”. Я намеренно прописал пути явно, а не через переменные, чтобы было понятно, откуда, что и куда. Если хочется при каждом изменении исходников стилей запускать процесс компиляции, запускаем волшебную команду gulp watch. Вот вкратце и всё. Далее нужно просто создать свой сценарий, настроить его, добавить нужное, удалить лишнее и разрабатывать, разрабатывать и разрабатывать.

Маленький фокус: чтобы полученные при компиляции файлы минифицировались, нужно запускать вот такую команду:

gulp --production

И немного радости в конце статьи. Все эти действия необходимо совершать только на инстансе, настроенном под разработку фронтенда. Другие версии и продакт могут просто своевременно получать готовые минифицированные версии файлов style.css и script.js, которые заранее в нужных местах прописаны. Как это будет происходить, дело исключительно внутреннее. Хоть через git, хоть с помощью флэшек. Главное, чтобы техпроцесс не нарушался.

Теги этой статьи: , , , , , ,

 

Комментарии

2017-06-25 5:26 am , Оставь комментарий