9

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?

  • IMHO, this is a task for Grunt / Gulp itself, not for Craft – Jérôme Coupé Jun 18 '14 at 3:47
  • @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 Jun 18 '14 at 14:51
  • 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 Jun 19 '14 at 19:42
  • 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 Jun 19 '14 at 20:05
  • I haven't set up my different environments yet but I was probably going to follow the example in the craft cookbook. craftcookbook.net/recipes/210. I'll try to organize my files and put it up on github in the near future. – RhealPoirier Jun 19 '14 at 21:58
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 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.

  • 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 Jun 18 '14 at 7:17
  • 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. npmjs.org/package/gulp-inject – Jérôme Coupé Jun 18 '14 at 7:54
  • 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é Jun 18 '14 at 8:13
  • I like to keep my package.json file in the root too. I guess my crude folder structure didn't make it obvious. – RhealPoirier Jun 18 '14 at 14:56
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 %}
    <link rel="stylesheet" href="/resources/stylesheets/devTheme.css" />
{% else %}
    <link rel="stylesheet" href="/resources/stylesheets/builtTheme.css" />
{% endif %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.