Gulp Template

Better Front-End Development

This project was created to help easily scaffold new web development projects using modern tools like Bower, Boostrap, SASS and more...

Dependencies

You must have node.js installed (download here). It's recommended that you install Gulp and Bower globally on your development machine, but not required.

Clone this Repo

First step is to clone this repo:

git clone https://github.com/cjmosure/gulp-template.git

If you're working on your own project, it may be a good idea to remove the git information from this repo after you clone, below is a command for that, where "yourprojectname" is the name of the folder you want your project to be under:

mkdir yourprojectname && git clone https://github.com/cjmosure/gulp-template.git . && cd yourprojectname && rm -rf .git

Initial Set Up

Once you have cloned the github repo, you will want to install the node.js dependencies to start using gulp. All packages are listed in the package.json file at the root, install them with:

npm install

or if you get errors run this and type your password:

sudo npm install

Using Gulp

See the gulpfile.js for the tasks and a better idea of what's going on:

• clean - completely removes the dist folder for a clean build
• wiredep - gets sass / css bower dependencies automatically and puts into the main.scss file
• styles - compiles main sass file, default of main.scss in assets/sass/. See the "cssTasks" lazypipe for the build process, includes sourcemaps, auto browser prefixing, minification and more.
• scripts - compiles the javascript files and dependencies (the asset builder package automatically globs bower javascript dependencies but can be overridden via the assets/manifest.json file). See the "jsTasks" lazypipe for the build process, includes concat, uglify and more.
• watch - watches for sass or javascript changes and compiles via the respective tasks above. Also includes browsersync for autorefreshing when styles, scripts or html changes.
• build - runs tasks in a preset sequence.

To run all of the tasks manually:

gulp

To run a singular task manually, gulp followed by the task name:

gulp styles

To watch for changes and compile on the fly:

gulp watch

Additional Configuration / Customization

BrowserSync (Live Reload)

Enter your local development url in the config->devUrl option in the "./assets/manifest.json" file to enable live reloading through the browsersync gulp plugin. Live reload reloads on any changes to the dist/* files or any .html files within the folder. Your browser will open localhost:3000 automatically when you run:

gulp watch

Bootstrap Variables & Customization

Any variables in the ./assets/sass/_variables.scss file will override bootstrap variables, some basic variables have been provided for you in that _variables.scss file; however, for the full list check out ./assets/vendor/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss or: view file on github.