Grunt Cookbook Effective Recipes to Master Grunt
Total Page:16
File Type:pdf, Size:1020Kb
Grunt Cookbook Effective Recipes To Master Grunt Matt Goldspink This book is for sale at http://leanpub.com/gruntcookbook This version was published on 2014-02-14 This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do. ©2013 - 2014 Matt Goldspink Tweet This Book! Please help Matt Goldspink by spreading the word about this book on Twitter! The suggested hashtag for this book is #gruntcookbook. Find out what other people are saying about the book by clicking on this link to search for this hashtag on Twitter: https://twitter.com/search?q=#gruntcookbook Contents Contact Me 1 Introduction 2 Installing node and grunt CLI 4 Validating your JavaScript for common errors 8 Using Grunt to enforce coding standards 11 Contact Me Grunt Cookbook is a work in progress. If you have any feedback about recipe’s you’d like to see, mistakes, improvements, or if you have any questions then please email me at [email protected]. Introduction • Do you ever find yourself repeating tasks over and over? • Do you feel like you’re losing time with slow and mundane tasks? • Are you skipping some tasks in your dev lifecycle because they’re too annoying and get in the way? If you’re a frontend developer with these issues then Grunt is going to be right up your street. I wrote this book after using Grunt in a large enterprise and a startup to replace aging and painfully slow Ant based build systems. I loved that all the plugins for JSHint, Compass, concat/minify and more were available straight away. As I started to use it more I realised that there was a lot more power and potential to Grunt than just a build system. I wanted to share my own learnings and insights in the hope that some or all of the recipe’s in the book resonate with you and inspire you to automate more of you daily tasks. I’d love to hear from you if you’ve any questions or feedback then please reach out to me on twitter @mattgoldspink. What is Grunt? Grunt describes itself as “The JavaScript Task Runner”. It is essentialy a utility to help automate tasks, for example you could automate: • Concatenating JavaScript files when the files are saved • Running validation and testing across a projects code base • Generating documentation • Compiling meta-languages (i.e. Coffeescript or SASS) and uploading the output to a remote server In fact if there’s a set of common actions you perform in your daily routine, chances are it can be automated with grunt and you could use that time to spend on something of more value. Who is this book for? This book is aimed at new and existing users of Grunt who want a quick reference manual about many common tasks in Grunt, or who want to see what Grunt can do for them and see how Grunt can be used to write tasks beyond the conventional development lifecycle examples. To get the most out of this book you should be familiar with the JavaScript language and have some minimal experience with Node.js and installing Node.js modules using the Node Package Manager npm. Some recipe’s are specific to certain frameworks/languages, in those cases it is assumed you have some base knowledge of that particular framework/language. Introduction 3 Sample Projects If you’re anything like me, you’ll want to see real working examples, demonstrating: • The final Gruntfile.js for each recipe • Where the source files are on disk for the given configuration • Where the output will get written to • Any additional files that are sometimes just “obvious” to developers, but not to beginners All the recipe’s in the book were written around these examples to make sure you don’t get some half-broken, outdated code. With the examples you’ll get to see the recipes in action with the right dependencies at the time of writing. In addition they are all git projects with numbered branches that show the recipe at different stages. This means that you can follow the progress of a recipe as it builds up by checking out the different branches. Where ever you see a command line snippet with Project: git checkout then that is an indicator to change branches. For example in the Running Jasmine Tests recipe you’ll see something like this. Example of git branch change In the root directory of that sample project just run: $ git checkout 02 and it will switch you to the branch which holds the code for this stage of the project. The name of the directory of the sample project is listed at the end of each recipe. Getting the sample projects The sample projects are only available if you purchase “The Book + Code Samples” package. Installing node and grunt CLI Problem As any fine chef knows you gotta have the right tools for the job and our case the tools are Node.js and Grunt CLI. Note that we’re not installing Grunt as that is installed on a per project basis, but we’re installing the core dependencies that all Grunt based projects will need. Ingredients A terminal, or command prompt, and a web browser. Solution For all OS’s you’ll need to head over to http://nodejs.org/download/ and choose the appropriate platform http://nodejs.org/download/ Mac From the node.js download page choose the “Macintosh Installer”. This will download a .pkg file which you can then run. Follow the steps of the installer through to completion. Once the install is completed you’ll need to install the Grunt Command Line Interface, or Grunt CLI as it’s known. Open up your favourite terminal and first type: Installing node and grunt CLI 5 $ node -v This should print the version of Node.js you installed. If you get an error then something is not right with the install, you should follow up on the Node.JS mailgroup or IRC chat forum for specific help with your error. If all is good then we can continue, to get the Grunt CLI we need to use NPM, the package manager for Node. It’s likely you’ll want to install the Grunt CLI so it’s available for every project and that will likely need you to install as the root user globally, so run: $ sudo npm install -g grunt-cli This will prompt you for your password so the grunt-cli files can be shared between all users and projects on the machine. When it’s complete you should be able to run: $ grunt grunt-cli: The grunt command line interface. (v0.1.9) Fatal error: Unable to find local grunt. If you're seeing this message, either a Gruntfile wasn't found or grunt hasn't been installed locally to your project. For more information about installing and configuring grunt, please see the Getting Started guide: http://gruntjs.com/getting-started Don’t worry that it says “Fatal error”, this occurs because we’re not in a project directory which is using grunt, but it’s a sign that Grunt CLI and node are working and you’re all set to start working with Grunt. Where do I find a terminal on Mac? If you’re not familiar with terminals then you may want to read up a little first because grunt requires a little bit of knowledge of some basic terminal commands. To open the Mac terminal, press cmd + space and type “terminal” and hit enter Windows From the node.js download page choose the “Windows Installer”. This will download a .msi file which you can then run. Follow the steps of the installer through to completion. Once the install is completed you’ll need to install the Grunt Command Line Interface, or Grunt CLI as it’s known. Open up a command prompt and type: Installing node and grunt CLI 6 > node -v This should print the version of Node.js you installed. If you get an error then something is not right with the install, you should follow up on the Node.JS mailgroup or IRC chat forum for specific help with your error. If all is good then we can continue, to get the Grunt CLI we need to use NPM, the package manager for Node. It’s likely you’ll want to install the Grunt CLI so it’s available for every project and that will need us to pass in he “-g” flag, so run: > npm install -g grunt-cli When it’s complete you should be able to run: > grunt grunt-cli: The grunt command line interface. (v0.1.9) Fatal error: Unable to find local grunt. If you're seeing this message, either a Gruntfile wasn't found or grunt hasn't been installed locally to your project. For more information about installing and configuring grunt, please see the Getting Started guide: http://gruntjs.com/getting-started Don’t worry that it says “Fatal error”, this occurs because we’re not in a project directory which is using grunt, but it’s a sign that Grunt CLI and node are working and you’re all set to start working with Grunt. Linux Installing node.js on Linux can be done in various ways depending on your Linux distribution and package manager.