Для установки 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>