James Cryer. Pro Grunt.js

Transcription

1 James Cryer Pro Grunt.js

2 Pro Grunt.js Copyright 2015 by James Cryer This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher s location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law. ISBN-13 (pbk): ISBN-13 (electronic): Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director: Welmoed Spahr Lead Editor: Louise Corrigan Technical Reviewer: Matt Gifford Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Louise Corrigan, Jim DeWolf, Jonathan Gennick, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt Wade, Steve Weiss Coordinating Editor: Christine Ricketts Copy Editor: Michael Laraque Compositor: SPi Global Indexer: SPi Global Artist: SPi Global Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY Phone SPRINGER, fax (201) , orders-ny@springer-sbm.com, or visit Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please rights@apress.com, or visit Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. ebook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales ebook Licensing web page at Any source code or other supplementary material referenced by the author in this text is available to readers at For detailed information about how to locate your book s source code, go to

3 Contents at a Glance About the Author... xi About the Technical Reviewer... xiii Acknowledgments...xv Introduction...xvii Chapter 1: Introducing Grunt... 1 Chapter 2: How to Use Grunt in Your Project... 5 Chapter 3: Using Grunt with HTML and CSS Chapter 4: Using Grunt with JavaScript Chapter 5: Using Grunt with Images, SVG, and Icons Chapter 6: Using Grunt for Testing and Local Development Chapter 7: Optimizing Your Grunt Workflow Index iii

4

5 Contents About the Author... xi About the Technical Reviewer... xiii Acknowledgments...xv Introduction...xvii Chapter 1: Introducing Grunt... 1 How Can I Benefit from Grunt?... 1 Continuous Integration... 2 Speeding Up Your Workflow... 2 Every Craftsman Needs a Toolbelt... 2 Integration with Other Tools... 3 Versioning... 3 Readability... 3 Alternatives... 3 Ant... 3 Rake... 4 Gulp... 4 Summary... 4 Chapter 2: How to Use Grunt in Your Project... 5 Node.js... 5 Installing on Linux... 5 Installing on Windows... 6 Installing on Mac OS X... 6 Confirming Your Installation... 6 v

6 Contents npm... 7 Finding Modules... 7 Installing Modules... 8 Modules... 9 Loading Modules from node_modules Defining Node.js Projects Grunt Creating a New Project to Work with Grunt Adding Grunt and Plug-ins to Your Project Configuring Tasks Working with Files Compact Format File Object Format Files Array Format Summary Chapter 3: Using Grunt with HTML and CSS The Demo App CSS Preprocessing Installing Sass Brief Introduction to Sass Variables Nesting Partials and Imports Mixins Extend/Inheritance Sass with Grunt Working with Front-End Frameworks with Grunt Bower Bower with Grunt vi

7 Contents Linting Setting a Standard for Your CSS Prefixing Minification Removing Unused or Duplicate CSS Packaging Your App for Production Versioning Summary Chapter 4: Using Grunt with JavaScript Enhancing Our To-Do List Application JavaScript Modules AMD CommonJS Combining Grunt.js and JavaScript Modules Cleaning the Build Process JavaScript Templating JavaScript Linting Modernizr Minification Documentation Summary Chapter 5: Using Grunt with Images, SVG, and Icons Compressing Images Producing Responsive Images Resizing Images with Grunt Responsive Images with srcset Producing Image Sprites Automating Sprite Creation vii

8 Contents Working with SVGs Minifying SVG Generating SVG Sprites Generating Icon Fonts Summary Chapter 6: Using Grunt for Testing and Local Development Setting Up a Local Server Keeping the Server Running Automated Browser Launching Logging Requests to Our Server Extending Our Server with Compressed Responses Testing Writing Our First Test Modifying the Output from Nodeunit Test-Driven Development with Grunt Generating Fixtures Automating Fixtures at Runtime Applying Fixture Generation Testing in the Browser Configuring Karma Test Runner Modifying Our Application to Use AMD Automating Accessibility Testing Exposing the Local Server to the Outside World Performance Testing Performancing Development Environments Summary viii

9 Contents Chapter 7: Optimizing Your Grunt Workflow Measuring Performance Loading Plug-ins Automating Loading with matchdep Automating Loading with load-grunt-tasks Deferring Automating Loading Organizing Your Gruntfile Using Modules Using Groups Extracting Common Configuration Options Running Tasks in Parallel Running Things on Changes Reloading Changes Automatically in the Browser Continuous Integration Summary Index ix

10

11 About the Author James Cryer is a Principal Web Developer with the BBC in Cardiff, UK. At the BBC James works within the BBC Travel team, part of BBC News, as technical lead delivering the next iteration of the Travel product across multiple platforms. Before joining the BBC, James worked with software houses within Cardiff delivering digital solutions for a variety of clients such as the Royal Navy, Investec Asset Management and UNISON. Whilst James is a front-end specialist with a passion for web performance, he has built applications in PHP, Scala, Objective C, Java, PHP, Ruby and Node. He is an active contributor to his local community, speaking at meet ups on subject matters such as cloud technologies, browser performance and developer tooling. James enjoys technical writing, co-authoring the Yeoman project s first CodeLab and publishing tutorials in.net magazine. Aside from his interest in technology, he also enjoys traveling with his wife and cycling. xi

12

13 About the Technical Reviewer Matt Gifford is owner and primary primate at his own development consultancy company, Monkeh Works Ltd. His work primarily focuses on building mobile apps, front end development, streamlining workflows and developing full-scale web apps in a number of server-side languages. He s a published author and presents at conferences and user groups on a variety of topics and is also a keen proponent for community resources and sharing knowledge. He is the author of Object-Oriented Programming in ColdFusion and PhoneGap Mobile Application Development Cookbook and also contributes articles and tutorials to international industry magazines. Visit Matt at on Twitter. xiii

14

15 Acknowledgments Firstly, I d like to thank Ben Alman, the creator of Grunt.js. Without Ben s creation, I wouldn t have the opportunity to write this book and hopefully inspire you to re-consider your development workflow by introducing Grunt. Next, I would like to thank everyone at Apress for working so hard to bring this book to print. In particular, I d like to thank Louise Corrigan for working closely with me to setup the book initially and offering advice throughout the whole process. Without Christine Ricketts this book would not be published, thanks to her constant support and help to ensure I remained on track. Last but not least, I am grateful to Matt Gifford for performing the detailed technical review of the book. Finally, without the constant support and inspiration from my wife Charlotte, this book would never have been achieved. I thank her for her endless support and understanding as I burnt the midnight oil on numerous nights to complete the book. xv

16

17 Introduction Welcome to Pro Grunt.js. This book has been written for those who are interested in learning how Grunt.js can be use to modernize their developer workflow. Grunt can be used to automate mundane, repetitive tasks that feature in almost all mobile and web projects. Developing optimal web applications that are tuned for performance is essential to delivering a good user experience for all. We cannot make assumptions about the devices and the networks users are accessing our sites and applications from. Grunt can be used to ensure that every project we develop has a set of best practices baked in from the outset through the definition of a common set of tasks that will enable our project to be minified, linted and tested. Grunt s extensibility and large number of plugins makes it the perfect tool for quickly developing a tool belt that is re-usable across projects. Chapter 1 This chapter introduces Grunt, providing an overview of the benefits of using a task runner like Grunt before concluding with a comparison to other popular build tools. Chapter 2 This chapter discusses the core concepts of Grunt. Installing Grunt on a project, tasks and file matchers are also covered. Chapter 3 This chapter is dedicated to the introduction of Grunt tasks for working with HTML and CSS. Topics such as sass compilation, html minification and CSS linting are discussed. Chapter 4 This chapter discusses a set of Grunt tasks that can be used whilst working with JavaScript. It covers linting, minifications and documentation generation. Chapter 5 This chapter introduces a set of Grunt plugins for working with images, SVG and icons. Image compression, SVG minification and automated sprite generation are covered. xvii

18 Introduction Chapter 6 This chapter discusses setting up a local Node server to run a static website generated by Grunt locally. The topic of testing local web applications is also covered in this chapter using frameworks such as Karma. Chapter 7 The final chapter looks at how a Grunt workflow itself can be optimized to make it more maintainable and reusable. Topics such as Grunt configuration files, optimize plugin loading, and measuring Grunt load times are discussed. xviii