Laravel Elixir не работает внутри задач Gulp

Я пытаюсь разделить свои задачи эликсира на разные задачи Gulp, поэтому я могу просто запустить их подмножество.

Вот мой gulpfile.js:

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

/**
 * CSS
 */

gulp.task('styles', function()
{
    elixir( function( mix )
    {
        mix.sass( 'auth.scss' )
            .sass( 'main.scss' )
            .sass( 'dashboard.scss' )
            .sass( 'contact.scss' )
            .sass( 'login.scss' )
            .sass( 'campaign_creator.scss' )
            .sass( 'campaign_stats.scss' );
    } );
} );

/**
 * JS
 */

gulp.task('scripts', function()
{
    elixir( function( mix )
    {
        mix.scriptsIn( 'public/js/src/shared', 'public/js/dist/shared/all.js' )
            .scriptsIn( 'public/js/src/logins', 'public/js/dist/logins/all.js' )
            .scriptsIn( 'public/js/src/campaign', 'public/js/dist/campaigns/all.js' )

            // vendor scripts used in multiple places can be kept separate rather than concatenated with the page's JS files
            .copy( 'public/vendor/alertifyjs/dist/js/alertify.js', 'public/js/dist/vendor/alertifyjs/alertify.js' );
    } );
} );

gulp.task( 'default', [ 'styles', 'scripts' ] );

Запуск задач styles или scripts не дает никакого результата. И если я запускаю задачу по умолчанию только с gulp в терминале, задачи styles или scripts выполняются без эффекта, но затем задачи эликсира выполняются успешно.

Выход терминала:

gulp
[12:28:54] Using gulpfile /path/to/my/app/application/gulpfile.js
[12:28:54] Starting 'styles'...
[12:30:03] Finished 'styles' after 1.13 min
[12:30:03] Starting 'scripts'...
[12:30:03] Finished 'scripts' after 63 ms
[12:30:03] Starting 'default'...
[12:30:03] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/auth.scss


Saving To...
   - public/css/auth.css

[12:30:25] Finished 'default' after 22 s
[12:30:27] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:27] Finished 'sass' after 24 s
[12:30:27] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/main.scss


Saving To...
   - public/css/main.css

[12:30:27] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:27] Finished 'sass' after 504 ms
[12:30:27] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/dashboard.scss


Saving To...
   - public/css/dashboard.css

[12:30:27] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:27] Finished 'sass' after 200 ms
[12:30:27] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/contact.scss


Saving To...
   - public/css/contact.css

[12:30:28] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:28] Finished 'sass' after 289 ms
[12:30:28] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/login.scss


Saving To...
   - public/css/login.css

[12:30:28] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:28] Finished 'sass' after 210 ms
[12:30:28] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/campaign_creator.scss


Saving To...
   - public/css/campaign_creator.css

[12:30:28] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:28] Finished 'sass' after 218 ms
[12:30:28] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/campaign_stats.scss


Saving To...
   - public/css/campaign_stats.css

[12:30:29] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:29] Finished 'sass' after 477 ms
[12:30:29] Starting 'scriptsIn'...

Fetching ScriptsIn Source Files...
   - public/js/src/shared/**/*.js


Saving To...
   - public/js/dist/shared/all.js

[12:30:56] gulp-notify: [Laravel Elixir] Scripts Merged!
[12:30:56] Finished 'scriptsIn' after 27 s
[12:30:56] Starting 'scriptsIn'...

Fetching ScriptsIn Source Files...
   - public/js/src/logins/**/*.js


Saving To...
   - public/js/dist/logins/all.js

[12:30:57] gulp-notify: [Laravel Elixir] Scripts Merged!
[12:30:57] Finished 'scriptsIn' after 738 ms
[12:30:57] Starting 'scriptsIn'...

Fetching ScriptsIn Source Files...
   - public/js/src/campaign/**/*.js


Saving To...
   - public/js/dist/campaigns/all.js

[12:30:57] gulp-notify: [Laravel Elixir] Scripts Merged!
[12:30:57] Finished 'scriptsIn' after 609 ms
[12:30:57] Starting 'copy'...

Fetching Copy Source Files...
   - public/vendor/alertifyjs/dist/js/alertify.js


Saving To...
   - public/js/dist/vendor/alertifyjs/alertify.js

[12:30:58] Finished 'copy' after 298 ms

Что я делаю не так?


person voidstate    schedule 21.11.2016    source источник


Ответы (1)


поэтому у Эликсира есть несколько зарезервированных задач, например: styles (для действия запуска всех стилей), scripts или tdd (для тестов). Есть дерево решений для вашей проблемы:

  1. Измените название задачи (scripts => scripts_MODULE_NAME) и тогда вы сможете запустить ее по gulp scripts_MODULE_NAME
  2. Начните использовать elixir.extend, прочитайте документацию
  3. Просто используйте gulp styles, предоставленный Elixir, тогда вы запустите задачу со всеми стилями (например, sass), без задачи сценариев.

Я также предлагаю вам иметь один файл main.scss для каждого модуля в gulpfile.js и включить все файлы *.scss в этот main.scss. Он имеет несколько преимуществ:

  1. Ваша IDE будет понимать зависимость (например, если вы установите переменную в одном файле, ваша IDE будет знать, что вы можете использовать эту переменную в другом файле, потому что вы включаете файл, который устанавливает эту переменную)
  2. Прямо сейчас с вашей конфигурацией, если вы используете gulp watch и хотите добавить новый файл стиля, вам нужно обновить gulpfile.js, выйти из gulp watch и запустить снова. Если у вас все зависимости в одном файле SCSS, вам не нужно перезапускать gulp watch, а просто добавить новый файл в *.scss файл, и gulp будет знать об изменениях.

Чтобы импортировать файлы SCSS из вашего примера в один файл SCSS, вы можете сделать следующее:

@import "auth";
@import "main";
@import "dashboard";
@import "contact";
@import "login";
@import "campaign_creator";
@import "campaign_stats";
person Marek Skiba    schedule 25.11.2016