Laravel Elixir没有在Gulp任务中运行

时间:2016-11-21 12:48:40

标签: laravel build gulp laravel-elixir

我试图将我的灵丹妙药任务分成不同的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' ] );

运行stylesscripts任务不会产生任何影响。如果我在终端中仅使用gulp运行默认任务,stylesscripts任务将无效运行,但elixir任务将成功运行。

终端输出:

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

我做错了什么?

1 个答案:

答案 0 :(得分:2)

所以Elixir几乎没有保留任务,例如:styles(用于运行所有样式操作),scriptstdd(用于测试)。有问题的树解决方案:

  1. 更改您的任务名称(scripts => scripts_MODULE_NAME)然后您可以按gulp scripts_MODULE_NAME
  2. 运行
  3. 开始使用elixir.extend,了解更多on documentation
  4. 只需使用Elixir提供的gulp styles,然后您将运行所有样式任务(在您的示例中为sass),无脚本任务
  5. 我还建议您在main.scss中为每个模块添加一个gulpfile.js个文件,并在此*.scss中包含所有main.scss个文件。它没什么优势:

    1. 您的IDE将理解依赖关系(例如,如果您在一个文件中设置变量,您的IDE将知道您可以在另一个文件中使用此变量,因为您包含设置此变量的文件)
    2. 现在使用您的配置,如果您使用gulp watch并且想要添加一些新的样式文件,则需要更新gulpfile.js,退出gulp watch并再次运行。如果您在一个SCSS文件中具有所有依赖关系,则不需要重新启动gulp watch,只需将新文件添加到*.scss文件,gulp就会知道更改。
    3. 要从一个SCSS文件中导入示例中的SCSS文件,您可以执行以下操作:

      @import "auth";
      @import "main";
      @import "dashboard";
      @import "contact";
      @import "login";
      @import "campaign_creator";
      @import "campaign_stats";