{"id":116,"date":"2014-10-31T22:56:40","date_gmt":"2014-10-31T22:56:40","guid":{"rendered":"http:\/\/kopijunkie.net\/blog\/?p=116"},"modified":"2015-01-29T23:39:27","modified_gmt":"2015-01-29T23:39:27","slug":"grunt-timekeeping","status":"publish","type":"post","link":"https:\/\/kopijunkie.net\/blog\/2014\/10\/31\/grunt-timekeeping\/","title":{"rendered":"Grunt Timekeeping"},"content":{"rendered":"

Recently I added a Grunt plugin to the front end workflow we have at work that handily displays a summary of the time taken by a project’s Grunt build tasks. Before this the team had only been aware of the overall time taken. Especially with LiveReload running, waiting for the page to reload with our changes.<\/p>\n

We suspected the Compass compilation was taking “a long time”. But we didn’t know for certain how long and if that was the only problem area. With time-grunt<\/a> we could now see a nice breakdown of each task’s time taken allowing us to know what to focus our performance improvements on.
\n<\/p>\n

Setting it up was easy enough. Though it is slightly different from the usual Grunt tasks. Just install it using NPM and save it into the project’s package.json<\/code> as a development dependency with npm install time-grunt --save-dev<\/code> in the project’s front end root directory. Then in your project’s Gruntfile.js<\/code> add time-grunt<\/code> as a required module and pass it the Grunt instance with require(\"time-grunt\")(grunt);<\/code><\/p>\n

\"time-grunt<\/a>

time-grunt task output<\/p><\/div>\n

Now when you run Grunt again, at the end of your Grunt output there will be a nice time chart broken down by tasks reporting how long each task took with a total run time also. Sweet!<\/p>\n","protected":false},"excerpt":{"rendered":"

Recently I added a Grunt plugin to the front end workflow we have at work that handily displays a summary of the time taken by a project’s Grunt build tasks. Before this the team had only been aware of the overall time taken. Especially with LiveReload running, waiting for the page to reload with our […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,19],"tags":[34,33],"class_list":["post-116","post","type-post","status-publish","format-standard","hentry","category-front-end-development","category-workflow","tag-front-end-workflow","tag-grunt"],"_links":{"self":[{"href":"https:\/\/kopijunkie.net\/blog\/wp-json\/wp\/v2\/posts\/116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kopijunkie.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kopijunkie.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kopijunkie.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kopijunkie.net\/blog\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":6,"href":"https:\/\/kopijunkie.net\/blog\/wp-json\/wp\/v2\/posts\/116\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/kopijunkie.net\/blog\/wp-json\/wp\/v2\/posts\/116\/revisions\/138"}],"wp:attachment":[{"href":"https:\/\/kopijunkie.net\/blog\/wp-json\/wp\/v2\/media?parent=116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kopijunkie.net\/blog\/wp-json\/wp\/v2\/categories?post=116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kopijunkie.net\/blog\/wp-json\/wp\/v2\/tags?post=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}