generator-tmproject-gulp
v1.3.5
Published
Yeoman generator
Downloads
14
Keywords
Readme
generator-tmproject-gulp
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 Gulp tasks: $ gulp
for development and $ gulp build
to compile your project.
Requirements
Installing generator-tmproject-gulp
Run $ npm install -g generator-tmproject-gulp
Setup a new project
- Create an empty directory for your project:
$ mkdir ~/Sites/my_new_project && cd $_
- Run the generator:
$ yo tmproject-gulp
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/
+ 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
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.
stylesheets/
You are able to use .styl
and .css
files (though I'd recommend just using .styl
). If you are running the $ gulp
process, you may want to restart it when creating new files.
Paths
If you want to reference a .styl
or .css
file in your template you must use _compiled
in your path. For example, if your .styl
file is located at stylesheets/myfile.styl
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.gulpfile.js
: A list of the tasks that run on$ gulp
and$ gulp build
package.json
: A list of dependencies for the Gulp tasks.