Laravel Elixir
Введение
Laravel Elixir предназначен для сборки файлов вашего фронтэнда в css- и js-файлы, а также для выполнения различных задач, построенных на слежении за изменениями в файлах вашего проекта - например, запуска тестов. Laravel Elixir представляет собой гибкий и простой API для Gulp.
Установка и настройка
Установка node.js
Сначала убедитесь, стоит ли у вас node.js:
node -v
По умолчанию node.js есть в Laravel Homestead. Если вы не используете его, вы можете установить её вручную.
Gulp
Далее, вам нужно глобально установить Gulp.
npm install --global gulp
Laravel Elixir
Осталось установить собственно Elixir. В корне папки фреймворка вы можете видеть файл package.json
. Он похож на composer.json
, только предназначен не для Composer, а для пакетного менеджера node.js , который называется npm
. Вы можете установить зависимости, заданные в этом файле одной командой:
npm install
Использование
Команды elixir записываются в файле gulpfile.js
.
Компиляция Less
elixir(function(mix) {
mix.less("app.less");
});
В данном примере подразумевается, что ваши less-файлы находятся в resources/assets/less
.
Компиляция Sass
elixir(function(mix) {
mix.sass("app.sass");
});
Подразумевается, что ваши sass-файлы находятся в resources/assets/sass
.
Компиляция CoffeeScript
elixir(function(mix) {
mix.coffee();
});
Подразумевается, что ваши CoffeeScript-файлы находятся в resources/assets/coffee
.
Компиляция всех Less и CoffeeScript файлов
elixir(function(mix) {
mix.less()
.coffee();
});
Запуск PHPUnit тестов
elixir(function(mix) {
mix.phpUnit();
});
Запуск PHPSpec тестов
elixir(function(mix) {
mix.phpSpec();
});
Объединение Stylesheets
elixir(function(mix) {
mix.styles([
"normalize.css",
"main.css"
]);
});
Пути задаются относительно директории resources/css
.
Объединение Stylesheets и сохранение в определённое место
elixir(function(mix) {
mix.styles([
"normalize.css",
"main.css"
], 'public/build/css/everything.css');
});
Объединение Stylesheets в заданном каталоге
elixir(function(mix) {
mix.styles([
"normalize.css",
"main.css"
], 'public/build/css/everything.css', 'public/css');
});
Третий аргумент в styles
и scripts
определяет папку, относительно которой будут искаться заданные файлы.
Объединение всех css в папке
elixir(function(mix) {
mix.stylesIn("public/css");
});
Объединение javascript
elixir(function(mix) {
mix.scripts([
"jquery.js",
"app.js"
]);
});
Как и в случае с css, пути задаются относительно папки resources/js
Объединение всех js в папке
elixir(function(mix) {
mix.scriptsIn("public/js/some/directory");
});
Объединение нескольких наборов js
elixir(function(mix) {
mix.scripts(['jquery.js', 'main.js'], 'public/js/main.js')
.scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});
Добавление версии файла
elixir(function(mix) {
mix.version("css/all.css");
});
Файл будет сохранён с уникальным именем (к имени файла добавляется хэш содержимого и получается что-то вроде all-16d570a7.css
), чтобы исключить кэширование его на клиенте.
Внутри ваших шаблонов вы можете использовать хэлпер elixir()
для указания урла для такого файла:
<link rel="stylesheet" href="{{ elixir("css/all.css") }}">
Этот хэлпер считает хэш указанного файла и добавляет его в урл. Все происходит автоматически !
Копировать файл в новое место
elixir(function(mix) {
mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});
Копировать каталог в новое место
elixir(function(mix) {
mix.copy('vendor/package/views', 'resources/views');
});
Соединение методов
Вы можете образовывать цепочки из методов:
elixir(function(mix) {
mix.less("app.less")
.coffee()
.phpUnit()
.version("css/bootstrap.css");
});
Gulp
Для выполнения зарегистрированных команд нужно запустить в командной строке gulp
Выполнение всех зарегистрированных команд
gulp
Запуск команд при изменении файлов
gulp watch
Запуск тестов при изменении классов
gulp tdd
Note: По умолчанию подразумевается, что конамды выполняются в development-окружении и собираемые скрипты не минифицируются. Чтобы добавить минификацию запустите
gulp --production
.
Расширение
Вы можете создавать свои gulp-задачи и добавлять в elixir. Например, сделаем шуточную задачу, которая выводит в терминал некое сообщение:
var gulp = require("gulp");
var shell = require("gulp-shell");
var elixir = require("laravel-elixir");
elixir.extend("message", function(message) {
gulp.task("say", function() {
gulp.src("").pipe(shell("say " + message));
});
return this.queueTask("say");
});
Первый аргумент в extend
- имя задачи, которое мы будет далее использовать в нашем gulpfile.js , а второй - функция-замыкание с собственно кодом задачи, написанной для gulp.
Вы также можете мониторить изменения в заданных файлах:
this.registerWatcher("message", "**/*.php");
Когда файл с путём, удовлетворяющем регекспу **/*.php
, будет изменён - запустится задача message
.
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:
Вы можете разместить этот код в верхней части вашего gulpfile.js
, или в сыойм файле, и подключить его в gulpfile.js
следующей конструкцией:
require("./custom-tasks")
Дальше вы можете добавлять свою команду в микс:
elixir(function(mix) {
mix.message("Tea, Earl Grey, Hot");
});
Теперь, как только gulp исполнит какую-либо задачу, в терминал выведется строка "Tea, Earl Grey, Hot".