<p>You could write some PHP at the top of your <code>general.php</code> file that reads the JSON manifest in your public root directory, and add its keys/values to the config array. I wouldn't use environment variables here, personally – just add the manifest to the returned array in <code>general.php</code>: </p>

<pre><code>// In general.php:

$assetsManifest = @json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'].'/assets/assets.json')) ?: [];

return array(
    '*' =&gt; array(
        ...
        'assets' =&gt; (array)$assetsManifest,
    ),
);
</code></pre>

<p>...and in your template:</p>

<pre><code>&lt;script src="{{ craft.config.assets['main.js'] ?? 'main.js' }}"&gt;&lt;/script&gt;
</code></pre>

<p>Be advised that the null-coalescing operator (<code>??</code>) was just added in Craft 2.6 – if you haven't updated yet, you can use the <code>default</code> filter instead:</p>

<pre><code>&lt;script src="{{ craft.config.assets['main.js']|default('main.js') }}"&gt;&lt;/script&gt;
</code></pre>

<p>Another approach for getting revved asset filenames in templates, is to use a plugin which adds either a custom <a href="https://craftcms.com/docs/plugins/variables" rel="nofollow">template variable method</a> or Twig filter/function to Craft. For an example of the latter, see Viget Labs' <a href="https://github.com/vigetlabs/gulp-starter/tree/master/extras/craft" rel="nofollow">Gulp Rev Craft plugin</a>, which is bundled with their awesome Gulp Starter repo. Here's how revving works using this particular plugin:</p>

<pre><code>&lt;script src="{{ 'main.js'|gulp_rev }}"&gt;&lt;/script&gt;
</code></pre>

<p>For me, individual asset filenames in the config feels a bit off and the custom filter option seems a lot cleaner, so I'm personally going with that approach.</p>

CC BY-SA 3.0
2016-04-05T14:18:59.243Z
What an amazing helpful reply. Answered my question and gave me an even better alternative whilst explaining why it's a better idea. I've had a quick play and first method works great and I'm now going to give your second suggestion a go. Thanks for taking the time to answer :)
lotech
CC BY-SA 3.0
2016-04-06T06:17:23.403Z
No problem, @lotech – very cool that I was able to help you out!
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-04-05T11:09:05.263Z
2016-04-05T11:09:05.263Z
Mats Mikkel Rummelhoff
<p>Thanks for this it helped a lot! I am using grunt-assets-versioning and took me some time to get it to work properly, so let me share my approach.</p>

<p>So grunt-assets-versioning creates the file <strong>/public/css/app.json</strong></p>

<pre><code>[{
  "version":"b2ff9f",
  "originalPath":"public/css/app.css",
  "versionedPath":"public/css/app.b2ff9f.css"
 }]
</code></pre>

<p>The trick is to use @json_decode(path, <strong>true</strong>) , so add this to your general.php</p>

<pre><code>$appCSS = @json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'].'/css/app.json'), true) ?: [];

return array(
    ...
    'appCSS' =&gt; str_replace('public', '', $appCSS[0]['versionedPath'])
);
</code></pre>

<p>Remove the word 'public' so the final path will be "/css/app.b2ff9f.css"</p>

<p>Now you can call the file from your template.</p>

<pre><code>&lt;link rel="stylesheet" href="{{ craft.config.vendorCSS ?? '/css/vendor.css' }}"&gt;
</code></pre>

CC BY-SA 4.0
2018-11-05T12:32:04.293Z
2018-11-05T12:32:04.293Z
Leo Leoncio
<p>So while this is not a direct answer the the questions asked here, I think these resources (which weren't written at the time of the posted question) might be useful to someone else in the same situation.</p>

<p>Re: using Gulp with Craft:</p>

<ul>
<li><a href="https://nystudio107.com/blog/a-better-package-json-for-the-frontend" rel="nofollow noreferrer">A Better package.json for the Frontend</a></li>
<li><a href="https://nystudio107.com/blog/a-gulp-workflow-for-frontend-development-automation" rel="nofollow noreferrer">A Gulp Workflow for Frontend Development Automation</a></li>
</ul>

<p>If you're interested in using a modern webpack setup to for the same:</p>

<ul>
<li><a href="https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development" rel="nofollow noreferrer">An Annotated webpack 4 Config for Frontend Web Development</a></li>
<li><a href="https://github.com/nystudio107/craft-twigpack" rel="nofollow noreferrer">Twigpack plugin</a></li>
</ul>

CC BY-SA 4.0
2018-11-05T17:49:57.500Z
2018-11-05T17:49:57.500Z
andrew.welch
<p>Brand new to Craft here. I'm trying to port across my gulp workflow to Craft and basically everything has gone super smooth. Just one last obstacle due to my lack of knowledge of the Twig templating engine and some of the internal workings of Craft.</p>

<p>Basically, for production, I run gulp with a <code>--production</code> flag. This appends a string of numbers and letters to the asset's file name (as well as removing source maps etc.), such as <code>main-5449f384.css</code>, to help with caching. A list of the resulting asset filenames is stored in a JSON file at <code>public/dist/assets.json</code>. The contents of the file is akin to:</p>

<pre><code>{
  "main.css": "main-5449f384.css",
  "modernizr.js": "modernizr-45f0e1f4.js",
  "jquery.js": "jquery-e735354d.js",
  "main.js": "main-b7e504b0.js"
}
</code></pre>

<p>Separately, in my <code>general.php</code> config file, I've set up environment variables so I can use local asset paths in local and dev environments and a CDN based path in production:</p>

<pre><code>return array(
    '*' =&gt; array(
        'appId' =&gt; 'example',
        'omitScriptNameInUrls' =&gt; true,
    ),

    'example.com' =&gt; array(
        'devMode' =&gt; false,
        'assetUrl' =&gt; 'https://cdn.example.com/',
    ),

    'craft' =&gt; array(
        'devMode' =&gt; true,
        'local' =&gt; true,
        'assetUrl' =&gt; 'http://craft:8888/',
    )
);
</code></pre>

<p>I had figured that to finalise the whole workflow, my <code>head</code> section within <code>craft/templates/_layout.html</code> would look something like (using a if statement to get the current environment):</p>

<p><strong>Local</strong></p>

<pre><code>&lt;script src="{{ craft.config.assetUrl }}dist/scripts/main.js"&gt;&lt;/script&gt;
</code></pre>

<p><strong>Live (pseudocode)</strong></p>

<pre><code>&lt;script src="{{ craft.config.assetUrl }}dist/scripts/{{ assets.json.main.js }}"&gt;&lt;/script&gt;
</code></pre>

<p>Is there a way to either set an environment variable based on the contents of the JSON file or to access to JSON file contents directly from within the template file? Or perhaps there's a much better way of doing this altogether (I'd quite like to keep the currently gulp workflow as is if possible)!</p>

<assets><javascript><json>
Creating environment variable from JSON file
# Creating environment variable from JSON file

(Asked by: username_0 on 2016-04-05)

Brand new to Craft here. I'm trying to port across my gulp workflow to Craft and basically everything has gone super smooth. Just one last obstacle due to my lack of knowledge of the Twig templating engine and some of the internal workings of Craft.
Basically, for production, I run gulp with a --production flag. This appends a string of numbers and letters to the asset's file name (as well as removing source maps etc.), such as main-5449f384.css, to help with caching. A list of the resulting asset filenames is stored in a JSON file at public/dist/assets.json. The contents of the file is akin to:
{
  "main.css": "main-5449f384.css",
  "modernizr.js": "modernizr-45f0e1f4.js",
  "jquery.js": "jquery-e735354d.js",
  "main.js": "main-b7e504b0.js"
}

Separately, in my general.php config file, I've set up environment variables so I can use local asset paths in local and dev environments and a CDN based path in production:
return array(
    '*' => array(
        'appId' => 'example',
        'omitScriptNameInUrls' => true,
    ),

    'example.com' => array(
        'devMode' => false,
        'assetUrl' => 'https://cdn.example.com/',
    ),

    'craft' => array(
        'devMode' => true,
        'local' => true,
        'assetUrl' => 'http://craft:8888/',
    )
);

I had figured that to finalise the whole workflow, my head section within craft/templates/_layout.html would look something like (using a if statement to get the current environment):
Local


Live (pseudocode)


Is there a way to either set an environment variable based on the contents of the JSON file or to access to JSON file contents directly from within the template file? Or perhaps there's a much better way of doing this altogether (I'd quite like to keep the currently gulp workflow as is if possible)!

**Tags:** assets, javascript, json

---

## 3 answers

### Answer by username_1 on 2016-04-05. Score: 4 | Accepted answer

You could write some PHP at the top of your general.php file that reads the JSON manifest in your public root directory, and add its keys/values to the config array. I wouldn't use environment variables here, personally – just add the manifest to the returned array in general.php: 
// In general.php:

$assetsManifest = @json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'].'/assets/assets.json')) ?: [];

return array(
    '*' => array(
        ...
        'assets' => (array)$assetsManifest,
    ),
);

...and in your template:


Be advised that the null-coalescing operator (??) was just added in Craft 2.6 – if you haven't updated yet, you can use the default filter instead:


Another approach for getting revved asset filenames in templates, is to use a plugin which adds either a custom template variable method or Twig filter/function to Craft. For an example of the latter, see Viget Labs' Gulp Rev Craft plugin, which is bundled with their awesome Gulp Starter repo. Here's how revving works using this particular plugin:


For me, individual asset filenames in the config feels a bit off and the custom filter option seems a lot cleaner, so I'm personally going with that approach.

> **Comments:**
> **username_0**: What an amazing helpful reply. Answered my question and gave me an even better alternative whilst explaining why it's a better idea. I've had a quick play and first method works great and I'm now going to give your second suggestion a go. Thanks for taking the time to answer :)  
> **username_1**: No problem, @lotech – very cool that I was able to help you out!  

---

### Answer by username_2 on 2018-11-05. Score: 1

Thanks for this it helped a lot! I am using grunt-assets-versioning and took me some time to get it to work properly, so let me share my approach.
So grunt-assets-versioning creates the file /public/css/app.json
[{
  "version":"b2ff9f",
  "originalPath":"public/css/app.css",
  "versionedPath":"public/css/app.b2ff9f.css"
 }]

The trick is to use @json_decode(path, true) , so add this to your general.php
$appCSS = @json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'].'/css/app.json'), true) ?: [];

return array(
    ...
    'appCSS' => str_replace('public', '', $appCSS[0]['versionedPath'])
);

Remove the word 'public' so the final path will be "/css/app.b2ff9f.css"
Now you can call the file from your template.


---

### Answer by username_3 on 2018-11-05. Score: 1

So while this is not a direct answer the the questions asked here, I think these resources (which weren't written at the time of the posted question) might be useful to someone else in the same situation.

Re: using Gulp with Craft:

* [A Better package.json for the Frontend](https://nystudio107.com/blog/a-better-package-json-for-the-frontend)
* [A Gulp Workflow for Frontend Development Automation](https://nystudio107.com/blog/a-gulp-workflow-for-frontend-development-automation)

If you're interested in using a modern webpack setup to for the same:

* [An Annotated webpack 4 Config for Frontend Web Development](https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development)
* [Twigpack plugin](https://github.com/nystudio107/craft-twigpack)


---

