Основы Laravel 5: Управление ресурсами приложения

(0:00)
(Давайте отдохнём от нашего PHP и поговорим об управлении ресурсами. Мы используем Laravel Elixir и Gulp, чтобы сделать этот процесс невероятно простым. Итак, прежде чем мы посмотрим на наш gulpfile, вы видите здесь, что Laravel включает в себя файл package.json. Большинство инструментов для построения, типа Gulp и Grunt, используют то, что мы называем Node.js. Вам нужно чтобы он был установлен на вашем компьютере. Вы можете проверить его наличие, выполнив следующую команду:

shnode -v

И если его у вас ещё нет, то это не страшно. Просто по-быстрому установите его.

(0:30)
(Вы можете сделать это, посетив nodejs.org, нажав install, и, меньше чем за минуту вы будете готовы. Это очень, очень легко. ОК, как только вы его поставили, нам нужно установить наши зависимости. Как и в composer.json, который будет находить разные зависимости, то же самое верно и для нашего файла package.json. Но здесь они специфичны для node. Так что, мы просто должны запустить:

shnpm install

Очень похоже на shcomposer install. Теперь, если вы запустите это и увидите много красного, вам просто нужно запустить:

shsudo npm install

(1:00)
(и дать на выполнение тридцать секунд,. Хорошо, кажется всё сделано, давайте начнём. Вернёмся к нашему gulpfile. Когда вы устанавливаете новую копию Laravel, он уже на самом деле будет там. И предполагает по умолчанию LESS. Так что, когда мы запускаем это, мы говорим: «Мы хотим вызвать или скомпилировать LESS», так что когда мы видим это, мы говорим, что хотим чтобы LESS сработал на указанный файл. И здесь будет идти поиск resources/assets, папку less, а затем app.less.

(1:30)
(Но что касается меня, я вроде как предпочитаю Sass, и вот что замечательно насчёт Elixir в Laravel. Если мы хотим переключиться на него, измените здесь на sass, обновите имя файла, и всё готово:

mix.sass('app.scss');

Теперь Laravel будет искать resources/assets/sass, а затем имя файла. Теперь, в этом случае, у нас особо здесь ничего нет, всего лишь пара объявлений. Так что теперь, я хочу скомпилировать это в обычный CSS. Хотя, если честно, в этом состоянии, это и есть просто CSS.

(2:00)
(Но на самом деле, у вас здесь будут некоторые переменные или модули или plartials и тому подобное. Как бы то ни было, давайте пойдём дальше и запустим:

shgulp

И поскольку мы хотели обработать наш sass, мы вызвали его и получили уведомление. Вы увидите, что он компилируется в этот файл вот здесь (app.css). Довольно здорово, не так ли? Теперь, что если вы не хотите запускать gulp вручную каждый раз? Вы просто хотите следить за вашими изменениями и перезапускать ваш Sass. Хорошо, мы просто запустим:

shgulp watch

(2:30)
(И готово. Так что теперь, разница в том, что, да, мы скомпилировали наш Sass, но мы наблюдаем за этим файлом на наличие изменений. Так почему бы нам не сделать:

@import 'pages/home';

Мы запускаем это, и очень быстро получим ошибку, потому что у нас нет этого файла. Давайте создадим его сейчас, pages/home.scss. И просто немного кода-заполнителя здесь. Мы запускаем это, он скомпилирован, так что если мы посмотрим на наш файл app.css, вы увидите, что всё это отражено здесь.

(3:00)
(Очень, очень круто. Теперь, что ещё мы можем сделать? Я нажму Ctrl+C, чтобы выйти отсюда. Если мы вернёмся к нашему gulpfile, может быть, вы любите CoffeeScript. Хорошо, просто добавим .coffee(). И вы всё сделали. Теперь он будет компилировать все файлы в resource/assets/coffee, и почему бы нам не создать здесь файл module.coffee:

class Module

Сохраним, и теперь, если мы снова запустим gulp, это вызовет наш Sass, но также и наш CoffeeScript.

(3:30)
(И вы увидите, что это отражено здесь. Так круто. Но как насчёт других штук, например, часто вам нужно объединять или сцеплять несколько файлов. Вы уже наверное знаете, что лучше иметь одну большую таблицу стилей вместо десяти отдельных, потому что, когда у вас их десять, то, это десять HTTP-запросов . И лучше объединить их все в один и просто запросить как один файл. Опять же, с Elixir, это очень просто.

(4:00)
(Мы можем использовать styles() для объединения таблиц стилей и scripts() для объединения скриптов. Мы могли бы продолжать делать это свободно, например:

jsmix.sass('app.scss').coffee();

Или, если вы предпочитаете, то можете просто создать новый mix. Как вам угодно. Так что давайте составим вместе несколько таблиц стилей. Может быть, в вашей директории css, у вас есть какой-то файл поставщика, который вы загрузили. Как насчёт нормализовать его? Поставим заглушку. Normalize — это просто популярная библиотека, которая нормализует все различные элементы от браузера к браузеру.

(4:30)
(ОК, так что допустим, мы хотим объединить их в одно целое, а затем просто сделать единственный запрос от нашей главной страницы. Вот как это сделать. Вернёмся к нашему gulpfile и скажем: «Я хочу начать с normalize.css в верхней части, а затем добавить к нему app.css», тогда:

jsmix.styles([
    'vendor/normalize.css',
    'app.css'
]);

Но теперь, один вопрос здесь. По умолчанию Laravel предполагает, что все ваши CSS будут размещены в resources/css.

(5:00)
(Но в нашем случае, мы заинтересованы в public/css. Так что мы можем переопределить этот путь в качестве третьего параметра. Вторым параметром является путь выходного каталога или имя файла. Я покажу вам это буквально через минуту. Но тут мы добавим третий параметр для базового каталога public/css:

js], null, 'public/css');

Так что теперь, потому как мы добавили это, мы говорим: «Ищите в public/css/vendor/normalize.css». Хорошо, давайте попробуем.

(5:30)
(Мы запускаем Gulp, и на этот раз сработает Sass, а затем CoffeeScript, и далее объединяем несколько таблиц стилей. Таким образом, у нас теперь должен быть файл all.css, где у нас сначала идёт Normalize, а затем наш основной файл app. Так круто. Но что, если вы хотите сжать это в процессе? Для производства, вы хотите минимизировать всё что можно. Хорошо, это достаточно легко. Просто выставьте флаг --production и вы всё сделали:

shgulp --production

Проще и быть не может. Так что, мы возвращаемся, и теперь у нас есть вот что.

(6:00)
(Давайте поманипулируем здесь. Я удалю весь этот CSS. И теперь мы хотим специальный выходной файл. Как насчёт:

js'public/output/final.css'

После того, как мы объединим всё вместе, это файл, на который мы хотим ссылаться из нашего представления. ОК, мы снова запускаем Gulp, и теперь у вас есть файл – output/final.css. И, как вы можете себе представить, мы не будем повторяться, но то же самое верно и для ваших скриптов. Там по умолчанию будет resources/js.

(6:30)
(Но если вы хотите изменить это, то просто установите третий параметр. Так что, может быть, у вас есть что-то вроде:

jsmix.scripts([
    'vendor/jquery.js',
    'main.js',

А потом что-то ещё:

js'coupon.js'],

И вы хотите всех их отправить в:

js'public/output/scripts.js',

И мы хотим, чтобы наш базовый каталог был:

js'public/js'

То вот так это может выглядеть. Снова мы сделали всё как можно проще.

(7:00)
(Как насчет некоторых других штук? Мы не будем рассматривать всё-всё. Для этого вы можете обратиться к документации. Но в основном, вы будете компилировать Sass или LESS. Если вы любите CoffeeScript, то вы будете работать с ним. Если захотите, чтобы сработали тесты, то вы можете сделать и это. Давайте сделаем mix.phpUnit(). Теперь, если мы переключимся назад и запустим Gulp, то он запустит наши тесты. И в данном случае, это не удалось. Давайте посмотрим почему. В tests/ExampleTest.php мы запрашиваем главную страницу home и хотим убедиться, что у нас есть код статуса 200.

(7:30)
(Но если вы помните, у нас ещё даже нет страницы home. Так давайте скажем:

Route::get('/', function() {

и просто пока что поставим здесь заглушку:

    return 'Home Page';
});

ОК, теперь, если мы запустим его снова, мы должны получить зеленый цвет и да, всё прошло нормально. Далее, очень похоже на Gulp watch, если мы хотим следить за нашими файлами и файлами PHP на предмет изменений, то я могу запустить:

shgulp tdd

Теперь попробуем это. Давайте временно закомментируем это, запустим, и получим ошибку.

(8:00)
(И дальше, если мы запустим это снова, изменения обнаружены, происходит перезапуск, и мы получаем зеленый цвет. Так что это очень хорошо. И, кстати, то же самое будет справедливо и для PHPphpSpec(). Просто прикрепите это и готово. И, наконец, последнее, что мы рассмотрим – это управление версиями файлов. Итак, представьте, что... Давайте просто удалим вот эти, кстати, чтобы начать с нуля. Мы хотим использовать Sass, так что:

jsmix.sass('app.scss');

(8:30)
(Далее, мы хотим объединить несколько таблиц стилей, так что:

jsmix.styles(['vendor/normalize.css', 'app.css'], null, 'public/css');

И базовый каталог будет public/css. ОК, так что если мы это запустим, то и правда, мы получим файл all.css прямо здесь. Но когда вы выложите это в производство, возможно ваш сервер будет кэшировать его на достаточно долгий срок. И таким образом, нам не придётся повторно загружать его каждый раз.

(9:00)
(Мы просто будем ссылаться на кэшированную версию, так? Что ж, это здорово, но когда дело доходит до принятия обновления, даже если нам нужно изменить что-то столь простое, как цвет (color: blue), после push в производство, ваш сервер будет по-прежнему ссылаться на закэшированную версию файла. Так что на самом деле, мы хотим использовать очистку кэша. Мы могли бы сделать это так, mix, и мы вызовем метод version(). Так что мы хотим задать версию для этого конкретного файла. Тогда мы могли бы сказать:

jsmix.version('public/css/all.css');

(9:30)
(ОК, на этот раз, если мы запустим его снова (Gulp), вы увидите, что у нас есть каталог build, и это место, где мы всё храним. И заметьте, что у него есть здесь уникальное расширение. Вот как мы получаем очистку кэша, когда делаем push. Позвольте мне проиллюстрировать это немного больше. Почему бы нам не сделать здесь какие-то изменения? Отступ сверху будет 400 пикселей:

padding-top: 400px;

Хорошо, когда мы запускаем это ещё раз, вы заметите, что расширение обновилось, как вы уже там видели.

(10:00)
(Так что теперь вы, наверное, думаете: «Ну, это круто, но как я могу работать с этим из моего представления?». Например, если мы идём к нашей главной странице, мы жёстко задаём файл css/app.css. И если мы обновим На имя с этим расширением, то как только мы сделаем изменение, то нам придётся снова обновлять его. Но на самом деле нет. Есть функция Elixir, которая вам здесь поможет. Так что пишем elixir, а затем ссылаемся на наш обычный путь:

elixir('css/all.css')

В принципе, если вам интересно, что будет происходить за кадром, Laravel прочитает наш manifest-файл (Rev-manifest.json) и выяснит, что этот файл на самом деле соответствует этой версии.

(10:30)
(И это то, на что мы будем ссылаться. Почему бы нам не попробовать? Если мы перейдем к браузеру, у нас здесь есть огромный отступ, который мы добавили. И вы увидите, что мы ссылаемся на него там. Теперь, давайте переключимся назад и поправим его. Откроем здесь и скажем, цвет должен быть фиолетовым (purple). Хорошо, Gulp watch у нас не запущен, поэтому мы должны повторно запустить его вручную.

(11:00)
(И на этот раз, если перейдём обратно в Chrome, ну, для начала, обратите внимание, что у нас было это старое расширение, начинающееся с нуля. Теперь если мы обновим страницу, вы увидите, что теперь мы ссылаемся на новый файл, и это должно быть отражено здесь, как вы видите. Хорошо, так что это было вашим введением в Elixir в Laravel. Он удовлетворяет все эти обычные нужды как можно более простым образом. Если вам нужно обработать ваш Sass или ваш LESS, или CoffeeScript, или вы хотите объединить несколько скриптов и таблиц стилей...

(11:30)
(Или вы хотите создать версии для очистки кэша, или вы хотите вызывать тесты... и ещё много других вещей. Так что поиграйтесь с этим, я думаю, вам понравится, и в следующем видео, мы вернёмся к нашему PHP.