ElectricDiscoTech

If you have been following $(this).story() then you know that we are building up the components of dance, but what does that really mean?

When learning (or rehearsing) a new dance, each dancer repeats a pattern of movements many times. When applied to development, developers (designers, testers, etc…) identify the steps that are repeated over and over again. When a particular pattern becomes obvious, a smart developer looks for ways to automate it.

$(this).subject( () => {return move2("automation");} is a normal part of the workflow while developing a modern web application. There are tools that help to enable this type of automation.

disco robot

Grunt is a server side javascript application used to do the grunt work when developing modern web applications. Grunt runs from the command line as a node application. as long as you have node installed you can install grunt via npm.

If you are planning in using ElectricDiscoTech as a template for your own development project then grunt must be installed into the DEV directory. Since EDT is already setup to use grunt all you need to do is is issue the npm install command. npm finds grunt as a dependency (by looking in the package.json file) and installing its dependencies.

gruntjs.com

C:\Users\codemarc>cd ElectricDiscoTech\dev

C:\Users\codemarc\ElectricDiscoTech\dev>npm install
ElectricDiscoTech@0.0.1 C:\Users\codemarc\ElectricDiscoTech\dev
└─┬ grunt@0.4.5                                    
  ├── async@0.1.22
  
  ⋮

  ├── underscore.string@2.2.1
  └── which@1.0.9

Since grunt is run as a node application, you can start grunt from a command line as you would start any node application. Install the command line interface globally: npm install -g grunt-cli

C:\Users\codemarc\ElectricDiscoTech\dev>npm install -g grunt-cli
npm WARN deprecated lodash@2.4.2: lodash@<3.0.0 is no longer maintained. Upgrade
 to lodash@^3.0.0.
C:\Users\codemarc\AppData\Roaming\npm\grunt -> C:\Users\codemarc\AppData\Roaming
\npm\node_modules\grunt-cli\bin\grunt
C:\Users\codemarc\AppData\Roaming\npm
└─┬ grunt-cli@0.1.13
  ├─┬ findup-sync@0.1.3
  │ ├─┬ glob@3.2.11
  │ │ ├── inherits@2.0.1
  │ │ └─┬ minimatch@0.3.0
  │ │   ├── lru-cache@2.7.3
  │ │   └── sigmund@1.0.1
  │ └── lodash@2.4.2
  ├─┬ nopt@1.0.10
  │ └── abbrev@1.0.7
  └── resolve@0.3.1

Install the command line interface (npm install -g grunt-cli) and then use bower to grab/update source dependencies (listed in bower.json). And finally you are ready to start grunting.

C:\Users\codemarc\ElectricDiscoTech\dev>bower install
? May bower anonymously report usage statistics to improve the tool over time? (
Y/n) n
? May bower anonymously report usage statistics to improve the tool over time? N
o
bower not-cached    git://github.com/zenorocha/clipboard.js.git#~1.5.5
bower resolve       git://github.com/zenorocha/clipboard.js.git#~1.5.5
bower not-cached    git://github.com/uikit/bower-uikit.git#~2.23.0
bower resolve       git://github.com/uikit/bower-uikit.git#~2.23.0
bower download      https://github.com/zenorocha/clipboard.js/archive/v1.5.5.tar
.gz
bower download      https://github.com/uikit/bower-uikit/archive/2.23.0.tar.gz
bower extract       clipboard#~1.5.5 archive.tar.gz
bower extract       uikit#~2.23.0 archive.tar.gz
bower resolved      git://github.com/zenorocha/clipboard.js.git#1.5.5
bower resolved      git://github.com/uikit/bower-uikit.git#2.23.0
bower not-cached    git://github.com/jquery/jquery.git#>= 1.9.0
bower resolve       git://github.com/jquery/jquery.git#>= 1.9.0
bower download      https://github.com/jquery/jquery/archive/2.1.4.tar.gz
bower extract       jquery#>= 1.9.0 archive.tar.gz
bower resolved      git://github.com/jquery/jquery.git#2.1.4
bower install       clipboard#1.5.5
bower install       uikit#2.23.0
bower install       jquery#2.1.4

clipboard#1.5.5 bower_components\clipboard
uikit#2.23.0 bower_components\uikit
└── jquery#2.1.4

jquery#2.1.4 bower_components\jquery

And finally you are ready to start grunting.

C:\Users\codemarc\ElectricDiscoTech\dev>grunt
Running "less:development" (less) task
>> 2 stylesheets created.

Running "watch" task
Waiting...

Automate

Grunt