{"id":96,"date":"2013-09-02T10:46:37","date_gmt":"2013-09-02T08:46:37","guid":{"rendered":"http:\/\/hesmid.nl\/test\/?p=96"},"modified":"2016-01-20T13:07:35","modified_gmt":"2016-01-20T12:07:35","slug":"grunt","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/grunt\/","title":{"rendered":"Grunt"},"content":{"rendered":"<p>So, people seem to be exited about something called &#8216;Grunt&#8217;&#8230;<\/p>\n<p>Let&#8217;s explore.<\/p>\n<p>From the Grunt <a title=\"gruntjs.com\" href=\"http:\/\/gruntjs.com\/\">website<\/a>:<\/p>\n<ul>\n<li>Why should you use a task runner like Grunt?<br \/>\n<span style=\"line-height: 1.5;\">In one word:\u00a0<\/span><strong style=\"line-height: 1.5;\">automation.\u00a0<\/strong><span style=\"line-height: 1.5;\">Automation of what? Well, such repetitive tasks as: minification, compilation, unit testing, linting etc.<\/span><\/li>\n<li>Why Grunt?<br \/>\nThe Grunt ecosystem is huge with hundred of plugins. Coffeescript, handlebars, jade, JS Hint, {less}, require.js. SASS, Stylus etc.<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<p>Getting Started<\/p>\n<h4>Installation<\/h4>\n<p>&#8211; I installed Node.js using the windows installer available <a href=\"http:\/\/nodejs.org\/download\/\">here<\/a><\/p>\n<p>&#8211; Then install Grunt&#8217;s command line interface (CLI) from the (standard!) windows command line (doesn&#8217;t work from console2):<\/p>\n<p><code>npm install -g grunt-cli\u00a0<\/code><\/p>\n<p>This will put the <code>grunt<\/code> command in your system path, allowing it to be run from any directory.<\/p>\n<p>Note that installing <code>grunt-cli<\/code> does not install the Grunt task runner! The job of the Grunt CLI is simple: run the version of Grunt which has been installed next to a <code>Gruntfile<\/code>. This allows multiple versions of Grunt to be installed on the same machine simultaneously.\u00a0Each time <code>grunt<\/code> is run, it looks for a locally installed Grunt using node&#8217;s <code>require()<\/code> system. Because of this, you can run <code>grunt<\/code> from any subfolder in your project.\u00a0If a locally installed Grunt is found, the CLI loads the local installation of the Grunt library, applies the configuration from your <code>Gruntfile<\/code>, and executes any tasks you&#8217;ve requested for it to run.<\/p>\n<h3><a href=\"http:\/\/gruntjs.com\/getting-started#preparing-a-new-grunt-project\" name=\"preparing-a-new-grunt-project\">Preparing a new Grunt project<\/a><\/h3>\n<p>A typical setup will involve adding two files to your project: <code>package.json<\/code> and the <code>Gruntfile<\/code>.<\/p>\n<p><strong>package.json<\/strong>: This file is used by <a href=\"https:\/\/npmjs.org\/\">npm<\/a> to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as <a href=\"https:\/\/npmjs.org\/doc\/json.html#devDependencies\">devDependencies<\/a> in this file.<\/p>\n<p><strong>Gruntfile<\/strong>: This file is named <code>Gruntfile.js<\/code> or <code>Gruntfile.coffee<\/code> and is used to configure or define tasks and load Grunt plugins.<\/p>\n<p>See for more <a href=\"http:\/\/gruntjs.com\/getting-started#preparing-a-new-grunt-project\">here<\/a><\/p>\n<p>For now let&#8217;s continue with focusing on Grunt in WP-development. Jonathan Christopher wrote down his approach: (<a title=\"Using Grunt to Speed Up &amp; Standardize your WordPress Theme Development\" href=\"https:\/\/mondaybynoon.com\/grunt-wordpress-theme-development\/\">link<\/a>)<\/p>\n<h3>Configuring Grunt for your WordPress Theme<\/h3>\n<p>I\u2019ve been spending some time reorganizing the folder structure of my WordPress themes, which does come into play when setting up Grunt with your project. Folder structure and file organization is really personal when it comes to a WordPress theme developer so rest assured this can be customized to integrate with your workflow, it doesn\u2019t have to replicate mine top to bottom. Continuing, the folder structure I\u2019ve been working with lately for my custom WordPress themes is as follows:<\/p>\n<ul>\n<li><strong><kbd>client-name<\/kbd><\/strong>\n<ul>\n<li><strong><kbd>assets<\/kbd><\/strong>\n<ul>\n<li><strong><kbd>fonts<\/kbd><\/strong> <em>&#8211; Any fonts used in the theme<\/em><\/li>\n<li><strong><kbd>images<\/kbd><\/strong> <em>&#8211; Any images used in the theme<\/em><\/li>\n<li><strong><kbd>javascripts<\/kbd><\/strong>\n<ul>\n<li><strong><kbd>build<\/kbd><\/strong><\/li>\n<li><strong><kbd>source<\/kbd><\/strong> <em>&#8211; Any custom JavaScript used in the theme<\/em><\/li>\n<li><strong><kbd>vendor<\/kbd><\/strong> <em>&#8211; Any vendor-provided JavaScript used in the theme (e.g. jQuery plugins)<\/em><\/li>\n<\/ul>\n<\/li>\n<li><strong><kbd>styles<\/kbd><\/strong>\n<ul>\n<li><strong><kbd>build<\/kbd><\/strong><\/li>\n<li><strong><kbd>source<\/kbd><\/strong> <em>&#8211; Any custom Sass used in the theme<\/em><\/li>\n<li><strong><kbd>vendor<\/kbd><\/strong> <em>&#8211; Any vendor-provided Sass used in the theme (e.g. third party mixins\/functions)<\/em><\/li>\n<\/ul>\n<\/li>\n<li><kbd>Gruntfile.js<\/kbd><\/li>\n<li><kbd>package.json<\/kbd><\/li>\n<\/ul>\n<\/li>\n<li><strong><kbd>lib<\/kbd><\/strong> <em>&#8211; Custom classes or otherwise that take care of heavier lifting<\/em><\/li>\n<li><strong><kbd>templates<\/kbd><\/strong> <em>&#8211; All theme template files<\/em>\n<ul>\n<li><strong><kbd>partials<\/kbd><\/strong> <em>&#8211; Partial templates (e.g. header, footer)<\/em><\/li>\n<\/ul>\n<\/li>\n<li><kbd>functions.php<\/kbd> <em>&#8211; Essentially repurposed as a bootloader for the content of <code>lib<\/code><\/em><\/li>\n<li><kbd>index.php<\/kbd><\/li>\n<li><kbd>style.css<\/kbd><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So, people seem to be exited about something called &#8216;Grunt&#8217;&#8230; Let&#8217;s explore. From the Grunt website: Why should you use a task runner like Grunt? In one word:\u00a0automation.\u00a0Automation of what? Well, such repetitive tasks as: minification, compilation, unit testing, linting etc. Why Grunt? The Grunt ecosystem is huge with hundred of plugins. Coffeescript, handlebars, jade, [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,17,4],"tags":[23,24],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/96"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":5,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/96\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/96\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}