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