Laravel 5 Elixir css/js not coming into public/ di

Question

I read the documentation available for Laravel 5's new Elixir.

I have written this code and run gulp multiple times, however, the compiled/minified css and js are not coming in:

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've run npm install and gulp in the CLI and I get this output (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's the problem here? I also watched the Laracast and it seems I'm doing everything properly.

It's difficult to find a good answer given this is new.

Answer 1

Check your package.json file - I've been trying to fix this issue for myself this morning, and it turns out that Elixir is a little buggy at the moment.

I'd been trying to run multiple .scripts() functions (one for head scripts, one for foot scripts) which didn't work until I found this post which said to update to version 0.4.x of Elixir. I did that, and suddenly the scripts seemed to be compiling.

Then they stopped appearing in /public/js for no reason that I could find, and downgrading back to 0.3.* has made them come back.

My package.json looks like this right now:

{
    "devDependencies": {
        "gulp": "^3.8.9",
        "laravel-elixir": "^0.3.*"
    }
}

Answer 2

I have the same problem. Just started to debug this and so far I can tell that problem is caused by the fact that there is incorrect src variable passed to gulp-less from elixir:

[ 'undefined/resources/assets/less/site.less' ]

As you can see, it is prefixed by "undefined".

If one would pass correct path string into the function (in GulpCssCompiler), then it works fine.

return gulp.src('resources/assets/less/site.less')
            .pipe(plugins[options.pluginName](options.pluginOptions))

I will look into this some more.

EDIT: There seems to be an error in 'GulpCssCompiler.js' file. Short fix: Replace on line 11:

    options.src, options.assetsDir, options.search

with:

    options.src, config.assetsDir, options.search

and use 'less/file.less' in gulpfile (this presumes that resources/assets is the assetsdir)

Answer 3

Elixir will assume that the stylesheets and scripts that you're concatenating are located in the public/ directory. To override that, 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're trying to concatenate one file in each of those blocks... Maybe that was just for your code snippet.)