Встраивание Foundation в Laravel с помощью Elixir

Встраивание Foundation в laravel с помощью Elixir

Встраивание Foundation в laravel с помощью Elixir

Что такое Elixir?

Elixir — это компонент Laravel, позволяющий без проблем встраивать scss, sass, less компоненты в ваш проект. С помощью данного компонента очень легко можно подключить любые фронт-энд пакеты из npm, скомпилировать их, вести версии.

Инструкция

Для начала, чтобы скомпилировать исходный код фронтэнд библиотек, как известно, вам необходимо установить node с менеджером пакетов npm. Все достаточно просто. Скачиваете Node.js с официального сайта, далее, проверяете на наличие менеджера пакетов npm. Если его нет, на официальном сайте есть полная инструкция как установить его. Дальнейшие все действия необходимо будет проводить в командной строке, которые необходимо запускать в корне проекте и желательно от имени администратора.

Далее, для компонента laravel elixir необходимо установить глобальный пакет gulp.

npm install --global gulp-cli

По сути, далее начинается обычная работа с npm. Все что вы делаете в корне проекта, запускаете

npm install

Разработчики laravel уже включили необходимые библиотеки в package.json для компиляции пакетов.

Для того чтобы установить foundation, возьмем к примеру foundation-sites, набираем команду:

npm install jquery
npm install motion-ui
npm install foundation-sites

Так как foundation зачастую использует motion-ui и jquery, я также установил эти пакеты.

Далее ждем, пока все загрузится, после того как данные загрузились и пакет установился, нам необходимо сконфигурировать файл app.scss, который находится в папке resources/assets/sass.

У меня он выглядит примерно так:

@import 'motion-ui';
@include motion-ui-transitions;
@import "foundation_settings";
@import 'foundation';
@include foundation-everything;

Далее я создал файл foundation_settings в той же директории, где я храню настройки foundation. Шаблон можно взять из самого пакета foundation в подпапке _settings. По сути, можно работать в нем сразу, никто не запрещает.

Далее, необходимо сформировать gulpfile.js для компиляции кода. У меня он выглядит примерно так:

var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
 mix.sass(
 [
 'app.scss',
 ],
 './public/assets/css/style.css',
 {
 includePaths:
 [
 './node_modules/motion-ui/src',
 './node_modules/jquery/src',
 './node_modules/foundation-sites/scss',
 ],
 outputStyle: 'expanded'
 }
 );

 mix.babel(
 [
 './node_modules/foundation-sites/js/foundation.core.js'
 ],
 'resources/assets/js/foundation.js');

 mix.scripts(
 [
 './node_modules/jquery/dist/jquery.js',
 './node_modules/what-input/what-input.js',
 './node_modules/motion-ui/dist/motion-ui.js',
 './resources/assets/js/foundation.js',
 './resources/assets/js/script.js'
 ],
 './public/assets/js/app.js'
 );

 mix.version(['./public/assets/css/style.css', './public/assets/js/app.js']);
});

Первая команда собирает все наши sass файлы в style.css. Далее, так как js составляющая foundation построена на стандарте ECMAScript 6 and 7 and JSX, перед добавлением ее в общий скрипт, необходимо сначала с помощью babel преобразовать ее в обычный javascript. Собственно далее мы собираем все необходимые js компоненты в файл app.js.

При желании, как я сделал, вы можете вести версии этих файлов, это делается с помощью команды version.

Для компиляции проекта, вызовите команду:

gulp

Для компиляции и минификации(для продакшн версии) используйте команду:

gulp --production

Для дальнейшей перекомпиляции файлов при их изменении, запустите:

gulp watch

После компиляции файлов, у вас появятся в папке public, по заданному пути файлы стилей и скриптов.

В laravel в дальнейшем, особенно если вы ведете версии этих файлов рекомендуется использовать функцию помощник elixir. И уже с помощью нее подключать скомпилированные стили и скрипты.

<link rel="stylesheet" href="{{ elixir('assets/css/style.css') }}">
<script src="{{ elixir('assets/js/app.js') }}"></script>

Полную документацию и инструкцию по использованию вы можете найти на официальном сайте laravel.

Похожие записи
  • Как запустить веб приложение через NP... Как запустить веб приложение через NPM с помощью serve. Есть множество способов запустить свои web html проекты. Для этого потребуется веб-сервер. Есть несколько простых веб-серверов для nodejs, которые можно использовать для запуска приложений. Это очень удобно для разработки и отладки. В данной статье не берем Express, так как он довольно сложен для настройки и использования. [...]
  • Как отследить все Javascript события ... Привет, сегодня я хочу рассказать тебе о простом но очень полезном методе, который позволяет отследить все Javascript события в Chrome. Он тебе поможет отследить все события, все вызовы всех функций на твоем сайте. Очень полезная команда для отладки фронт-энда. [...]
  • Как пользоваться популярными трекерам... Как пользоваться популярными трекерами без стороннего софта, прокси серверов или расширений Все просто. Недавно я писал про один из способ улучшить работу вашего интернета, который вы можете найти здесь и здесь. Днс сервера гугла помогут вам с этим, но могут и не помочь, как было у меня, потому как провайдер блокировал весь трафик, поступающий с данного [...]
  • ORM для CodeIgniter Недавно я писал про свой небольшой проект — доработку для CodeIgniter. Прочитать предыдущие статьи вы можете здесь. Здесь пойдет речь о упрощенной версии этого проекта, которую вы можете найти здесь. Собственно второй проект является упрощенной версией первого, так как не содержит моих методов для получения данных. Если вы искали именно это, то прошу. Генераторы моделей [...]
  • Как подключить CodeIgniter, PHP к MSS... Настройка SQL SERVER для подключения по TCP/IP Для начала, чтобы иметь возможность подключиться к SQL Server’у, нужно включить в настройках доступ и установить Native Client SQL. Если у вас он не установлен, скачайте с официального сайта Microsoft. Чтобы открыть сетевой доступ к SQL SERVER нужно выполнить следующие шаги: Открываем диспетчер конфигурации SQL Server Перейти на [...]

Пока нет комментариев

Добавить комментарий