Search code examples
gulplaravel-5.3laravel-elixir

Gulp not producing expected app.css result in laravel 5.3 running in homestead


Gulp is appending a leading '/' to the app.css mix.styles items and the output is consequentially 'unsual' , but the app.js mix.scripts output is perfectly fine. The question is - why is this only happening to the mix.styles portion when the gulpfile.js path structure is essentially the same format? and where is the reference to fonts.googleapis coming from?

I'm running laravel 5.3 in homestead in windows 10 bootcamp with PhpStorm

gulp output:

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');
});

Here is the app.css output:

@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 */

Solution

  • Found a strange and simple solution - running 'gulp watch' instead of just 'gulp' as I had been doing, produces the expected app.css result.