Hiding irrelevant build files

Is there a particular reason why you need to keep all the files in the exact same directory? You could easily gitignore the folder with the minified files if you just kept them separated from the non-minified ones. It usually comes down to simply editing a few lines in the elixir (or mix) file.

Edit: you could also use a wildcard in your gitignore file to only ignore files starting with a specific name, e.g. app*.css

I would second what @Nash says. You can just keep all unprocessed js/css files somewhere like your Laravel resources directory:

-resources
--assets
---css
---js
---sass

then git ignore your public/build/css + public/build/js directories and only use them for minified files?

@Nash Elixir .version() is outputting to the same place, public/build, and does not make the file names recognisably different, whether I run gulp watch or gulp --production, so it seems I cannot target dev vs production builds independently with this tool.

@Screenbeetle Isn't public/build needed by elixir() to resolve the versioned file when you include it in your views? So that's going to be needed in production and so I need it in the repo (I'm deploying via git).

What I'd like to do is .gitignore all dev (un-minified) builds only, so those build artifacts are not always in my face, then silently do the production build via a pre-commit hook (i think... ).

@miwal Example with multiple files:

elixir(function(mix) {
    mix.styles(['stylesheet1.css', 'stylesheet2.css'], 'public/css/all.css')
        .version('css/all.css');
});

This will look for stylesheet1.css and stylesheet2.css under resources/assets/css (default) and save their contents to public/css/all.css. The production build (versioned file) will be under public/build/css

Hi @miwal

Isn't public/build needed by elixir() to resolve the versioned file when you include it in your views? So that's going to be needed in production and so I need it in the repo (I'm deploying via git).

What version of Laravel are you using? I only have L5.3+ projects (edit - sorry I said 5.2 before) on this machine but they all seem to allow an override to the default public/build path

elixir(function(mix) {
    mix.version(['css/everything.css'], 'public'); //builds to public/css
});

// then in view using the elixir helper:
<link rel="stylesheet" href="{{ elixir('css/everything.css', null) }}">

What I'd like to do is .gitignore all dev (un-minified) builds only, so those build artifacts are not always in my face, then silently do the production build via a pre-commit hook (i think... ).

Unless I'm missing something - and obviously assuming you can do the above which may need version L5.3+ - then you can relocate and build files into gitignored directories as needed.

Hi @Screenbeetle

I'm on 5.3. Yes that works - I can add a second argument to .version() and it puts the hashed filenames plus the rev-manifest which elixir uses in that target directory.

This gives us step 1 to solve this. Great.

If my goal is sound, as step 2 we'll then need to branch based on whether it's a dev or production build, like this:

• If build = dev, .version() to a dir that we .gitignore

• If build = production, .version() to a dir that we don't.

There seems to be an elixir.config.production variable somewhere, which I haven't quite got my head around:

https://laracasts.com/discuss/channels/general-discussion/can-elixir-version-be-run-only-on-production

I tried to hack this but couldn't get it to work - my grasp of the js syntax of the gulp file is poor...

Good morning @miwal !

I've not ever done this before but that thread looks like it has the answer. Have you tried setting the output path (or whatever) using the production condition from @Shovels' answer?

something like this maybe?

elixir(function (mix) {
    if (elixir.config.production) {
        mix.version('css/everything.css', 'public/gitvisible/');
    } else {
            mix.version('css/everything.css', 'public/gitignored/');
    }
});

// and obviously remember to use the production flag
gulp --production

Could you post your code when you've figured it out - be good to know.

Hi @Screenbeetle

if (elixir.config.production) {
    mix.version(['css/app.css', 'js/app.js'], 'public/build')  
        // 'public/build' above is also the default output dir in any case
}
if (! elixir.config.production) {
    mix.version(['css/app.css', 'js/app.js'], 'public/build-dev') 
       // add 'public/build-dev' to your .gitignore
}

You must then include this in your blade layout file:

@if(config('app.env') === 'local')
    <link href="{{ elixir('css/app.css', 'build-dev') }}" rel="stylesheet">
@else
    <link href="{{ elixir('css/app.css') }}" rel="stylesheet">
@endif

plus the equivalent for your app.js

Finally, in your project directory, in .git/hooks/pre-commit

#!/usr/bin/env sh
echo 'Running pre-commit hook'
gulp --production
git add ./public/build/css ./public/build/js ./public/build/rev-manifest.json

This works fine for me with git CLI – stops all the garbage appearing in Github desktop while I'm working, plus does the production build automatically before every commit.

Unfortunately I haven't yet got Github Desktop to fully run this hook, it does run the hook itself, but not gulp, for some reason, so I have to manually run gulp --production before committing if I want to commit with Github Desktop, which is not a huge problem except that might forget to do it. http://stackoverflow.com/questions/43279311/git-hook-not-completing-on-github-desktop-for-mac

Glad you got it sorted @miwal

I reckon its worth setting your final answer as the best reply. In a long thread, this helps people see the that original question got a conclusive answer.

All the best