generator-tmproject

This is a project generator to quick start a new web project. This Yeoman generator will set up your directories and provide you with two Grunt tasks: $ grunt for development and $ grunt build to compile your project.

Requirements

Bundler $ gem install bundler
node.js
Grunt $ npm install -g grunt-cli
Yeoman $ npm install -g yo

Installing generator-tmproject

Run $ npm install -g generator-tmproject

Setup a new project

Create an empty directory for your project: $ mkdir ~/Sites/my_new_project && cd $_
Run the generator: $ yo tmproject

Project directories

You will be asked a couple basic questions to start your project up. When you are done you should have a project directory that looks like this:

+ app
  + bower_components/
  + images/
  + javascripts/
  + stylesheets/
  .htaccess
  index.html
+ dist
  + javascripts/
  + images/
  + stylesheets/
  .htaccess
  index.html
.bowerrc
.gitignore
bower.json
Gemfile
Gruntfile.coffee
package.json

About your new project

bower_components/

Bower will manage your project dependencies. If you run jQuery, Fancybox, Flexsider or any other libraries this is where they'll live.

Adding libraries to your project

If you need to add Fancybox to your project you can search the Bower library for it by running $ bower search fancybox. Once you find the one you are looking for, just run $ bower install fancybox -S and the Fancybox library will now be in app/bower_components. You can also remove a dependency by running $ bower uninstall fancybox -S.

Note: You must use -S in your bower command to add the dependency to your bower.json file.

Related files

.bowerrc: Configures the path to the bower_components directory (don't change this) bower.json: Specifies all of the dependencies used in the project.

images/

Place any project images in this directory. Running $ grunt build will move your images to dist/images and compress them.

javascripts/

You are able to use .js and .coffee files. If you are running the $ grunt process, you may want to restart it when creating new files.

Paths

If you want to reference a .js or .coffee file in your template you must use _compiled in your path. For example, if your .js file is located at javascripts/form/myfile.js your HTML should be <script src="/_compiled/javascripts/form/myfile.js"></script>.

Using CoffeeScript

CoffeeScript files must be referenced with a .js extension. For example, if your CoffeeScript file is located at javascripts/form/myfile.coffee your HTML should be <script src="/_compiled/javascripts/form/myfile.js"></script>.

stylesheets/

You are able to use .scss and .css files (though I'd recommend just using .scss). If you are running the $ grunt process, you may want to restart it when creating new files.

Paths

If you want to reference a .scss or .css file in your template you must use _compiled in your path. For example, if your .scss file is located at stylesheets/myfile.scss your HTML should be <link rel="stylesheet" href="/_compiled/stylesheets/myfile.css">.

dist/

This is the compiled version of your web project. You deploy this, and only this, folder to the web server.

Miscellaneous files

.gitignore: A standard gitignore file to ignore compiled directories and other OS-based files and folders.
.htaccess: A basic htaccess file provided by the HTML5 Boilerplate.
Gemfile: A list of Ruby gem dependencies for the project
Gruntfile.js: A list of the tasks that run on $ grunt and $ grunt build
package.json: A list of dependencies for the Grunt tasks.

Release History

2013-12-17 - v1.4.2 - Move resources to an /assets/ directory to avoid conflicts with CMS directories
2013-12-17 - v1.4.1 - Add mixins to make transition away from Compass easier
2013-12-17 - v1.4.0 - Use Sass instead of Compass because Sass is much faster
2013-12-17 - v1.3.5 - Optimize RequireJS scripts
2013-12-17 - v1.3.4 - Add conditional gitignore
2013-12-17 - v1.3.3 - Fix .tmp directories not being accessible from web
2013-12-17 - v1.3.2 - Add CasperJS test library for BDD
2013-12-16 - v1.3.1 - Update time-grunt
2013-12-15 - v1.3.0 - Rewrite Grunt tasks for efficiency
2013-12-11 - v1.2.7 - Add custom Modernizr generator
2013-11-14 - v1.2.6 - Change Compass dist action to recompile from scratch
2013-11-14 - v1.2.5 - Setup images to use LiveReload
2013-11-14 - v1.2.4 - Setup JavaScript and CoffeeScript to use LiveReload
2013-11-14 - v1.2.3 - Use MatchDep to automatically match dependencies
2013-11-14 - v1.2.2 - Drastically speed up .scss compiling and LiveReload using Concurrent
2013-11-13 - v1.2.1 - Minify RequireJS
2013-11-13 - v1.2.0 - Add RequireJS and Handlebars.js functionality (shout out to @drgfunk)
2013-11-11 - v1.1.0 - Adds bundle functionality to retreive gem dependencies
2013-11-11 - v1.0.7 - Fixes issue where all files in images/ may not be compressed and copied over
2013-11-11 - v1.0.6 - Fixes issue where .htaccess wasn't in app/ and didn't copy to dist/
2013-10-30 - v1.0.5 - Remove .tmp directory after build is complete
2013-10-29 - v1.0.4 - Fixes issue where compiled CSS/JS compiles infinitely
2013-10-25 - v1.0.3 - Fixes usemin issues with ExpressionEngine and Craft options
2013-10-18 - v1.0.2 - Add notify script to notify when a build is complete
2013-10-18 - v1.0.1 - Use a CoffeeScript Gruntfile so it is easier to read