Grunt boilerplate for web designers
Grunt boilerplate for web designers provides a nice directory and file structure to aid web-designers kickstart their next project. It will help you in the development and deployment process of any HTML-based template (and not only). Some of the features that you get out of the box are:
- SMACSS (Scalable and Modular Architecture for CSS) ready infrastructure
- Compile Sass files
- Compass and Burbon support
- CSS, JS and HTML minification
- Image optimization
Follow the Getting started with Grunt for an in-depth look at setting up Grunt, but basically:
- Boot up Terminal
- Make sure to have Node.js installed.
- You need to install Image Optimization gem (
gem install image_optim). Find out how to install gems here
- Install Grunt CLI globally
npm install -g grunt-cli
cdto your project folder
- Git clone (
git clone firstname.lastname@example.org:tsevdos/Grunt-boilerplate-for-web-designers.git) or download the zip from https://github.com/tsevdos/Grunt-boilerplate-for-web-designers
- Install Grunt and required grunt tasks
grunt serveand enjoy
Your development environment is the into the app directory - you do all the work there. Whenever you are ready you can build the work by running the
grunt 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.
grunt(default task) : Creates a
publicdirectory with all the optimized files (read File structure section for more details).
grunt serve: Probably the most usable task. Just run this task and work elegantly with live-reload, Sass compilation and JS linting on your localhost (http://localhost:8000).
- fix the "Port 35729 is already in use by another process"