Laravel 5 Elixir css / js is not in public / directory after running 'gulp' in CLI
I have read the documentation available for the new Laravel 5 elixir.
I wrote this code and ran gulp several times, however the compiled / minified css and js are not included:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix
.styles([
"resources/assets/components/bootstrap/dist/css/bootstrap.css"
])
.scripts([
"resources/assets/components/jquery/dist/jquery.js"
])
.version('css/app.css');
});
I ran npm install
and gulp
in the CLI, and I get this conclusion (which seems normal):
[05:15:58] Starting 'default'...
[05:15:58] Starting 'styles'...
[05:16:00] Finished 'default' after 1.32 s
[05:16:00] Finished 'styles' after 1.32 s
[05:16:00] Starting 'scripts'...
[05:16:00] Finished 'scripts' after 456 ms
[05:16:00] Starting 'version'...
[05:16:00] Finished 'version' after 2.6 ms
vagrant@homestead:~/Code/fixer$
What is the problem? I've also watched Laracast and it seems like I'm doing everything right.
It's hard to find a good answer considering this is new.
Elixir will assume that the stylesheets and scripts you are concatenating are in the public / directory. To override this, set the base directory.
elixir(function(mix) {
mix
.styles([
"components/bootstrap/dist/css/bootstrap.css"
], "resources/assets")
.scripts([
"components/jquery/dist/jquery.js"
], "resources/assets")
.version('css/app.css');
});
(But also remember that you are trying to concatenate one file in each of these blocks ... It might have been just for your piece of code.)
source to share
Check your file package.json
- I was trying to fix this for myself this morning and it turns out Elixir is a little buggy at the moment.
I tried to run multiple .scripts()
functions (one for main scripts, one for foot scripts) which didn't work until I found this post which said to upgrade to 0.4.x version of Elixir. I did this and all of a sudden the scripts seemed to compile.
They then stopped appearing in /public/js
for whatever reason I could find and dropped back down to 0.3. * made them come back.
Mine package.json
looks like this:
{
"devDependencies": {
"gulp": "^3.8.9",
"laravel-elixir": "^0.3.*"
}
}
source to share
I have the same problem. Just started debugging this and so far I can tell that the problem is that there is an invalid src variable passed to gulp, without an elixir:
[ 'undefined/resources/assets/less/site.less' ]
As you can see, it is prefixed with "undefined".
If someone passes the correct path string to the function (in GulpCssCompiler) then it works fine.
return gulp.src('resources/assets/less/site.less')
.pipe(plugins[options.pluginName](options.pluginOptions))
I'll go over this a little more.
EDIT: Error in GulpCssCompiler.js file. Short fix: Replace on line 11:
options.src, options.assetsDir, options.search
from:
options.src, config.assetsDir, options.search
and use "less / file.less" in the gulpfile (this assumes resources / assets are assets).
source to share