Настройка и использование Laravel Elixir

Первым делом нам понадобится скачать и установить node.js скачав готовый пакет с инсталлятором с официального сайта. Ничего сложного. Нас интересует node package manager, при помощи которого мы установим Laravel-elixir, Gulp, Bootstrap и jQuery.

Для установки Laravel и PHP пакетов мы используем Composer. Для JavaScript библиотек и расширений для фронтэнда мы используем npm. Всё просто.

Установим Gulp глобально. Gulp - это менеджер задач, который помогает выполнять рутинные задачи с CSS и JS файлами проекта. Например, минифицировать.

npm install --global gulp

Необходимые в нашем приложении пакеты мы можем описать в секции зависимостей файла package.json.

dependencies": {

"laravel-elixir": "^3.0.0",

"bootstrap-sass": "^3.0.0"

}

Команда npm install установит эти пакеты и их зависимости.

Можно устанавливать пакеты прямо из терминала. Название и версия установленного пакета автоматически будут добавлены в package.json.

	npm install jquery --save

Файлы стилей, которые мы собираемся использовать, можно найти в папке resources/assets. Нам нужен фал стилей app.sscs. В этом фале уже прописан путь к фалам bootstrap-sass. Нужно просто раскомментировать строку.

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Дальше создадим фал скриптов и подключим jQuery и скрипты Bootstrap.

window.$ = window.jQuery = require('jquery')

require('bootstrap-sass');

$( document ).ready(function() {

console.log(Hello App);npm

});

Настроим задачи Gulp. Соберём файлы скриптов и стилей и публикуем их. Сгенерируем версии для обновления кеша при изменении наших фалов. Скопируем шрифты.

elixir(function(mix) {

mix.sass('app.scss');

mix.browserify('app.js');

mix.version(['css/app.css', 'js/app.js']);

}

Собираем файлы проекта и публикуем их.

	gulp

А если проект готов к использованию то публикуем минифицированные файлы.

	gulp --production

В шаблоне мы обращаемся к нашим фалам при помощи функции elixir.

<link rel="stylesheet" href="{{ elixir('css/app.css') }}">

<script src="{{ elixir('js/app.js') }}"></script>

Laravel 5.2 Laravel Видеоурок