Laravel 混合和导入文件

Question

我正在使用 Laravel 7 并且在 public/js 中有相当多的 javascript 文件，我目前可以在我的应用程序模板中添加这些文件，例如

<script src="{{ asset('js/stt.js') }}"></script>
<script src="{{ asset('js/ilightbox.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/jquery.requestAnimationFrame.js') }}"></script>
<script src="{{ asset('js/jquery.mousewheel.js') }}"></script>
<script src="{{ asset('js/sidenav.js') }}" defer></script>
<script src="{{ asset('js/spectrum.js') }}" defer></script> 
<script src="{{ asset('js/jquery.printElement.js') }}" defer></script>

我还有一堆css比如

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/sidenav.css') }}" rel="stylesheet" />
<link href="{{ asset('jqueryui/jquery-ui.min.css') }}" rel="stylesheet" />
<link href="{{ asset('jqueryui/jquery-ui.structure.min.css') }}" rel="stylesheet" />
<link href="{{ asset('jqueryui/jquery-ui.theme.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/stt.css') }}" rel="stylesheet" />
<link href="{{ asset('css/general.css') }}" rel="stylesheet" />
<link href="{{ asset('css/ilightbox.css') }}" rel="stylesheet" />
<link href="{{ asset('css/flex.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="{{asset('fontawesome/css/all.css')}}">

我完全不明白将这些包含在混合中以及要在 webpack.mix.js 文件中使用的语法。

根据评论，我将混合文件更改为：

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css'),
.css(
    ['public/css/sidenav.css',
    'public/css/general.css',
    'resources/asset/jqueryui/jquery-ui.min.css',
    'resources/asset/jqueryui/jquery-ui.structure.min.css',
    'public/css/stt.css',
    'public/css/ilightbox.css',
    'public/css/flex.css',
    'public/css/general.css',
    'resources/asset/fontawesome/css/all.css',
    'public/css/smartforms/smart-forms.css',
    'public/css/smartforms/smart-themes/blue.css',
    'public/css/hover-min.css',
    'public/css/klik.css',
    'public/css/spectrum.css',
    'public/css/infobox.css',
    ],'resources/css/app.css','public/css'),

 .postCss('resources/css/app.css', 'public/css', [
    require('tailwindcss')],

但是当我运行它时我得到了错误并且 npm 日志文件是

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\Program Files\nodejs\node.exe',
1 verbose cli   'C:\Users\Jim\AppData\Roaming\npm\node_module\npm\bin\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'dev'
1 verbose cli ]
2 info using npm@6.14.10
3 info using node@v14.15.3
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle @~predev: @
6 info lifecycle @~dev: @
7 verbose lifecycle @~dev: unsafe-perm in lifecycle true
8 verbose lifecycle @~dev: PATH: C:\Users\Jim\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Laravel\jsp\node_modules\.bin;C:\Python39\Scripts\;C:\Python39\;C:\Python27\;C:\Python27\Scripts;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;c:\php;c:\bat;C:\Program Files\Calibre2\;C:\ProgramData\ComposerSetup\bin;C:\Program Files\PuTTY\;C:\ProgramData\chocolatey\bin;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\Program Files\dotnet\;C:\Program Files\MySQL\MySQL Shell 8.0\bin\;C:\Users\Jim\AppData\Local\Microsoft\WindowsApps;C:\Users\Jim\AppData\Local\atom\bin;C:\Users\Jim\AppData\Roaming\Composer\vendor\bin;C:\Program Files\nodejs;C:\Program Files\Git\bin;C:\Users\Jim\AppData\Roaming\npm;C:\Users\Jim\.dotnet\tools
9 verbose lifecycle @~dev: CWD: C:\Laravel\jsp
10 silly lifecycle @~dev: Args: [ '/d /s /c', 'npm run development' ]
11 silly lifecycle @~dev: Returned: code: 1  signal: null
12 info lifecycle @~dev: Failed to exec dev script
13 verbose stack Error: @ dev: `npm run development`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\Jim\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\Jim\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid @
15 verbose cwd C:\Laravel\jsp
16 verbose Windows_NT 10.0.18363
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\Jim\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "dev"
18 verbose node v14.15.3
19 verbose npm  v6.14.10
20 error code ELIFECYCLE
21 error errno 1
22 error @ dev: `npm run development`
22 error Exit status 1
23 error Failed at the @ dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

提前致谢！

Answer 1

在Javascript方法链中，不需要用逗号(,)分隔。

您可能遇到了以下语法错误

webpack.mix.js:15
    .css([
    ^

SyntaxError: Unexpected token '.'

...

npm ERR! errno 1

并尝试使用 styles() 而不是 css() 进行简单合并。

试试这个。

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .styles(
        [
            'public/css/sidenav.css',
            'public/css/general.css',
            'resources/asset/jqueryui/jquery-ui.min.css',
            'resources/asset/jqueryui/jquery-ui.structure.min.css',
            'public/css/stt.css',
            'public/css/ilightbox.css',
            'public/css/flex.css',
            'public/css/general.css',
            'resources/asset/fontawesome/css/all.css',
            'public/css/smartforms/smart-forms.css',
            'public/css/smartforms/smart-themes/blue.css',
            'public/css/hover-min.css',
            'public/css/klik.css',
            'public/css/spectrum.css',
            'public/css/infobox.css',
        ], 'public/css/app-combine.css')
//    .postCss('resources/css/app.css', 'public/css', [
//        require('tailwindcss')
//    ])

<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
<link rel="stylesheet" href="{{ mix('/css/app-combine.css') }}">

resources/sass/app.scss -> public/css/app.css

如果成功没有问题，我建议您区分应用程序和供应商如下。

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .styles(
        [
            'resources/asset/jqueryui/jquery-ui.min.css',
            'resources/asset/jqueryui/jquery-ui.structure.min.css',
            'resources/asset/fontawesome/css/all.css',
        ], 'public/css/vendor-combine.css')
    .styles(
        [
            'public/css/sidenav.css',
            'public/css/general.css',
            'public/css/stt.css',
            'public/css/ilightbox.css',
            'public/css/flex.css',
            'public/css/general.css',
            'public/css/smartforms/smart-forms.css',
            'public/css/smartforms/smart-themes/blue.css',
            'public/css/hover-min.css',
            'public/css/klik.css',
            'public/css/spectrum.css',
            'public/css/infobox.css',
        ], 'public/css/app-combine.css')
//    .postCss('resources/css/app.css', 'public/css', [
//        require('tailwindcss')
//    ])

<link rel="stylesheet" href="{{ mix('/css/vendor-combine.css') }}">
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
<link rel="stylesheet" href="{{ mix('/css/app-combine.css') }}">

Laravel 混合文档 - https://laravel-mix.com/docs/6.0/concatenation-and-minification

Laravel 混合和导入文件

Laravel Mix and importing files

laravel

laravel-mix