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".