Позвоните нам
8 800 555-23-46
звонок по Роcсии бесплатный
+7 (495) 580 30 45 Москва
+7 (8442) 73 50 76 Волгоград
+ 7 (917) 338 51 54
Все контакты и офисы
Напишите нам: info@onvolga.ru

Спросить онлайн

Создание расширений в 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')

});

Теперь нам доступны для выполнения следующие команды:

  1. gulp coffee - скомпилирует файл coffee в app.js, затем положит его в public/js
  2. gulp sass - скомпилирует файл coffee в app.scss, затем положит его в public/css
  3. 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, то проблем возникнуть не должно.

 Ваш запрос или вопрос по теме:

Интернет-агентство сегодня:

ТОП20 веб-студий России по разработке интернет-магазинов по доступной цене в рейтинге CMSMagazine, 1 место в ЮФО и ТОП10 Центрального ФО.

ТОП100 веб-студий Партнеров Битрикса по созданию интернет-магазинов и 11 место среди разработчиков интернет-магазинов на Битриксе по низким ценам в рейтинге РейтингРунета-2016.

ТОП10 разработчиков интернет-магазинов Москвы по доступной цене в рейтинге РейтингРунета.

ТОП120 SEO-компаний России, специализирующихся на поисковом продвижении интернет-магазинов по версии РейтингРунета.

Золотой Сертифицированный Партнер 1С-Битрикс.

Государственная аккредитация в области информационных технологий (№5291 Министерства связи РФ).

ПОЛУЧИТЕ БЕСПЛАТНУЮ КОНСУЛЬТАЦИЮ или ОТПРАВЬТЕ ЗАПРОС

Задайте вопрос о веб-разработке, обслуживании или продвижении сайта или отправьте запрос по работам. Мы стараемся отвечать на Ваши запросы в течение 24 часов.