Создание расширений в Laravel elixir
Laravel elixir давно используют многие программисты для проектов на Laravel. Laravel Elixir предоставляет чистый и гибкий API для определения основных Gulp-задач вашего Laravel-приложения.
Пример классического «gulpfile.js» в Laravel ниже:
elixir(function(mix) {
mix.coffee('app.coffee')
.sass('app.scss')
.copy(paths['bootstrap']+'javascripts/bootstrap.min.js', 'public/js/bootstrap.min.js')
});
Теперь нам доступны для выполнения следующие команды:
- gulp coffee - скомпилирует файл coffee в app.js, затем положит его в public/js
- gulp sass - скомпилирует файл coffee в app.scss, затем положит его в public/css
- gulp copy - скопирует файл 'javascripts/bootstrap.min.js' в public/js, где paths['bootstrap'] переменная в которой записан путь до директории в которой находится bootstrap, например путь до директории пакетов bower или node_modules.
Часто для сборки проекта достаточно сборки стилей, скриптов и возможно копирования необходимых файлов в рабочую директорию из директорий ресурсов. Но бывают случаи, когда необходимо создать собственные задачи, для более мелкого разбиения задач или иных целей. Для решения данной задачи разработчик Laravel может просто написать обычные gulp таски, но это не верный подход, если мы осуществляем сборку проекта при помощи Laravel elixir. Для создания собственной задачи можно воспользоваться расширениями Elixir. Ниже приведен код такой задачи:
/**
* Build api
*/
Elixir.extend('api', function (message) {
new Elixir.Task('api', function () {
return gulp.src(path.assets + '/js/'api'/builder.js')
.pipe(sourcemaps.init())
.pipe(browserify({
insertGlobals: false
}))
.pipe(sourcemaps.write())
.pipe(jsmin())
.pipe(rename('api.min.js'))
.pipe(gulp.dest(path.js));
}).watch([path.assets + 'js/*/*', path.assets + 'js/'api'/*/*']);
});
Данная задача будет осуществлять сборку api в отдельной задаче, и следить за изменениями в директориях, относящихся к api. Соответственно запуская gulp watch, в случае изменении файлов за которыми следит наблюдатель данной задачи, задача будет выполнена, а также при вызове и gulp default (или просто gulp) данная задача также будет обработана. Но для того чтобы она стала доступна необходимо добавить ещё пару строк в gulpfile:
elixir(function (mix) {mix.api();});
Также можно создавать таски динамично, например для этого нужно создать расширение Elixir, в котором создавать таски, например так:
new Elixir.Task(taskName, function () {
//do something
}).watch(path);
Это позволяет создавать задачи например проходом в цикле директорий или считывания json файлов.
P.S. Не забывайте подключать используемые node.js модули, например для сборки api используются: sourcemaps, jsmin, rename, browserify. Каждая из этих библиотек была заранее объявлена в начале файла. Если вы давно пользуетесь gulp, то проблем возникнуть не должно.
