Serve different assets based on environment

Is there a way to serve different assets based on environment: development and production ? For example, i want to serve minified files on production and unminified files on development.

If i could create a variable in package.json file and to use this variable within handlebars helpers would be awesome, but i can’t.

Any ideas ?
Thanks.

Ghost does this by default, but there’s a piece of the puzzle which is undocumented :see_no_evil:

You can however see it at work in the internal templates like private.hbs, unsubscribe.hbs and error.hbs.

<link rel="stylesheet" href="{{asset "public/ghost.css" hasMinFile="true"}}"/>

If you have a file that has a minified version, supply the unminified version

Thanks for the answer, but unfortunately i am not looking for this kind of functionality.

What i am looking for is to serve different files like in this example:

{{#if development}}
    <link href="{{asset "css/1st-file.css" }}" rel="stylesheet">
    <link href="{{asset "css/2nd-file.css" }}" rel="stylesheet">
    <link href="{{asset "css/3rd-file.css" }}" rel="stylesheet">
    <link href="{{asset "css/style.css" }}" rel="stylesheet">
{{else}}
    <link href="{{asset "css/style.min.css" }}" rel="stylesheet">
{{/if}}

Where style.min.css includes all the css files (bundle created with gulp). The gulp command is made by GitHub Actions when i commit a new change.

The idea here is to be able to download the theme from GitHub, edit the files, commit to GitHub that does the hard part for me: minify all the css and js files, archive the theme files, upload the .zip theme to Ghost (using this command).

The hasMinFile feature has now been documented. There’s no way to do what you’re looking for…

The way to get around this would be to have your top level style.css file use @import to include all the other files. That way you can use the system Ghost has built in.

Building minified files from src files is straightforward - we do this in almost all Ghost’s native themes. Starter here is a good example - GitHub - TryGhost/Starter: A development starter theme for Ghost

If you’re looking to make local development easier in terms of being able to inspect CSS and figure out where to edit it, I’d suggest using SourceMaps as a part of your gulp setup, which will take care of this automatically.

1 Like

Sounds a little bit crazy to build all the CSS & JS files on every small CSS or JS edit.
And i need to wait for livereload(), when this finishes. Is not that productive.

To solve the problem, i used a custom config variable in the package.json file. When i commit to the repo, GitHub Action will delete that from package.json. In this way, i know when i’m in development or production.

I mean, most front end development has worked this way for the better part of 10 years, it’s not exactly a weird workflow :) compiling and reloading assets with gulp typically takes under 0.2s.