3

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.

Improve this question

3 Answers 3

Reset to default
11

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.)

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

The legend himself solves my problem. Thanks. (yes it was just an example). It should still work even if there's only one file, right?
Yes. I just tried out my code example with Elixir, and it works.
2

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.*"
    }
}
Improve this answer

1 Comment

Changed package.json and ran npm update, then ran gulp. Still not there.
0

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)

Improve this answer

2 Comments

my pull request was just merged into elixir package, so in theory you can do an update and it should work. github.com/laravel/elixir/pull/16 Remember to use 'less/filename.less' in gulpfile, if it does not work out of the box.
Slight misread from my side. But as you can see, the issue is/was in the proper assetdir.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.