Elixir

shnpm install --global gulp-cli

Если вы используете систему контроля версий, то можете выполнить команду shnpm shrinkwrap, чтобы зафиксировать свои NPM-требования:

shnpm shrinkwrap

После выполнения этой команды, вы можете «закоммитить» npm-shrinkwrap.json в контроль версий.

По умолчанию Elixir под капотом использует библиотеку LibSass для компиляции. В некоторых случаях это может оказаться выгодней, чем использование версии Ruby, которая работает медленнее, но зато более функциональна. Если у вас установлены и Ruby и Sass (shgem install sass), вы можете включить Ruby-режим:

jselixir(function(mix) {
  mix.rubySass("app.sass");
});

Как и в случае с методом PHPless(), вы можете компилировать несколько Sass-файлов в один CSS-файл, и задать папку для сохранения итоговой CSS:

jselixir(function(mix) {
  mix.sass([
    'app.scss',
    'controllers.scss'
  ], 'public/assets/css');
});

Изменение путей

Рекомендуется использовать стандартные каталоги Laravel для ресурсов, но если вам необходима другой базовый каталог, вы можете указать путь к любому файлу начиная с ./. Тогда Elixir поймёт, что надо начать с корня проекта, а не использовать стандартный базовый каталог.

Например, чтобы скомпилировать файл из app/assets/sass/app.scss и разместить результат в public/css/app.css, вам надо сделать такой вызов метода PHPsass():

jselixir(function(mix) {
  mix.sass('./app/assets/sass/app.scss');
});

Компилирование Stylus

Для компилирования Stylus в CSS используется метод PHPstylus(). Если ваши Stylus-файлы хранятся в resources/assets/stylus, вызовите метод вот так:

jselixir(function(mix) {
  mix.stylus('app.styl');
});

Эта сигнатура метода идентична и для PHPmix.less() и для PHPmix.sass().

Компилирование простых CSS

Если вы хотите просто скомбинировать некоторые простые таблицы стилей в один файл, используйте метод PHPstyles(). Передаваемые в этот метод пути относительны к resources/assets/css, а итоговая CSS будет помещена в public/css/all.css:

jselixir(function(mix) {
  mix.styles([
    'normalize.css',
    'main.css'
  ]);
});

Вы также можете указать Elixir сохранить итоговый файл в другой каталог или файл, передав второй аргумент в метод PHPstyles():

jselixir(function(mix) {
  mix.styles([
    'normalize.css',
    'main.css'
  ], 'public/assets/css/site.css');
});

Комбинирование стилей и сохранение по базовому пути

jselixir(function(mix) {
  mix.styles([
    "normalize.css",
    "main.css"
  ], 'public/build/css/everything.css', 'public/css');
});

Третий аргумент методов PHPstyles() и PHPscripts() определяет относительный каталог для всех путей, передаваемых в методы.

Комбинирование всех стилей в каталоге

jselixir(function(mix) {
  mix.stylesIn("public/css");
});

При написании ES2015 с модулями у вас есть выбор между [https://webpack.github.ioWebpack] и Rollup. Если эти инструменты вам незнакомы, не беспокойтесь, Elixir сам выполнит всю сложную работу. По умолчанию gulpfile Laravel использует webpack для компилирования Javascript, но вы можете использовать любой другой сборщик модулей.

Компилирование Webpack

Для компилирования и сборки ECMAScript 2015 в простой JavaScript служит метод PHPwebpack(). Эта функция принимает путь к файлу относительно каталога resources/assets/js и генерирует один собранный файл в каталоге public/js:

jselixir(function(mix) {
  mix.webpack('app.js');
});

Для выбора другого каталога для вывода или базового каталога просто укажите необходимые пути с точкой в начале. Затем вы можете указать пути относительно корня вашего приложения. Например, чтобы скомпилировать app/assets/js/app.js в public/dist/app.js:

jselixir(function(mix) {
  mix.webpack(
    './app/assets/js/app.js',
    './public/dist'
  );
});

Если вы хотите использовать функциональность Webpack по полной, Elixir прочитает любой файл webpack.config.js, находящийся в корне вашего проекта, и включит его настройки в процесс сборки.

Компилирование Rollup

Подобно Webpack, Rollup — это сборщик для ES2015 следующего поколения. Эта функция принимает массив файлов относительно каталога resources/assets/js и генерирует один файл в каталоге public/js:

jselixir(function(mix) {
  mix.rollup('app.js');
});

Как и с методом PHPwebpack() вы можете настроить место для ввода и вывода файлов, передаваемых в метод PHProllup():

elixir(function(mix) {
  mix.rollup(
    './resources/assets/js/app.js',
    './public/dist'
  );
});

Компилирование CoffeeScript

Для компилирования CoffeeScript в простой JavaScript служит метод PHPcoffee(). Он принимает строку или массив CoffeeScript-файлов относительно пути resources/assets/coffee и генерирует единый файл public/js/app.js:

jselixir(function(mix) {
  mix.coffee(['app.coffee', 'controllers.coffee']);
});

Компилирование всех Less and CoffeeScript

jselixir(function(mix) {
  mix.less()
     .coffee();
});

Выполнение тестов PHPUnit

jselixir(function(mix) {
  mix.phpUnit();
});

Выполнение тестов PHPSpec

jselixir(function(mix) {
  mix.phpSpec();
});

Browserify

В Elixir есть метод PHPbrowserify (), который обеспечивает вас всеми преимуществами запроса модулей в браузере и ECMAScript 6 и JSX (для версии 5.2 и выше).

Эта задача предполагает, что ваши скрипты хранятся в resources/assets/js, и сохранит итоговый файл в public/js/main.js:

jselixir(function(mix) {
  mix.browserify('main.js');
});

При необходимости вы можете передать другое место для вывода в качестве второго аргумента

js// Задание конкретного имени для вывода файла...
elixir(function(mix) {
  mix.browserify('main.js', 'public/javascripts/main.js');
});

В Browserify уже включены трансформеры Partialify и Babelify, при необходимости вы можете установить и добавить другие:

shnpm install aliasify --save-dev

jselixir.config.js.browserify.transformers.push({
  name: 'aliasify',
  options: {}
});

elixir(function(mix) {
  mix.browserify('main.js');
});

Babel

Для компилирования ECMAScript 6 и 7 и JSX (для версии 5.2 и выше) в простой JavaScript служит метод PHPbabel(). Он принимает массив или файлы относительно пути resources/assets/js, и генерирует единый файл public/js/all.js:

jselixir(function(mix) {
  mix.babel([
    'order.js',
    'product.js',
    'react-component.jsx' //для версии 5.2 и выше
  ]);
});

Другое место для сохранения итогового файла можно указать вторым аргументом. Сигнатура и функциональность этого метода идентичны PHPmix.scripts(), за исключением компилирования Babel.

BrowserSync

BrowserSync автоматически производит обновление в браузере при изменениях в ваших ресурсах. Метод PHPbrowserSync() принимает JavaScript-объект с атрибутом proxy, содержащим локальный URL вашего приложения. Теперь, когда вы запустите shgulp watch, вы сможете обращаться к своему приложению через 3000 порт (http://project.dev:3000) и наслаждаться браузерной синхронизацией:

jselixir(function(mix) {
  mix.browserSync({
    proxy: 'project.dev'
  });
});

Gulp

Теперь, когда вы указали, какие задачи должен выполнять Elixir, вы должны вызвать Gulp из командной строки.

Выполнение всех зарегистрированных задач разом

shgulp

Отслеживание изменений ресурсов

shgulp watch

Только скомпилированные скрипты

shgulp scripts

Только скомпилированные стили

shgulp styles

Отслеживание изменений тестов и PHP-классов

shgulp tdd

Запуск всех задач будет происходить для среды разработки, и минимизация выполняться не будет. Для продакшна используйте shgulp --production.

Вызов существующих Gulp-задач

Для вызова существующей Gulp-задачи используйте метод PHPtask(). Как пример, представьте, что у вас есть Gulp-задача, которая просто выводит небольшой текст при вызове.

jsgulp.task('speak', function() {
  var message = 'Tea...Earl Grey...Hot';

  gulp.src('').pipe(shell('say ' + message));
});

Если вы хотите вызвать эту задачу из Elixir, используйте метод PHPmix.task() и передайте имя задачи единственным аргументом метода:

jselixir(function(mix) {
  mix.task('speak');
});

Свои наблюдатели

Если вам необходимо зарегистрировать наблюдателя, чтобы запускать ваши задачи каждый раз, когда изменяется один или несколько файлов, вы можете передать регулярное выражение в качестве второго аргумента метода PHPtask():

jselixir(function(mix) {
  mix.task('speak', 'app/**/*.php');
});

Создание расширений Elixir

Для ещё большей гибкости вы можете создать полноценные расширения Elixir. Расширения Elixir позволяют передавать аргументы в ваши задачи. Например, можно написать такое расширение:

js// File: elixir-extensions.js

var gulp = require('gulp');
var shell = require('gulp-shell');
var Elixir = require('laravel-elixir');

var Task = Elixir.Task;

Elixir.extend('speak', function(message) {

  new Task('speak', function() {
    return gulp.src('').pipe(shell('say ' + message));
  });

});

// mix.speak('Hello World');

Вот и всё! Обратите внимание на то, что ваша Gulp-логика должна быть в функции, передаваемой вторым аргументом конструктору PHPTask(). Вы можете либо расположить это в начале вашего Gulpfile, либо вынести в отдельный файл задач. Например, если вы разместите расширения в elixir-extensions.js, то можете затребовать этот файл из основного (t)Gulpfile%% вот так:

js// File: Gulpfile.js

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

require('./elixir-extensions')

elixir(function(mix) {
  mix.speak('Tea, Earl Grey, Hot');
});

Свои наблюдатели

Если вы хотите перезапускать свою задачу во время выполнения shgulp watch, можете зарегистрировать наблюдателя:

jsnew Task('speak', function() {
  return gulp.src('').pipe(shell('say ' + message));
})
.watch('./app/**');