清空libs.css和libs.js文件

Question

我使用webpack编译了我的样式和脚本,但我注意到libs.css和libs.js文件是空的,而我在app.cs和app.js文件中有条目.这是我的npm设置:

: - webpack.mix.js:

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js/')
    .sass('resources/assets/sass/app.scss', 'public/css/');


mix.styles([

           'libs/animate.css',
           'libs/animations.css',
           'libs/app.css',
           'libs/bootstrap-theme.css',           
           'libs/bootstrap.css',                    
           'libs/custom.css',
           'libs/font-awesome.min.css',
           'libs/head-custom.css',
           'libs/sb-admin-2.css',           
           'libs/sticky.css',
           'libs/style.css',



       ], './public/css/libs.css');


mix.scripts([

    'libs/app.js',
    'libs/bootstrap.js',
    'libs/custom.js',
    'libs/gmap.js',
    'libs/ipad.js',
    'libs/jquery.form.min.js',
    'libs/jquery.min.js',
    'libs/jquery.pjax.js',
    'libs/jquery.slim.min.js',
    'libs/myform.js',
    'libs/sb-admin-2.js',
    'libs/sb-admin-2.min.js',
    'libs/sticky.js',
    'libs/template.js',


], './public/js/libs.js');

mix.scripts([

    '/plugins/jquery.appear.js',
    '/plugins/jquery.backstretch.min.js',           
    '/plugins/modernizr.js',
    '/plugins/libs3/jquery.js',


], './public/js/plugins/plugins.js');


mix.scripts([

    '/libs/isotope.pkgd.js',

], './public/js/plugins/isotope/isotope.js');

: - mix-manifest.json:

{
  "/js/app.js": "/js/app.js",
  "/css/app.css": "/css/app.css",
  "./public/css/libs.css": "./public/css/libs.css",
  "./public/js/libs.js": "./public/js/libs.js",
  "./public/js/plugins/plugins.js": "./public/js/plugins/plugins.js",
  "./public/js/plugins/isotope/isotope.js": "./public/js/plugins/isotope/isotope.js"
}

: - 资源文件夹的目录结构:

resources/
??? assets
?   ??? css
?   ?   ??? libs
?   ?       ??? animate.css
?   ?       ??? animations.css
?   ?       ??? app.css
?   ?       ??? bootstrap.css
?   ?       ??? bootstrap.min.css
?   ?       ??? bootstrap-theme.css
?   ?       ??? bootstrap-theme.min.css
?   ?       ??? custom.css
?   ?       ??? font-awesome.min.css
?   ?       ??? head-custom.css
?   ?       ??? sb-admin-2.css
?   ?       ??? sb-admin-2.min.css
?   ?       ??? sticky.css
?   ?       ??? style.css
?   ??? js
?   ?   ??? app.js
?   ?   ??? bootstrap.js
?   ?   ??? components
?   ?   ?   ??? Example.vue
?   ?   ??? libs
?   ?   ?   ??? app.js
?   ?   ?   ??? bootstrap.js
?   ?   ?   ??? custom.js
?   ?   ?   ??? gmap.js
?   ?   ?   ??? ipad.js
?   ?   ?   ??? isotope.pkgd.js
?   ?   ?   ??? jquery.form.min.js
?   ?   ?   ??? jquery.min.js
?   ?   ?   ??? jquery.pjax.js
?   ?   ?   ??? jquery.slim.min.js
?   ?   ?   ??? myform.js
?   ?   ?   ??? sb-admin-2.js
?   ?   ?   ??? sb-admin-2.min.js
?   ?   ?   ??? sticky.js
?   ?   ?   ??? template.js
?   ?   ??? plugins
?   ?       ??? jquery.appear.js
?   ?       ??? jquery.backstretch.min.js
?   ?       ??? libs3
?   ?       ?   ??? jquery.js
?   ?       ??? modernizr.js
?   ??? sass
?       ??? app.scss
?       ??? _variables.scss

Answer 1

经过大量研究，我能够使用 Laravel 项目来确定空文件的原因。正确的语法应该是这样的：

mix.js('resources/assets/js/app.js', 'public/js/libs.js') .sass('resources/assets/sass/app.scss', 'public/css/libs.css' ）；

我应该指定目标文件，因此正确的语法类似于：

````

const { mix } = require('laravel-mix');

mix

.js('resources/assets/js/app.js', 'public/js/app.js')
.js('resources/assets/js/bootstrap.js', 'public/js/app.js')
.js('resources/assets/js/plugins/jquery.appear.js', 'public/js/plugins/jquery.appear.js')
.js('resources/assets/js/plugins/jquery.backstretch.min.js', 'public/js/plugins/jquery.backstretch.min.js')
.js('resources/assets/js/plugins/modernizr.js', 'public/js/plugins/modernizr.js')    
.combine([        
    'resources/assets/js/libs/app.js',
    'resources/assets/js/libs/bootstrap.js',
    'resources/assets/js/libs/custom.js',
    'resources/assets/js/libs/gmap.js',
    'resources/assets/js/libs/ipad.js',
    'resources/assets/js/libs/jquery.form.min.js',
    'resources/assets/js/libs/jquery.min.js',
    'resources/assets/js/libs/jquery.pjax.js',
    'resources/assets/js/libs/jquery.slim.min.js',
    'resources/assets/js/libs/myform.js',
    'resources/assets/js/libs/sb-admin-2.js',
    'resources/assets/js/libs/sb-admin-2.min.js',
    'resources/assets/js/libs/sticky.js',
    'resources/assets/js/libs/template.js',], 'public/js/libs/libs.js')
.js('resources/assets/js/isotope/isotope.pkgd.min.js', 'public/js/plugins/isotope/isotope.pkgd.min.js')
.sass('resources/assets/sass/app.scss', 'public/css/lib.css')
.version();

````

该combine语法应该用于合并我的javascript文件。

帮助来源：

https://github.com/udoyen/blender