【问题标题】:Laravel elixir 5.2 not combine scripts in extened taskLaravel elixir 5.2 不在扩展任务中组合脚本
【发布时间】:2018-06-16 01:40:09
【问题描述】:

我在 gulpfile.js 中的代码是:

我想创建像 (gulp user) 这样的 gulp 命令来混合下面的脚本和样式,但这不起作用,


elixir.config.assetsPath = '';
elixir.config.js.folder = '';
var Task = elixir.Task;
var Mix = elixir.mixins;

elixir.extend('user', function () {

    new Task('user', function () {

        Mix.scripts(
            [
                '/resources/assets/js/angular/user/app/',
                '/resources/assets/js/angular/user/main/',
                '/resources/assets/js/angular/user/configs/',
                '/public/app/user/libs/angular/ui-bootstrap/ui-bootstrap-custom-2.0.0.js',
                '/resources/assets/js/angular/user/models/',
                '/public/app/libs/angular/ng-typeahead/dist/ng-typeahead.js',
                '/resources/assets/js/angular/user/controllers/',
                'public/app/libs/angular/angularjs-toaster/toaster.js',
                '/resources/assets/js/angular/user/filters/',
                '/resources/assets/js/angular/admin/directives/googlemap/map.js',
                '/public/app/libs/assets/custom-lodash.js',
                '/resources/assets/js/angular/user/services/',
                '/resources/assets/js/angular/user/directives/',
                '/public/app/user/assets/js/bootstrap.3.3.5.js',
                '/public/app/user/assets/js/ui-bootstrap-tpls-2.0.0.js',
                '/public/app/user/assets/js/slick.js',
                '/public/app/user/assets/js/angular-slick.min.js',
                '/public/app/user/assets/js/bootstrap-chosen.js',
                '/public/app/user/assets/js/fixto.min.js',
                '/public/app/user/ngApp/templates/templates.js'
            ],
            'public/app/user/ngApp/scripts/app-all.js'
        ).sass(
            [
                './public/app/user/assets/sass/main.scss'
            ],
            './public/app/user/assets/css/kit.css'
        ).styles(
            [
                './public/app/user/assets/css/bootstrap.css',
                './public/app/user/assets/css/font.css',
                './public/app/user/assets/css/kit.css',
                './public/app/user/assets/css/range-slider.css',
                './public/app/user/assets/css/angular-bootstrap-lightbox.css',
                './public/app/libs/angular/angularjs-toaster/toaster.css',
                './public/app/libs/angular-rateit/dist/rateit.css',
                './public/app/libs/angular/ng-typeahead/dist/ng-typeahead.css',
                './public/app/user/assets/css/app.css',
                './public/app/user/assets/css/nga.all.min.css',
                './public/app/user/assets/css/rzslider.css',
                './public/app/user/assets/css/slick.css',
                './public/app/user/assets/css/slick-theme.css',
                './public/app/user/assets/css/animate.css',
                './public/app/user/libs/jquery/select2/dist/css/select2.min.css'
            ],
            './public/app/user/assets/css/app-all.css'
        ).version(
            [
                'public/app/user/assets/css/app-all.css',
                'public/app/user/ngApp/scripts/app-all.js'
            ]
        );
    });
});

当我在终端中运行 (gulp user) 时,结果是这样的空, 和 mix 不能正常工作并结合脚本和样式

[15:20:00] Using gulpfile /var/www/chilivery/web/gulpfile.js
[15:20:00] Starting 'user'...
┌────────────┬─────────┬──────────────┬─────────────┐
│ Task       │ Summary │ Source Files │ Destination │
├────────────┼─────────┼──────────────┼─────────────┤
│ mix.user() │         │
└────────────┴─────────┴──────────────┴─────────────┘
[15:20:00] Finished 'user' after 6.36 ms

任何帮助请,我如何创建像 gulp 用户这样的 gulp 命令来处理它?

【问题讨论】:

  • 请在分配标签之前阅读标签的描述。删除了elixir
  • 作为 gulp 用户的结果,你在文件 public/app/user/ngApp/scripts/app-all.js , ./public/app/user/assets/css/kit 中有什么.css 和 /public/app/user/assets/css/app-all.css ?

标签: laravel gulp laravel-elixir


【解决方案1】:

让我们先忘记“自定义任务”部分。

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


elixir(function(mix) {
    mix.scripts(
            [
                'resources/assets/js/angular/user/app/',
                'resources/assets/js/angular/user/main/',
                'resources/assets/js/angular/user/configs/',
                'public/app/user/libs/angular/ui-bootstrap/ui-bootstrap-custom-2.0.0.js',
                'resources/assets/js/angular/user/models/',
                'public/app/libs/angular/ng-typeahead/dist/ng-typeahead.js',
                'resources/assets/js/angular/user/controllers/',
                'public/app/libs/angular/angularjs-toaster/toaster.js',
                'resources/assets/js/angular/user/filters/',
                'resources/assets/js/angular/admin/directives/googlemap/map.js',
                'public/app/libs/assets/custom-lodash.js',
                'resources/assets/js/angular/user/services/',
                'resources/assets/js/angular/user/directives/',
                'public/app/user/assets/js/bootstrap.3.3.5.js',
                'public/app/user/assets/js/ui-bootstrap-tpls-2.0.0.js',
                'public/app/user/assets/js/slick.js',
                'public/app/user/assets/js/angular-slick.min.js',
                'public/app/user/assets/js/bootstrap-chosen.js',
                'public/app/user/assets/js/fixto.min.js',
                'public/app/user/ngApp/templates/templates.js'
            ],
            'public/app/user/ngApp/scripts/app-all.js'
        );
    mix.styles(
            [
                'public/app/user/assets/css/bootstrap.css',
                'public/app/user/assets/css/font.css',
                'public/app/user/assets/css/kit.css',
                'public/app/user/assets/css/range-slider.css',
                'public/app/user/assets/css/angular-bootstrap-lightbox.css',
                'public/app/libs/angular/angularjs-toaster/toaster.css',
                'public/app/libs/angular-rateit/dist/rateit.css',
                'public/app/libs/angular/ng-typeahead/dist/ng-typeahead.css',
                'public/app/user/assets/css/app.css',
                'public/app/user/assets/css/nga.all.min.css',
                'public/app/user/assets/css/rzslider.css',
                'public/app/user/assets/css/slick.css',
                'public/app/user/assets/css/slick-theme.css',
                'public/app/user/assets/css/animate.css',
                'public/app/user/libs/jquery/select2/dist/css/select2.min.css'
            ],
            'public/app/user/assets/css/app-all.css'
        );

    mix.version(
            [
                'public/app/user/assets/css/app-all.css',
                'public/app/user/ngApp/scripts/app-all.js'
            ]
        );

});

在这里,没有自定义任务用户,路径总是相似的(前面没有 / 或 ./),我们避免链接混合函数的调用 - 所有这些都是为了调试并尝试制作你的代码工作

你得到了什么结果?你的控制台/终端有什么输出?你有什么输出

  • public/app/user/ngApp/scripts/app-all.js
  • public/app/user/assets/css/kit.css
  • 和 public/app/user/assets/css/app-all.css

【讨论】:

  • 在您的代码中,路径有时是绝对的,(/path/foo/bar/)有时是相对的(path/foo/bar/ 或 ./path/foo/bar/)
  • 我的代码太荒谬了。我想隔离在开发时实施的客户端和管理资产,以及开发速度。通过执行 gulp --usergulp --admin 之类的命令,我解决了它。还是谢谢
猜你喜欢
  • 2015-03-30
  • 2015-10-12
  • 2016-07-05
  • 2016-07-23
  • 1970-01-01
  • 2016-10-02
  • 1970-01-01
  • 1970-01-01
  • 2015-05-10
相关资源
最近更新 更多