<p>In my humble opinion, this is a task for Grunt / Gulp, not for Craft.</p>

<p>Addy Osmani has an excellent article on <a href="http://addyosmani.com/blog/environment-specific-builds-with-grunt-gulp-or-broccoli/">Environment-specific builds</a> that would be interesting for you and the kind of use case you mention.</p>

<p>In short, <code>gulp-replace</code> or <code>gulp-processhtml</code> and <code>gulp-preprocess</code> will give you what you need to build such functionality in your build scripts. Similar plugins exist for Grunt as well.</p>

<p>As for file organisation, I generally keep my <code>package.json</code> and <code>gulpfile.js</code> files at the root of the repo / website. I find it a lot easier to manage paths.</p>

CC BY-SA 3.0
2014-06-18T07:17:33.637Z
Thanks for sharing this, Jerome. I use grunt to build css/js (also for different themes in fact) and was thinking about running some tasks on the html as well. Especially that regex method mentioned in the article sounds good to me, as it doesn't bring any conditional logic to the html. I wouldn't want to add that comment-syntax to my twig files though and I see another drawback. If you don't set the environment dependent paths in crafts `general.php` (`siteUrl`, `sitePath` for assets), you have no access them in the CP. And you don't touch the backend with your `gulp.js`, do you?
carlcs
CC BY-SA 3.0
2014-06-18T07:54:32.670Z
Hey Christian. Don't want this to turn into a Gulp / Grunt post but HTML injectors like `gulp-inject` (there are others) are a way to keep your logic in your gulpfile / gruntfile while solving that kind of problem. https://www.npmjs.org/package/gulp-inject
Jérôme Coupé
CC BY-SA 3.0
2014-06-18T08:13:11.307Z
Also, for me assets are never in the mix. Mainly only targeting SCSS & CSS + JS files in my case. For themes, can you use dedicated folders and reference them in gulpfile.js ?
Jérôme Coupé
CC BY-SA 3.0
2014-06-18T14:56:08.330Z
I like to keep my package.json file in the root too. I guess my crude folder structure didn't make it obvious.
RhealPoirier
CC BY-SA 3.0
2014-06-18T03:46:24.727Z
2014-06-18T03:46:24.727Z
Jérôme Coupé
<p>You can have your templates folder outside the Craft folder. Just define a <code>CRAFT_TEMPLATES_PATH</code> variable in your <code>index.php</code> and tell Craft where your folder is located: </p>

<pre><code>// Move templates path to right above web root
define('CRAFT_TEMPLATES_PATH', realpath(dirname(__FILE__) . "/../templates").'/');
</code></pre>

<p>I learned about this in @Jake Chapman's <a href="https://github.com/imjakechapman/CraftCMS-Boilerplate" rel="nofollow">CraftCMS-Boilerplate</a>, which might also have some other interesting pointers for your setup.</p>

<p>For different themes of your site I'd use one <code>_layout.html</code> and then do some conditionals that render your page based on your chosen theme settings. You could make these settings in dedicated lightswitch fields in a global field set for example. Another idea would be to make the theme conditional on the environment the site is requested.</p>

<p>Set a theme variable in <code>general.php</code>:</p>

<pre><code>'craft.dev' =&gt; array(
    'devTheme' =&gt; true,
    'environmentVariables' =&gt; array(...),
)
</code></pre>

<p>and then test for it in your template:</p>

<pre><code>{% if craft.config.devTheme %}
    &lt;link rel="stylesheet" href="/resources/stylesheets/devTheme.css" /&gt;
{% else %}
    &lt;link rel="stylesheet" href="/resources/stylesheets/builtTheme.css" /&gt;
{% endif %}
</code></pre>

CC BY-SA 3.0
2014-06-17T14:40:23.333Z
2014-06-17T16:12:30.960Z
2014-06-17T16:12:30.960Z
carlcs
<p>I would like to use a CSS Framework like Zurb Foundation with Craft. I also want to manage my bower dependencies and I want to use Grunt to concat and minify my sass/js as well as compress my images. All this good stuff is happening on my local computer running Mamp Pro. I'll then move it to a Staging server once everything is set up.</p>

<p>I have these folders/files in my directory. </p>

<pre><code>.bowerrc
bower.json
-craft
-dev
 -bower_components
 -scss
  .htaccess
  index.php
  robots.txt
-node_modules
-public
Gruntfile.js
package.json
</code></pre>

<p>The idea of my workflow is to work in the "dev" folder (html, scss, js) and when it's time to push to Staging server I use grunt to copy/minify/compress into the "public" folder. That way I can send only the "craft" and "public" folders.</p>

<p>If I'm working in the "dev" folder my templates would need to link to the files in the bower_components folders as well as my unminified code. When I publish to the public folder everything gets the minified/concatenated version. </p>

<p>My question concerns templates.
I know that templates are in the "craft" folder. How would I get craft to choose between 2 base _layouts (one built for dev, one built for speed) based on which folder my index.php file is located? Is there a better workflow solution?</p>

CC BY-SA 3.0
2014-06-19T19:42:28.257Z
After some reading and trial and error I used some ideas from both answers. I added the 'CRAFT_TEMPLATES_PATH' to my 'index.php' file and moved the templates folder into my dev folder. I then used grunt to concat/minify my templates & copy the condensed files into the craft folder. I also used grunt to concat, minify & compress all the images, js files into the public folder. Finally, I used grunt to comment out the 'CRAFT_TEMPLATES_PATH' and copy that file to the public folder. Everything seems to work well!
RhealPoirier
CC BY-SA 3.0
2014-06-19T20:05:44.487Z
Just out of curiosity, do you use grunt-concat additionally to twig extent and if yes, what for? And how did you end up setting your themes being requested dependent on the environment?
carlcs
CC BY-SA 3.0
2014-06-19T21:58:47.707Z
I haven't set up my different environments yet but I was probably going to follow the example in the craft cookbook. http://craftcookbook.net/recipes/210. I'll try to organize my files and put it up on github in the near future.
RhealPoirier
CC BY-SA 3.0
2014-06-18T03:47:07.933Z
IMHO, this is a task for Grunt / Gulp itself, not for Craft
Jérôme Coupé
CC BY-SA 3.0
2014-06-18T14:51:24.253Z
@JérômeCoupé I think you may be right. I'll do a bit more reading and see what solution will work best for me.
RhealPoirier
<templating><config><deployment><theme>
Craft, CSS Frameworks, Bower & Grunt setup suggestions
# Craft, CSS Frameworks, Bower & Grunt setup suggestions

(Asked by: username_0 on 2014-06-17)

I would like to use a CSS Framework like Zurb Foundation with Craft. I also want to manage my bower dependencies and I want to use Grunt to concat and minify my sass/js as well as compress my images. All this good stuff is happening on my local computer running Mamp Pro. I'll then move it to a Staging server once everything is set up.
I have these folders/files in my directory. 
.bowerrc
bower.json
-craft
-dev
 -bower_components
 -scss
  .htaccess
  index.php
  robots.txt
-node_modules
-public
Gruntfile.js
package.json

The idea of my workflow is to work in the "dev" folder (html, scss, js) and when it's time to push to Staging server I use grunt to copy/minify/compress into the "public" folder. That way I can send only the "craft" and "public" folders.
If I'm working in the "dev" folder my templates would need to link to the files in the bower_components folders as well as my unminified code. When I publish to the public folder everything gets the minified/concatenated version. 
My question concerns templates.
I know that templates are in the "craft" folder. How would I get craft to choose between 2 base _layouts (one built for dev, one built for speed) based on which folder my index.php file is located? Is there a better workflow solution?

**Tags:** templating, config, deployment, theme

> **Comments:**
> **username_2**: IMHO, this is a task for Grunt / Gulp itself, not for Craft  
> **username_0**: @JérômeCoupé I think you may be right. I'll do a bit more reading and see what solution will work best for me.  
> **username_0**: After some reading and trial and error I used some ideas from both answers. I added the 'CRAFT_TEMPLATES_PATH' to my 'index.php' file and moved the templates folder into my dev folder. I then used grunt to concat/minify my templates & copy the condensed files into the craft folder. I also used grunt to concat, minify & compress all the images, js files into the public folder. Finally, I used grunt to comment out the 'CRAFT_TEMPLATES_PATH' and copy that file to the public folder. Everything seems to work well!  
> **username_1**: Just out of curiosity, do you use grunt-concat additionally to twig extent and if yes, what for? And how did you end up setting your themes being requested dependent on the environment?  
> **username_0**: I haven't set up my different environments yet but I was probably going to follow the example in the craft cookbook. http://craftcookbook.net/recipes/210. I'll try to organize my files and put it up on github in the near future.  

---

## 2 answers

### Answer by username_2 on 2014-06-18. Score: 6

In my humble opinion, this is a task for Grunt / Gulp, not for Craft.

Addy Osmani has an excellent article on [Environment-specific builds](http://addyosmani.com/blog/environment-specific-builds-with-grunt-gulp-or-broccoli/) that would be interesting for you and the kind of use case you mention.

In short, `gulp-replace` or `gulp-processhtml` and `gulp-preprocess` will give you what you need to build such functionality in your build scripts. Similar plugins exist for Grunt as well.

As for file organisation, I generally keep my `package.json` and `gulpfile.js` files at the root of the repo / website. I find it a lot easier to manage paths.

> **Comments:**
> **username_1**: Thanks for sharing this, Jerome. I use grunt to build css/js (also for different themes in fact) and was thinking about running some tasks on the html as well. Especially that regex method mentioned in the article sounds good to me, as it doesn't bring any conditional logic to the html. I wouldn't want to add that comment-syntax to my twig files though and I see another drawback. If you don't set the environment dependent paths in crafts `general.php` (`siteUrl`, `sitePath` for assets), you have no access them in the CP. And you don't touch the backend with your `gulp.js`, do you?  
> **username_2**: Hey Christian. Don't want this to turn into a Gulp / Grunt post but HTML injectors like `gulp-inject` (there are others) are a way to keep your logic in your gulpfile / gruntfile while solving that kind of problem. https://www.npmjs.org/package/gulp-inject  
> **username_2**: Also, for me assets are never in the mix. Mainly only targeting SCSS & CSS + JS files in my case. For themes, can you use dedicated folders and reference them in gulpfile.js ?  
> **username_0**: I like to keep my package.json file in the root too. I guess my crude folder structure didn't make it obvious.  

---

### Answer by username_1 on 2014-06-17. Score: 5

You can have your templates folder outside the Craft folder. Just define a CRAFT_TEMPLATES_PATH variable in your index.php and tell Craft where your folder is located: 
// Move templates path to right above web root
define('CRAFT_TEMPLATES_PATH', realpath(dirname(__FILE__) . "/../templates").'/');

I learned about this in @Jake Chapman's CraftCMS-Boilerplate, which might also have some other interesting pointers for your setup.
For different themes of your site I'd use one _layout.html and then do some conditionals that render your page based on your chosen theme settings. You could make these settings in dedicated lightswitch fields in a global field set for example. Another idea would be to make the theme conditional on the environment the site is requested.
Set a theme variable in general.php:
'craft.dev' => array(
    'devTheme' => true,
    'environmentVariables' => array(...),
)

and then test for it in your template:
{% if craft.config.devTheme %}
    
{% else %}
    
{% endif %}


---

