A simple grunt task to assist in web development
- Install grunt-cli
npm install -g grunt-cli
- Install grunt
npm install grunt -save-dev
This grunt task helps me with maintaning development and production code. My folder structure is as follows
.
+-- app
| +-- sass
| +-- css
| +-- images
| +-- js
| +-- index.html
+-- dist
| +-- css
| +-- js
| +-- images
| +-- index.html
app - Development directory; dist - Distribution(Production code with minfied and optimized assets)
The grunt task performs the following -
- Compile Sass files and copy to css folder
- Lint Javascript in JS folder
- Optimize images that are added for the first time(will need customization according to requirements)
- Setup live reload to refresh browser when the code changes
- Watch the code for any changes and perform the tasks mentioned above
- Minify CSS and copy to dist/css
- Uglify Javascript and copy to dist/js
- Minify HTML and copy to dist
- Optimize images and copy to dist/images
Sanjay Rajashekhar