Познакомьтесь с Elixir, способом компиляции активов Laravel

 elixir ( function ( mix ) { mix . version ( [ './public/css/styles.css' , './public/js/app.js' ] ) ; } ) ; 

И это все, что нужно сделать. Наш gulpfile.js готов!

Это полный код:

 var elixir = require ( 'laravel-elixir' ) ; require ( 'laravel-elixir-jade' ) ; elixir ( function ( mix ) { mix . less ( 'styles.less' ) . coffee ( [ 'app.coffee' , 'base.coffee' , 'controllers.coffee' , 'directives.coffee' , 'services.coffee' ] ) ; . jade ( { search : '**/*.jade' } ) . version ( [ 'build/css/styles.css' , 'build/js/app.js' ] ) ; } ) ; 

Elixir позволяет связывать методы, как показано в последнем коде выше.

Выполнение задач

Для запуска задач нам просто нужно вызвать gulp :

 gulp 

Это запустит все задачи, зарегистрированные в Elixir.

Мы также можем watch за изменениями в файлах, чтобы автоматизировать выполнение задач, поэтому нам не придется запускать gulp всякий раз, когда мы вносим изменения в файл:

 gulp watch 

Выполнение индивидуальных задач

Всякий раз, когда мы добавляем задачу в Elixir, за кулисами, в Gulp регистрируется одноименная задача. Например, если мы используем метод less() в Elixir, имя задачи Gulp будет less . Это означает, что мы сможем выполнять задачи индивидуально, как мы обычно делаем с Gulp.

 gulp less 

Как насчет минификации?

Одним из распространенных применений таких исполнителей задач, как Grunt или Gulp, является минимизация содержимого файлов, чтобы сделать их меньше и сохранить пропускную способность. Используя Elixir, единственное, что нам нужно сделать, это отправить опцию --production при запуске команды --production :

 gulp -- production 

Идя вперед

Пользовательские задачи и расширения

Эликсир предоставляет основные задачи из коробки. В большинстве случаев этого более чем достаточно. Тем не менее, мы можем столкнуться с ситуациями, когда существующие задачи не могут обрабатывать определенные операции, что означает, что пришло время расширить Elixir!

Для этой цели Elixir предлагает метод extend . Метод extend принимает два параметра. Первая — это имя пользовательской задачи, а вторая — обратный вызов, в котором мы пишем задачу Gulp.

Чтобы все было как можно проще, давайте создадим базовую задачу, которая печатает текстовое сообщение на консоль:

 var elixir = require ( 'laravel-elixir' ) , gulp = require ( 'gulp' ) , shell = require ( 'gulp-shell' ) ; Elixir . extend ( 'saysHi' , function ( message ) { new Elixir . Task ( 'saysHi' , function ( ) { return gulp . src ( '' ) . pipe ( shell ( 'Hi, I am a custom task!' ) ) ; } ) . watch ( './app/**' ) ; } ) ; 

watch() регистрирует наблюдателя. В результате, когда мы редактируем любые файлы, соответствующие регулярному выражению, задача запускается.

Мы можем поместить этот блок в gulpfile.js файла gulpfile.js или поместить его во внешний файл и импортировать в наш gulpfile.js :

 var elixir = require ( 'laravel-elixir' ) ; require ( './elixir-extensions' ) ; 

Настраиваемая задача теперь доступна через объект mix :

 elixir ( function ( mix ) { mix . saysHi ( ) ; } ) ; 

Теперь каждый раз, когда мы запускаем gulp saysHi , на экране будет напечатан следующий текст:

 gulp custom Task [ 01 : 10 : 57 ] Using gulpfile ~ / www / sites / elixir / gulpfile . js [ 01 : 10 : 57 ] Starting 'saysHi' . . . Hi , I am a custom task ! [ 01 : 10 : 57 ] Finished 'saysHi' after 370 μs 

Использование ресурсов в шаблонах лезвий

Чтобы использовать скомпилированные файлы, мы используем вспомогательную функцию elixir, которая доступна во всех представлениях.

 @block('scripts') < link rel = " stylesheet " type = " text/css " href = " {{ elixir('css/styles.all.css') }} " > @stop @block('styles') < script src = " {{ elixir('css/scripts.all.js') }} " > @stop 

Теперь у нас есть спокойствие о версиях и мы можем сосредоточиться на проекте!

Завершение

Elixir — это оболочка для Gulp.js, предоставляющая широкий спектр функциональных возможностей, помогающих нам в составлении наших активов. В дополнение к стандартным задачам Gulp, он также предоставляет несколько методов для управления версиями, тестирования и копирования файлов, и это лишь некоторые из них. Эликсир очень гибкий. Мы можем настроить его, расширить и даже объединить со стандартным синтаксисом Gulp.

Основное внимание в этом руководстве уделялось составлению ресурсов. Тем не менее, есть еще несколько функций Elixir, которые мы не рассмотрели в этом руководстве, например, задачи по копированию файлов, тестированию и даже запуску команд Laravel Artisan. Чтобы узнать больше, пожалуйста, обратитесь к официальной документации Elixir .

Для тех, кто всегда предпочитает решения PHP для такого рода задач и не любит последовательно переключать контекст между синтаксисом JavaScript и PHP, ознакомьтесь с нашей статьей об использовании решений PHP для внешнего процесса без использования Node.

Спасибо за прочтение. Оставьте свои вопросы и комментарии ниже!