Laravel Elixir 不在 运行 内 Gulp 任务
Laravel Elixir Not Running Inside Gulp Tasks
我正在尝试将我的长生不老药任务分成不同的 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
我做错了什么?
所以 Elixir 保留的任务很少,例如:styles
(用于 运行 所有样式操作),scripts
或 tdd
(用于测试)。有树解决你的问题:
- 更改您的任务名称 (
scripts
=> scripts_MODULE_NAME
) 然后您可以 运行 通过 gulp scripts_MODULE_NAME
- 开始使用
elixir.extend
,了解更多 on documentation
- 只需使用 Elixir 提供的
gulp styles
,然后你将 运行 所有样式任务(sass 在你的例子中),没有脚本任务
我还建议您在 gulpfile.js
中为每个模块创建一个 main.scss
文件,并在此 main.scss
中包含所有 *.scss
文件。它有几个优点:
- 你的 IDE 会理解依赖关系(例如,如果你在一个文件中设置变量,你的 IDE 会知道你可以在另一个文件中使用这个变量,因为你包含文件设置这个变量)
- 现在根据你的配置,如果你使用
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";
我正在尝试将我的长生不老药任务分成不同的 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
我做错了什么?
所以 Elixir 保留的任务很少,例如:styles
(用于 运行 所有样式操作),scripts
或 tdd
(用于测试)。有树解决你的问题:
- 更改您的任务名称 (
scripts
=>scripts_MODULE_NAME
) 然后您可以 运行 通过gulp scripts_MODULE_NAME
- 开始使用
elixir.extend
,了解更多 on documentation - 只需使用 Elixir 提供的
gulp styles
,然后你将 运行 所有样式任务(sass 在你的例子中),没有脚本任务
我还建议您在 gulpfile.js
中为每个模块创建一个 main.scss
文件,并在此 main.scss
中包含所有 *.scss
文件。它有几个优点:
- 你的 IDE 会理解依赖关系(例如,如果你在一个文件中设置变量,你的 IDE 会知道你可以在另一个文件中使用这个变量,因为你包含文件设置这个变量)
- 现在根据你的配置,如果你使用
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";