Menu icon Foundation
My Yeoman Workflow

Update (01.11.2015): http://julian.io/foundation-5-and-yeoman/

This is a short description on how you can work with Yeoman generator for Zurb Foundation 5.

1. sudo npm install yo
2. sudo npm install generator-zf5
3. yo zf5
4. sudo npm install (if needed because of permissions errors)
5. grunt

Now you have open browser with livereload and sass compiler which is watching for your changes
If you want to install some of third party libraries just:

6. bower search [name it]
7. bower install [library name] --save
8. grunt bower-install

Now you have your library's js and css paths injected into html files
You can now publish your work..

9. grunt publish

Now you have all files copied and all assets minied and concatenated in dist folder
You can now preview your work from dist folder

10. grunt server-dist

Now you have open browser with project from dist folder (view page source)

Github: https://github.com/juliancwirko/generator-zf5

You can test it and send me your opinions. Thanks.

yeomangeneratorgenerator-zf5zf5

Update (01.11.2015): http://julian.io/foundation-5-and-yeoman/

This is a short description on how you can work with Yeoman generator for Zurb Foundation 5.

1. sudo npm install yo
2. sudo npm install generator-zf5
3. yo zf5
4. sudo npm install (if needed because of permissions errors)
5. grunt

Now you have open browser with livereload and sass compiler which is watching for your changes
If you want to install some of third party libraries just:

6. bower search [name it]
7. bower install [library name] --save
8. grunt bower-install

Now you have your library's js and css paths injected into html files
You can now publish your work..

9. grunt publish

Now you have all files copied and all assets minied and concatenated in dist folder
You can now preview your work from dist folder

10. grunt server-dist

Now you have open browser with project from dist folder (view page source)

Github: https://github.com/juliancwirko/generator-zf5

You can test it and send me your opinions. Thanks.

Julian Ćwirko over 4 years ago

If you want to update started project you can run 'bower update' in root folder to update Foundation.
Also remember to compare app/scss/_settings.scss file with the one from new Foundation.

(Generator-zf5 is up to date with Foundation 5.5.1)

Robert over 4 years ago

How can i update to the latest version of Foundation with zf5?

Julian Ćwirko almost 5 years ago

Hi, here is some basic knowledge about generator-zf5:
http://julian.io/foundation-5-and-yeoman/

Karl Johan Kleist almost 5 years ago

Worked like a charm for me on the first attempt, using 64 bit Windows 7.

The only glitch was this (but that is out of your control, and I can live without jpegtran):

 > [email protected] postinstall C:\projects\ZURB-Foundation-for-Apps\generator-zf5\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-jpegtran\node_modules\jpegtran-bin
> node lib/install.js

  ‼ ENOENT, stat 'C:\projects\ZURB-Foundation-for-Apps\generator-zf5\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-jpegtran\node_modules\jpegtran-bin\vendor\jpegtran.exe'
  ‼ jpegtran pre-build test failed
  i compiling from source
  × Error: Command failed: Der Befehl "." ist entweder falsch geschrieben oder
konnte nicht gefunden werden.

    at ChildProcess.exithandler (child_process.js:658:15)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:766:16)
    at Process.ChildProcess._handle.onexit (child_process.js:833:5)

https://github.com/imagemin/jpegtran-bin/issues/54

Christian Matthias almost 5 years ago

I have this same stupid question every time I start working and look for your project to get me going. When I am working with an new project in a folder i.e. myNewWebsite do I cd into this and then do all of the installations above like for yo and zf5? I think this is an obvious duh but for some reason I always forget. perhaps a why would help.

Thomas K. about 5 years ago

Because I don't have any solution, I have made a workaround.
I name my php-files "filename.php.html"

Make a Batchfile e.g. "publish.bat" and copy it in a cmd-path

call grunt publish
ren dist\*.php.html *.

Then I call "publish" in my project-dir.

Important: You must have a "index.html", because otherwise you get an error with grunt.

Thomas K. about 5 years ago

Hm, I've installed connect-php and I've modified the Gruntfile.js in my project-dir.
"grunt publish" runs without error, but I don't have any php-file.

Where is the error?

If it works, it's a nice function.

Thank you

Edit: I have also added this line
var phpMiddleware = require('connect-php');
before grunt.initConfig

Maciej Czerniak about 5 years ago

Ok, in case someone was interested in how to use it with PHP
- install this plugin after yo zf5 - www.npmjs.org/package/connect-php
- and modify your gruntfile:

 connect: {
      app: {
        options: {
          port: 9000,
          base: '<%= app %>/',
          open: true,
          livereload: true,
          hostname: '127.0.0.1',
          middleware: function(connect, options) {
              var middlewares = [];
              var directory = options.directory || options.base[options.base.length - 1];
              if (!Array.isArray(options.base)) {
                  options.base = [options.base];
              }

              // Magic happens here
              middlewares.push(phpMiddleware(directory));

              options.base.forEach(function(base) {
                  // Serve static files.
                  middlewares.push(connect.static(base));
              });

              // Make directory browse-able.
              middlewares.push(connect.directory(directory));
              return middlewares;
          }
        }
      },

Julian Ćwirko about 5 years ago

Hi, hard to say :/ I don't work with PHP.

You can search for grunt-usemin, grunt-wiredep + Sass + PHP workflow then you will be able to adapt generator-zf5 because these are the main grunt tasks. Or maybe you will be able to use some kind of templates like Jade or Handlebars with PHP or maybe even Twig.

This is for sure topic to explore and it is beyond the scope of this generator :)

Maciej Czerniak about 5 years ago

Hi Julian,
I have already used this workflow in couple of projects and I must say it works like a charm. One thing that would be really usefull is making it work with PHP files. Any hints?
Cheers!

Nont Nawa about 5 years ago

Hi Julian , first I think I'll post to ask you cause my 1st setup is failed.
After the 2nd to try carefully , now it's working with livereload.
I run by Windows 8.1 environment. .. Thank you so much.

Julian Ćwirko over 5 years ago

many thanks James :)

James Stone over 5 years ago

The zf5 yeoman workflow is quite good. What it does is basically give you a more advanced grunt setup and you can use it as a drop in replacement for the foundation CLI. Running grunt publish basically uses grunt as a build file / script and is a great example about how you might go about creating your own.

Thanks Julian for posting this here and for putting together the package on GH.

I am planning to put together a tutorial for it at some point and put it up on my youtube channel.

Julian Ćwirko over 5 years ago

Definitely tutorial is needed. There are many questions about starting with yo-grunt-bower workflow ...english speakers - contribution is welcome :)

in regard to your questions:

1. app folder is only your workspace
2. bower_components is a place where all third party stuff lives (you can add more by 'bower install <package_name> --save' read about it here: http://bower.io you can also inject paths into index.html with 'grunt bower-install')
3. in app/index.html there are paths to bower_component files or any which you place in app/css or app/js (etc.) folders
4. after 'grunt publish' all files (from bower_components too) are copied into dist folder
5. dist (and anything else) folder is your ready to go app

So all changes you will be doing in app folder. After just run 'grunt publish' and take the dist folder and place it on the server (or whatever you want). So you don't have to worry about bower_components just keep your comments blocks (like <!-- build:css css/libraries.min.css --> ) in app/index.html it is needed for publication process.

I hope someone (english speaker) who is using zf5 will write/record some basic tutorials. This could be awesome.
Or maybe I will try to write it soon and ask someone to correct my spelling

Patrick Jones over 5 years ago

Sorry to ask a dumb question, but I'm new to Yeoman and I don't quite understand how the skeleton app that "yo zf5" creates is organized.

Here are some specific questions I had:

Is the folder "bower components" simply a repository of all the goodies, and I choose what I want and bring it into the corresponding folder in the "app" directory? For example, should I draw jquery.js or foundation.css from their folders in "bower components" and put them in the "js" and "css" folders, respectively, under "app"?

This is very ambiguous to me. I'm just wondering how all of this stuff points to each other. Without knowing how it's organized, I don't really understand this as a blank Foundation 5 shell. The first time I used Yeoman to scaffold with Foundation I used "yo foundation-five"—after doing so, I opened "index.html" which included an overview of Foundation assets, but none of them showed up styled, since there was no foundation.css in the "css" folder under app. So I tried "yo zf5" and have the same questions.

Many thanks for your time! And thank you for creating this generator!

Julian Ćwirko over 5 years ago

This is how Yeoman is doing it. I don't think there is any option like that (or maybe?) but for me it is even better :) I like this more control when you have to mkdir, cd into it and then run yo zf5 in this particular folder.

Maciej Czerniak over 5 years ago

Hi Julian,
very usefull, thanks.
One question/comment - is there a way to point installation to specific directory as in default foundation installation process ("foundation new project_name --libsass" etc.)?

Alexander Assimidis over 5 years ago

No it is not needed to do that u only have to use bower install if u want to install an optional libary to ur Project

Christian Matthias over 5 years ago

Also, I have a question about $ grunt bower-install <<< does this need to be done? If we already started grunt doesn't that do that function?

perhaps if we do an install of a bower package then we need to go back and do that?

Christian Matthias over 5 years ago

noticed that when you install a new project and fire up yo zf5 it asks if you should overwrite bower stuff. I say yes but don't know why it is doing that.