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.
Run $ npm install -g generator-gulp-project
- Create an empty directory for your project:
$ mkdir ~/Sites/my_new_project && cd $_
- Run the generator:
$ yo gulp-project
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
Bower will manage your project dependencies. If you run jQuery, Fancybox, Flexsider or any other libraries this is where they'll live.
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.
.bowerrc
: Configures the path to the bower_components
directory (don't change this)
bower.json
: Specifies all of the dependencies used in the project.
Place any project images in this directory. Running $ gulp build
will move your images to dist/images
and compress them.
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>
.
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.
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">
.
This is the compiled version of your web project. You deploy this, and only this, folder to the web server.
.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.
- 2015-3-25 - v1.0.0 - Initial release