Gulp 没有产生预期的 app.css 结果 laravel 5.3 运行 在宅基地
Gulp not producing expected app.css result in laravel 5.3 running in homestead
Gulp 将前导 '/' 附加到 app.css mix.styles 项并且输出结果是 'unsual' ,但是 app.js mix.scripts 输出完全没问题。
问题是 - 当 gulpfile.js 路径结构本质上是相同格式时,为什么这只发生在 mix.styles 部分? 以及对 [= 的引用在哪里38=] 来自?
我 运行 laravel 5.3 在宅基地 windows 10 PhpStorm 训练营
gulp 输出:
gulp output - note the leading slash in mix.styles '/resources . . .' should just be 'resources . . .' as in mix.scripts
gulpfile.js:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
var vendor_path = 'resources/assets/vendor';
var path = {
'jquery' : vendor_path + '/jquery',
'jqwidgets' : vendor_path + '/jqx/jqwidgets',
'jqxscripts' : vendor_path + '/jqx/scripts',
'bootstrap' : vendor_path + '/bootstrap'
};
elixir(function(mix){
/* Mix Styles */
mix.styles([
path.jqwidgets + '/styles/jqx.arctic.css',
path.jqwidgets + '/styles/jqx.bootstrap.css'
],
'public/css/app.css', '/');
/* Mix scripts */
mix.scripts([
path.jquery + '/dist/jquery.js',
path.bootstrap + '/dist/js/bootstrap.js',
path.jqxscripts + '/jquery-1.11.1.min.js',
path.jqwidgets + '/jqxcore.js',
path.jqwidgets + '/jqxdata.js',
path.jqwidgets + '/jqxbuttons.js',
path.jqwidgets + '/jqxmenu.js',
path.jqwidgets + '/jqxcheckbox.js',
path.jqwidgets + '/jqxlistbox.js',
path.jqwidgets + '/jqxscrollbar.js',
path.jqwidgets + '/jqxdropdownlist.js',
path.jqwidgets + '/jqxgrid.js',
path.jqwidgets + '/jqxgrid.selection.js'
],
'public/js/app.js', './');
mix.sass('app.scss')
.webpack('app.js');
});
这里是 app.css 输出:
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
@import url(/resources/assets/vendor/bootstrap/dist/css/bootstrap.css);
/*# sourceMappingURL=app.css.map */
我已经测试了您的代码,删除了第三个参数,它按预期工作:
mix.styles([
path.jqwidgets + '/styles/jqx.arctic.css',
path.jqwidgets + '/styles/jqx.bootstrap.css'
],
'public/css/app.css');
sass 及以下的相同测试。
找到了一个奇怪而简单的解决方案 - 运行 'gulp watch' 而不是我一直在做的 'gulp',产生了预期的 app.css 结果。
Gulp 将前导 '/' 附加到 app.css mix.styles 项并且输出结果是 'unsual' ,但是 app.js mix.scripts 输出完全没问题。 问题是 - 当 gulpfile.js 路径结构本质上是相同格式时,为什么这只发生在 mix.styles 部分? 以及对 [= 的引用在哪里38=] 来自?
我 运行 laravel 5.3 在宅基地 windows 10 PhpStorm 训练营
gulp 输出:
gulp output - note the leading slash in mix.styles '/resources . . .' should just be 'resources . . .' as in mix.scripts
gulpfile.js:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
var vendor_path = 'resources/assets/vendor';
var path = {
'jquery' : vendor_path + '/jquery',
'jqwidgets' : vendor_path + '/jqx/jqwidgets',
'jqxscripts' : vendor_path + '/jqx/scripts',
'bootstrap' : vendor_path + '/bootstrap'
};
elixir(function(mix){
/* Mix Styles */
mix.styles([
path.jqwidgets + '/styles/jqx.arctic.css',
path.jqwidgets + '/styles/jqx.bootstrap.css'
],
'public/css/app.css', '/');
/* Mix scripts */
mix.scripts([
path.jquery + '/dist/jquery.js',
path.bootstrap + '/dist/js/bootstrap.js',
path.jqxscripts + '/jquery-1.11.1.min.js',
path.jqwidgets + '/jqxcore.js',
path.jqwidgets + '/jqxdata.js',
path.jqwidgets + '/jqxbuttons.js',
path.jqwidgets + '/jqxmenu.js',
path.jqwidgets + '/jqxcheckbox.js',
path.jqwidgets + '/jqxlistbox.js',
path.jqwidgets + '/jqxscrollbar.js',
path.jqwidgets + '/jqxdropdownlist.js',
path.jqwidgets + '/jqxgrid.js',
path.jqwidgets + '/jqxgrid.selection.js'
],
'public/js/app.js', './');
mix.sass('app.scss')
.webpack('app.js');
});
这里是 app.css 输出:
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
@import url(/resources/assets/vendor/bootstrap/dist/css/bootstrap.css);
/*# sourceMappingURL=app.css.map */
我已经测试了您的代码,删除了第三个参数,它按预期工作:
mix.styles([
path.jqwidgets + '/styles/jqx.arctic.css',
path.jqwidgets + '/styles/jqx.bootstrap.css'
],
'public/css/app.css');
sass 及以下的相同测试。
找到了一个奇怪而简单的解决方案 - 运行 'gulp watch' 而不是我一直在做的 'gulp',产生了预期的 app.css 结果。