Gulp boilerplate for web designers
Gulp boilerplate for web designers provides directory and file structure to aid web-designers kickstart their next project. It will help you develop and deploy any html-based (and more) templates. Some out of the box features :
- OOCSS and SMACSS (Scalable and Modular Architecture for CSS) ready infrastructure
- Compile Sass files
- Autoprefix styles (you only need to write the web-standard version)
- Compass support
- Compiles and lints Coffee scripts files
- CSS and JS minification
- Compiles Jade
- Image optimization
Follow the Getting Started with Gulp for an in-depth look at setting up Grunt, but basically:
- Boot up terminal
- Make sure to have Node.js installed
- Install gulp globally
npm install -g gulp
cdto your project folder
- Git clone (
git clone email@example.com:tsevdos/Gulp-boilerplate-for-web-designers.git) or download and extract the zip file
- Install Gulp and required grunt tasks by typing
Your development environment is in the app directory - you do all the work there. Whenever you are ready you can build the work by running the
gulp task (the
default task). This task will generate a public directory that will contain all your files (CSS, JS, HTML and images) optimized and ready to distribute/upload/share.
You can run the below tasks.
gulp(default task) : Creates a
publicdirectory with all the optimized files (read File structure section for more details).
gulp watch: Probably the most usable task. Just run this task and whatever file you edit any file (html, scss, coffee, js, etc.) it passes it through the appropriate pipeline (task).
gulp styles: This task compiles all the Sass files and autoprefixes. After that it saves the generated CSS files expanded into the
developmentdirectory and the minified version into the public directory.
gulp coffee: This task lints and compiles your coffee script files (you must include them into the
gulp scripts: This task will concatanate all scripts into one using the order you'll specify. The
publicversion of this file will also be minified.
gulp images: This task will optimize all images (with
gifextension) under the
gulp jade: This task will compile your jade templates.
gulp markup: This task will pretify your html files.
gulp clean: This support task cleans (deletes all the contents of) the
publicdirectory in order to prepare it for the
- Add a gulp-live-server reload task