generator-gulp-project

Yeoman generator that scaffolds out a new front-end web project that uses Gulp. This Yeoman generator will set up your directories and provide you with two Gulp tasks: $ gulp for development and $ gulp build to compile your project.

Requirements

• node.js
• Gulp $ npm install -g gulp
• Yeoman $ npm install -g yo

Installing generator-gulp-project

Run $ npm install -g generator-gulp-project

Setup a new project

1. Create an empty directory for your project: $ mkdir ~/Sites/my_new_project && cd $_
2. Run the generator: $ yo gulp-project

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 (depending on your choices):

+ app
  + bower_components/
  + assets/images/
  + assets/javascripts/
  + assets/stylesheets/
  .htaccess
  index.html
+ dist
  + assets/javascripts/
  + assets/images/
  + assets/stylesheets/
  .htaccess
  index.html
+ gulp
        + tasks
    index.js
.bowerrc
.gitignore
bower.json
Gemfile
gulpfile.js
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 $ gulp build will move your images to dist/images and compress them.

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="/_tmp/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 $ gulp 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 _tmp in your path. For example, if your .scss file is located at stylesheets/myfile.scss your HTML should be <link rel="stylesheet" href="/_tmp/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.
• gulpfile.js: A list of the tasks that run on $ gulp and $ gulp build
• package.json: A list of dependencies for the Gulp tasks.

Release History

• 2015-3-25 - v1.0.0 - Initial release