Laravel Framework Russian Community
Вступление
Laravel Elixir предоставляет удобный и гибкий API для исполнения базовых Gulp-задач в вашем приложении. Он поддерживает несколько популярных CSS и JavaScript препроцессоров и инструментов тестирования. Декларации css и js выстраиваются в виде цепочки, что позволяет удобно пользоваться функционалом Elixir. Например:
Если даже вы не поняли сразу как начать работу со сборщиком Gulp и вашими медиа-файлами (assets), вы влюбитесь в Laravel Elixir. Однако вы не обязаны использовать его на этапе разработки вашего приложения. Вы сами можете выбрать инструменты для работы с вашими медиа-файлами (assets), ну и конечно вы можете не использовать их вовсе.
Установка и настройка
Установка Node
Перед вызовом Elixir, вы обязаны убедиться в том что Node.js установлен на вашем компьютере.
По умолчанию, все что вам нужно это Laravel Homestead; впрочем, если вы не используете Vagrant, тогда вы сможете легко установить Node.js пройдя по ссылке ссылка для скачивания Node.js.
Далее, вам потребуется Gulp как глобальный NPM пакет:
Если вы используете систему контроля версий, вы возможно захотите использовать npm shrinkwrap для блокировки ваших зависимостей NPM:
Выполнив эту команду хотя бы один раз, вы можете свободно добавлять npm-shrinkwrap.json в контроль версий.
Laravel Elixir
Остался всего один шаг для установки Elixir! После свежей установки Laravel, вы обнаружите файл package.json в корневом каталоге. Взгляните на ваш файл composer.json, он описывает зависимости Node вместо PHP. Вы можете установить описанные зависимости используя команду:
Запуск Elixir
Наблюдение за изменением ваших медиа файлов и скриптов (assets)
Работа со стилями
Файл gulpfile.js в корневой папке вашего проекта содержит все задачи Elixir’a, которые могут быть связаны между собой, что позволяет настроить процесс сборки и компиляции ваших файлов (assets) так как вам надо.
Так же вы можете объединить несколько Less файлов в один CSS файл. И снова скомплированный CSS файл будет сохранен в папке public/css/app.css :
Если вам потребуется изменить путь скомпилированного CSS файла, вы можете указать в методе less второй аргумент с нужным путем:
Обычный CSS
Source Maps (Карты ресурсов)
Source maps (Карты ресурсов) включены и работают из коробки. Для каждого скомпилированного файла вы найдете схожий *.css.map файл в папке скомпилированного файла. Эти карты позволяют вам преобразовать скомпилированные Less или Sass файлы для отладки в браузере.
Если вам не нужны source maps (карты ресурсов) для ваших CSS файлов, вы можете выключить их используя опцию:
Работа со скриптами
Elixir также предлагает несколько функций для работы с вашими JavaScript файлами, такими как компиляцию в ECMAScript 6, CoffeeScript, Browserify, минификацию, и простую конкатенацию в обычный JavaScript файлы.
CoffeeScript
Метод coffee может быть использован для компиляции CoffeeScript в обычный Javascript. Этот метод принимает строку или массив CoffeeScript файлов, которые относительны к папке resources/assets/coffee и генерирует единственный файл app.js в папке public/js :
Browserify
Browserify поддерживает Partialify и Babelify трансформеры, и вы можете легко выбирать и устанавливать их так как захотите:
Babel
Метод babel используется для компиляции ECMAScript 6 and 7 и JSX в обычный JavaScript. Этот метод принимает массив файлов, расположенных относительно папки resources/assets/js и генерирует единственный файл all.js в папке public/js :
Скрипты
Если вы хотите объединить ваши JavaScript файлы в разные файлы, вы можете вызвать метод scripts несколько раз. С помощью второго аргумента метода определите название файла для каждой операции объединения:
Копирование файлов и папок
The copy method may be used to copy files and directories to new locations. All operations are relative to the project’s root directory:
Версионирование / Очистка кеша
После создания файла с версией, для корректного подключения этого файла, вы можете использовать глобальный PHP хелпер elixir внутри ваших views. Хелпер elixir автоматически определить хешированное название файла:
Версионирование нескольких файлов
В аргументе метода version вы можете указать массив файлов, для которых нужно применить версионирование:
BrowserSync
Вызов существующих задач gulp
Если вы хотите вызвать эту задачу с помощью Elixir, тогда метод mix.task указав только имя вашей задачи в качестве аргумента метода:
Собственные наблюдатели (watchers)
Если вам нужно зарегистрировать наблюдатель чтобы запускать какую то собственную задачу при модификации файлов, укажите регулярное выражение во втором параметре метода task :
Пишем расширения Elixir
Если вам нужно еще больше гибкости, то метод Elixir’а task поможет вам создать собственные расширения для Elixir. Расширения Elixir’a позволяют вам указать аргументы ваших сторонниз задач. Например, вы можете написать такое расширение:
Собственные наблюдатели (watchers)
Laravel Framework Russian Community
Введение
Установка и настройка
Установка node.js
Сначала убедитесь, стоит ли у вас node.js:
По умолчанию node.js есть в Laravel Homestead. Если вы не используете его, вы можете установить её вручную.
Далее, вам нужно глобально установить Gulp.
Laravel Elixir
Использование
Компиляция Less
Компиляция Sass
Компиляция CoffeeScript
Компиляция всех Less и CoffeeScript файлов
Запуск PHPUnit тестов
Запуск PHPSpec тестов
Объединение Stylesheets
Объединение Stylesheets и сохранение в определённое место
Объединение Stylesheets в заданном каталоге
Третий аргумент в styles и scripts определяет папку, относительно которой будут искаться заданные файлы.
Объединение всех css в папке
Объединение javascript
Как и в случае с css, пути задаются относительно папки resources/js
Объединение всех js в папке
Объединение нескольких наборов js
Добавление версии файла
Файл будет сохранён с уникальным именем (к имени файла добавляется хэш содержимого и получается что-то вроде all-16d570a7.css ), чтобы исключить кэширование его на клиенте.
Внутри ваших шаблонов вы можете использовать хэлпер elixir() для указания урла для такого файла:
Копировать файл в новое место
Копировать каталог в новое место
Соединение методов
Вы можете образовывать цепочки из методов:
Для выполнения зарегистрированных команд нужно запустить в командной строке gulp
Выполнение всех зарегистрированных команд
Запуск команд при изменении файлов
Запуск тестов при изменении классов
Расширение
Вы можете создавать свои gulp-задачи и добавлять в elixir. Например, сделаем шуточную задачу, которая выводит в терминал некое сообщение:
Вы также можете мониторить изменения в заданных файлах:
That’s it! You may either place this at the top of your Gulpfile, or instead extract it to a custom tasks file. If you choose the latter approach, simply require it into your Gulpfile, like so:
Дальше вы можете добавлять свою команду в микс:
Теперь, как только gulp исполнит какую-либо задачу, в терминал выведется строка «Tea, Earl Grey, Hot».
Laravel Framework Russian Community
Введение
Установка и настройка
Установка node.js
Сначала убедитесь, стоит ли у вас node.js:
По умолчанию node.js есть в Laravel Homestead. Если вы не используете его, вы можете установить её вручную.
Далее, вам нужно глобально установить Gulp.
Laravel Elixir
Использование
Компиляция Less
Компиляция Sass
Компиляция CoffeeScript
Компиляция всех Less и CoffeeScript файлов
Запуск PHPUnit тестов
Запуск PHPSpec тестов
Объединение Stylesheets
Объединение Stylesheets и сохранение в определённое место
Объединение Stylesheets в заданном каталоге
Третий аргумент в styles и scripts определяет папку, относительно которой будут искаться заданные файлы.
Объединение всех css в папке
Объединение javascript
Как и в случае с css, пути задаются относительно папки resources/js
Объединение всех js в папке
Объединение нескольких наборов js
Добавление версии файла
Файл будет сохранён с уникальным именем (к имени файла добавляется хэш содержимого и получается что-то вроде all-16d570a7.css ), чтобы исключить кэширование его на клиенте.
Внутри ваших шаблонов вы можете использовать хэлпер elixir() для указания урла для такого файла:
Копировать файл в новое место
Копировать каталог в новое место
Соединение методов
Вы можете образовывать цепочки из методов:
Для выполнения зарегистрированных команд нужно запустить в командной строке gulp
Выполнение всех зарегистрированных команд
Запуск команд при изменении файлов
Запуск тестов при изменении классов
Расширение
Вы можете создавать свои gulp-задачи и добавлять в elixir. Например, сделаем шуточную задачу, которая выводит в терминал некое сообщение:
Вы также можете мониторить изменения в заданных файлах:
That’s it! You may either place this at the top of your Gulpfile, or instead extract it to a custom tasks file. If you choose the latter approach, simply require it into your Gulpfile, like so:
Дальше вы можете добавлять свою команду в микс:
Теперь, как только gulp исполнит какую-либо задачу, в терминал выведется строка «Tea, Earl Grey, Hot».
Блог Vaden Pro
Представляем Laravel Elixir
Написание кода лишь одна из многих задач с которыми должен справляться современный разработчик работая даже над простыми приложениями. Вы хотите сжать изображения, уменьшить CSS и JavaScript файлы, удалить отчеты отладки, запустить юнит-тесты и выполнить множество других рутинных дел. Даже простое отслеживание всех этих вещей для того, чтобы вовремя вспомнить о них и сделать все необходимое является достаточно сложной задачей, особенно с учетом того, что Вы, предположительно, уделяете большую часть своего внимания созданию и поддержанию больших функций приложения.
Разработчики Laravel надеются уменьшить количество времени и хлопот затрачиваемых на подобные мероприятия предоставляя новый API под названием Laravel Elixir. Elixir интегрирован с Gulp, обеспечивая простое решение для компиляции проектов Laravel Less, Sass, CoffeeScript и выполнения прочих подобных задач администрирования. В этом разделе я покажу Вам, как создавать и выполнять некоторые задачи Elixir в связке с Вашим Laravel приложением. Но для начала, поскольку многие читатели скорее всего не знакомы с Gulp, я бы хотел предложить краткое введение, в котором будут инструкции по установке Gulp с его зависимостями.
Представляем Gulp
Gulp – это мощная система с открытым кодом, которую Вы можете использовать для автоматизации всех вышеупомянутых задач и многого другого. Вы можете автоматизировать подобную рутину написанием Gulp задач, и благодаря этому сохранить себе огромное количество времени за счет интеграции одного или нескольких из сотен доступных плагинов Gulp. В этом разделе я покажу Вам как установить и настроить Gulp для дальнейшего использования в Elixir.
Установка Gulp
Поскольку Gulp построен на Node.js, начать следует с установки Node. Не важно какую операционную систему Вы используете, это легко сделать скачав один из установщиков с официального сайта Node.js. Если Вы предпочитаете использовать сборку Node с исходного кода, вы можете скачать исходный код по этой ссылке. Если же Вы пользователь Mac, как и я, Вы можете установить Node через Homebrew. Пользователи Linux также, скорее всего, имеют доступ к Node через их диспетчер пакетов.
После установки Вы можете проверить доступность Node через командную строку путем извлечения номера версии Node:
После установки Вы сможете выполнить Gulp команду воспользовавшись командной строкой:
После установки Gulp пришло время установить Elixir.
Установка Elixir
Создаем первую задачу с Elixir
При желании Вы можете добавить прочие задачи в эту функцию, таким образом Вы можете легко проводить многократно повторяющиеся задачи нажав всего несколько клавиш. Вы можете выполнять эти действия запустив gulp из корневой директории Вашего проекта:
Компиляция JavaScript
Кстати, вы можете также соединять команды следующим образом:
Сохраняем изменения и запускаем gulp снова:
Наблюдая за изменениями
Прочие задачи Elixir
Компиляция Less и CoffeeScript это лишь две из многих функций Elixir, которые Вы можете начать использовать прямо сейчас. Узнать больше можно ознакомившись с документацией Elixir.
Хоть сейчас по-прежнему ведется очень много работы над Elixir, да и документация по нему остается достаточно небольшой, этот инструмент уже сейчас заключает в себе значительный потенциал.
Оставайтесь с нами и в будущем этот раздел будет значительно расширен и дополнен примерами.
Перевод статьи W. Jason Gilmore Introducing Laravel 5 Elixir
Laravel Elixir
Introduction
Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application. Elixir supports several common CSS and JavaScript pre-processors, and even testing tools. Using method chaining, Elixir allows you to fluently define your asset pipeline. For example:
If you’ve ever been confused about how to get started with Gulp and asset compilation, you will love Laravel Elixir. However, you are not required to use it while developing your application. You are free to use any asset pipeline tool you wish, or even none at all.
Installation & Setup
Installing Node
Before triggering Elixir, you must first ensure that Node.js is installed on your machine.
By default, Laravel Homestead includes everything you need; however, if you aren’t using Vagrant, then you can easily install Node by visiting their download page.
Next, you’ll want to pull in Gulp as a global NPM package:
Laravel Elixir
The only remaining step is to install Elixir! Within a fresh installation of Laravel, you’ll find a package.json file in the root. Think of this like your composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:
Running Elixir
Watching Assets For Changes
Since it is inconvenient to run the gulp command on your terminal after every change to your assets, you may use the gulp watch command. This command will continue running in your terminal and watch your assets for any changes. When changes occur, new files will automatically be compiled:
Working With Stylesheets
The gulpfile.js file in your project’s root directory contains all of your Elixir tasks. Elixir tasks can be chained together to define exactly how your assets should be compiled.
You may also combine multiple Less files into a single CSS file. Again, the resulting CSS will be placed in public/css/app.css :
If you wish to customize the output location of the compiled CSS, you may pass a second argument to the less method:
Again, like the less method, you may compile multiple Sass files into a single CSS file, and even customize the output directory of the resulting CSS:
Plain CSS
If you would just like to combine some plain CSS stylesheets into a single file, you may use the styles method. Paths passed to this method are relative to the resources/assets/css directory and the resulting CSS will be placed in public/css/all.css :
Of course, you may also output the resulting file to a custom location by passing a second argument to the styles method:
Source Maps
Source maps are enabled out of the box. So, for each file that is compiled you will find a companion *.css.map file in the same directory. This mapping allows you to trace your compiled stylesheet selectors back to your original Sass or Less while debugging in your browser.
If you do not want source maps generated for your CSS, you may disable them using a simple configuration option:
Working With Scripts
Elixir also provides several functions to help you work with your JavaScript files, such as compiling ECMAScript 6, compiling CoffeeScript, Browserify, minification, and simply concatenating plain JavaScript files.
CoffeeScript
The coffee method may be used to compile CoffeeScript into plain JavaScript. The coffee function accepts a string or array of CoffeeScript files relative to the resources/assets/coffee directory and generates a single app.js file in the public/js directory:
Browserify
Elixir also ships with a browserify method, which gives you all the benefits of requiring modules in the browser and using ECMAScript 6.
This task assumes that your scripts are stored in resources/assets/js and will place the resulting file in public/js/main.js :
While Browserify ships with the Partialify and Babelify transformers, you’re free to install and add more if you wish:
Babel
The babel method may be used to compile ECMAScript 6 and 7 into plain JavaScript. This function accepts an array of files relative to the resources/assets/js directory, and generates a single all.js file in the public/js directory:
Scripts
If you have multiple JavaScript files that you would like to combine into a single file, you may use the scripts method.
The scripts method assumes all paths are relative to the resources/assets/js directory, and will place the resulting JavaScript in public/js/all.js by default:
If you need to combine multiple sets of scripts into different files, you may make multiple calls to the scripts method. The second argument given to the method determines the resulting file name for each concatenation:
If you need to combine all of the scripts in a given directory, you may use the scriptsIn method. The resulting JavaScript will be placed in public/js/all.js :
Copying Files & Directories
The copy method may be used to copy files and directories to new locations. All operations are relative to the project’s root directory:
Versioning / Cache Busting
Many developers suffix their compiled assets with a timestamp or unique token to force browsers to load the fresh assets instead of serving stale copies of the code. Elixir can handle this for you using the version method.
The version method accepts a file name relative to the public directory, and will append a unique hash to the filename, allowing for cache-busting. For example, the generated file name will look something like: all-16d570a7.css :
After generating the versioned file, you may use Laravel’s global elixir PHP helper function within your views to load the appropriately hashed asset. The elixir function will automatically determine the name of the hashed file:
Versioning Multiple Files
You may pass an array to the version method to version multiple files:
Once the files have been versioned, you may use the elixir helper function to generate links to the proper hashed files. Remember, you only need to pass the name of the un-hashed file to the elixir helper function. The helper will use the un-hashed name to determine the current hashed version of the file:
BrowserSync
BrowserSync automatically refreshes your web browser after you make changes to your front-end resources. You can use the browserSync method to instruct Elixir to start a BrowserSync server when you run the gulp watch command:
Calling Existing Gulp Tasks
If you need to call an existing Gulp task from Elixir, you may use the task method. As an example, imagine that you have a Gulp task that simply speaks a bit of text when called:
If you wish to call this task from Elixir, use the mix.task method and pass the name of the task as the only argument to the method:
Custom Watchers
If you need to register a watcher to run your custom task each time some files are modified, pass a regular expression as the second argument to the task method:
Writing Elixir Extensions
If you need more flexibility than Elixir’s task method can provide, you may create custom Elixir extensions. Elixir extensions allow you to pass arguments to your custom tasks. For example, you could write an extension like so:
