<p>I don't believe there is a way to minify javascript when it is output to the page.  If there is it would make for increased load time. My suggestion is to use a preprocessor like <strong><a href="http://gulpjs.com" rel="nofollow">Gulpjs</a></strong> or <strong><a href="http://gruntjs.com/" rel="nofollow">Gruntjs</a></strong>. </p>

<p>The basic workflow is when you update your JS file/s the preprocessor can detect the change and concatenate and minify your files into a production file. </p>

<p>You will need to <strong><a href="http://blog.teamtreehouse.com/install-node-js-npm-mac" rel="nofollow">install Node</a></strong>.  An easy way to do that is to use <strong><a href="http://brew.sh/" rel="nofollow">Homebrew</a></strong>. </p>

<p><code>brew install node</code></p>

<p>I am including links to a couple files to help you start. One is the <strong><a href="https://gist.github.com/a-am/507138c779a133a404f7" rel="nofollow">package.json</a></strong> file that NPM uses to install the node components.  The other <strong><a href="https://gist.github.com/a-am/c7dc178bbfb11df26c60" rel="nofollow">gulpfile.js</a></strong> is a starter file for using Gulpjs, to give you an idea of how to setup the tasks. </p>

CC BY-SA 3.0
2015-11-04T11:41:57.700Z
I concur that it's usually better to concat/minify locally, but if you want to do it serverside/in your templates there's the [AutoMin](https://github.com/aelvan/AutoMin-Craft) plugin. Note that AutoMin will cache any minified file(s), so the load time footprint on subsequent visits will be minimal.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-11-06T15:21:07.487Z
Thanks for the links and suggestions - sounds like external file is the way to go for me, although the automin plugin looks interesting. i've tinkered with grunt in the past but i've been meaning to get more involved with it.
alexr
CC BY-SA 3.0
2015-11-03T22:33:38.673Z
2015-11-04T03:57:22.487Z
2015-11-04T03:57:22.487Z
a-am
<p>If i include javascript in a template using:</p>

<pre><code>{% set myJS %}
//some JS in here
{% endset %}

{% includeJS myJS %}
</code></pre>

<p>Is there a way to minify the javascript that gets output on the page? I had a look at the documentation but couldn't find anything. The only way i have found to do it otherwise is to put the javascript in an external file, minify that, and include it with {% includeJsFile %}. Any ideas on how i could do this? Or is there a better way to achieve the same result?</p>

<templating><javascript><includejs>
minify javascript with includeJS
# minify javascript with includeJS

(Asked by: username_0 on 2015-11-03)

If i include javascript in a template using:
{% set myJS %}
//some JS in here
{% endset %}

{% includeJS myJS %}

Is there a way to minify the javascript that gets output on the page? I had a look at the documentation but couldn't find anything. The only way i have found to do it otherwise is to put the javascript in an external file, minify that, and include it with {% includeJsFile %}. Any ideas on how i could do this? Or is there a better way to achieve the same result?

**Tags:** templating, javascript, includejs


---

## 1 answers

### Answer by username_1 on 2015-11-03. Score: 4

I don't believe there is a way to minify javascript when it is output to the page. If there is it would make for increased load time. My suggestion is to use a preprocessor like **[Gulpjs](http://gulpjs.com)** or **[Gruntjs](http://gruntjs.com/)**.

The basic workflow is when you update your JS file/s the preprocessor can detect the change and concatenate and minify your files into a production file.

You will need to **[install Node](http://blog.teamtreehouse.com/install-node-js-npm-mac)**. An easy way to do that is to use **[Homebrew](http://brew.sh/)**.

`brew install node`

I am including links to a couple files to help you start. One is the **[package.json](https://gist.github.com/username_1/507138c779a133a404f7)** file that NPM uses to install the node components. The other **[gulpfile.js](https://gist.github.com/username_1/c7dc178bbfb11df26c60)** is a starter file for using Gulpjs, to give you an idea of how to setup the tasks.

> **Comments:**
> **username_2**: I concur that it's usually better to concat/minify locally, but if you want to do it serverside/in your templates there's the [AutoMin](https://github.com/aelvan/AutoMin-Craft) plugin. Note that AutoMin will cache any minified file(s), so the load time footprint on subsequent visits will be minimal.  
> **username_0**: Thanks for the links and suggestions - sounds like external file is the way to go for me, although the automin plugin looks interesting. i've tinkered with grunt in the past but i've been meaning to get more involved with it.  

---

