The other day I was starting a project and I was to the point where I was needed to create my grunt file and move on with coding the project. The project was my Javascript Chat using WebRTC in case you were wondering. I started pulling from old projects and mashing together a grunt file to my liking for this project. When it was all said and done I ended up spending a good 30 minutes to a hour to get it all worked out working, what a waste of time! Right then I knew I needed to come up with a better solution.
I ended up creating a simple to use grunt boilerplate that I'm going to use when I start all my projects. I plan on this boilerplate being an ever changing thing as needs change and I come up with cool ways to do things. I threw my Grunt Boilerplate on GitHub so you can check it out and use it all you want. There's a how to use there also so I won't waste your time here with that. But I will explain some of the cool tasks it runs.
Tasks in Gruntfile
- time-grunt: This adds awesome graphs to your grunt builds, what more could you want?
- load-grunt-tasks: This saves you from having to include
grunt.loadNpmTasks('grunt-babel')for each task used. - grunt-autoprefixer: This prefixes your css so you can forget adding
-webkit-to all your fancy css - grunt-babel: Write ES6 code and beyond today and have it compiled down to ES5 so it works in today's browsers.
- grunt-contrib-connect: While grunt is running you can access your site on 127.0.0.1:9001 saving you time of setting up a local server for each little project.
- grunt-contrib-jade: Write jade and have it compiled to HTML.
- grunt-contrib-jshint: run jshint to check your code for errors on build.
- grunt-contrib-sass: Write sass (pretty self explanatory what this is for and why you need it).
- grunt-contrib-uglify: you need to compress your JS before you run it in the wild, performance matters punk.
- grunt-contrib-watch: Watch lets you re-run grunt on each file save.
A couple of things I want to add shortly are:
- Switch to PostCSS instead of sass.
- Switch to eslint instead of jshint.
- Put this in something like Yeoman to make it easier for other people to pick this up and fit their workflow.
So there it is, this is going to save me a lot of time in the future I hope it does for you too. Thanks
:wq