Grunt describes itself as:
Grunt is a task-based command line construct software for JavaScript tasks.
It was launched very lately and is authored by Ben “Cowboy” Alman and lives on the Github Repository. On this tutorial I will be going by way of the fundamentals of Grunt, easy methods to set up & use it. I’ll solely cowl primary utilization as we speak, with a observe up publish deliberate for subsequent week.
Please notice that Grunt is at the moment in beta and altering pretty usually, this tutorial was written with Grunt 0.3.9. I’ll hyperlink to newer variations of the tutorial when new variations of Grunt are launched.
Grunt is put in as a NPM (Node Package deal Supervisor) module. When you’ve not bought Node.js & NPM put in, it’s best to try this earlier than continuing. You’ll be able to set up the package deal from the Node.js web site, or in case you’re on a Mac & have homebrew put in you may get it that manner too. It is best to then set up NPM, which manages packages for Node. You possibly can draw sure parallels between NPM & Ruby Gems, in case you like. Please notice that in case you use a package deal set up from the Node.js web site, that comes with NPM already. Solely set up NPM in case you put in from supply or by way of a package deal supervisor like homebrew.
As soon as performed, Grunt is put in with a easy npm set up -g grunt. The -g flag installs Grunt globally, which suggests it will likely be out there from anyplace in your terminal, because it’s put in to the foundation node_modules listing. When you solely need Grunt to be out there if you’re inside a selected listing, navigate to that listing & run the above command, simply with out -g. As soon as that is performed you may get an entire load of terminal output as Grunt & its dependencies are put in. As soon as performed you will notice one thing like this:
You’ll be able to see right here that I’ve put in Grunt and the record of dependencies. When you get an identical output, you are all set, so we will now arrange a mission.
Step one is to initialise a brand new mission, by way of Grunt. There’s various several types of tasks we will initialise right here as Grunt comes with some useful templates, together with particular mission arrange for commonjs, jquery, and node. Lets create a jQuery mission. Make a brand new listing to accommodate your mission after which enter grunt init:jquery. You will be requested a number of questions alongside the best way. Grunt reveals the present worth set in brackets, and in case you do not wish to override it, simply press enter. This is what mine appears to be like like:
The primary file we are going to have a look in is the grunt.js file, often known as gruntfile. A few of it is a bit overwhelming and would possibly look a bit alien, however don’t fret for now. The important thing bits I might prefer to level out is that Grunt has added sections for qunit right here, and generated the take a look at listing for us. It is also bought directions for concatenating recordsdata, watching recordsdata & operating duties on these recordsdata routinely when it detects a change in them:
watch: {
recordsdata: ‘<config:lint.recordsdata>’,
duties: ‘lint qunit’
}
This takes the recordsdata from the config:lint.recordsdata, which suggests this a part of our config:
lint: {
recordsdata: [‘grunt.js’, ‘src/**/*.js’, ‘test/**/*.js’]
}
That tells Grunt to routinely run the lint and qunit duties (which do precisely what you’d suppose) at any time when any of these recordsdata change. Fairly nifty! I’ll display this in a second.
On the finish you may discover this line:
grunt.registerTask(‘default’, ‘lint qunit concat min’);
This tells grunt that if it is not specified a job when it is run, simply to run lint, qunit, concat and min. Lets go to our terminal, and enter grunt.
Sadly for me, this did not go to plan:
Working “lint:recordsdata” (lint) job
Lint free.
Working “qunit:recordsdata” (qunit) job
Testing jquery.jsplayground-demo.html
Working PhantomJS…ERROR
Putting in PhantomJS is pretty straight ahead, directions may be discovered right here. PhantomJS is a headless Webkit, with a JavaScript API, which suggests we will run assessments by way of it, together with QUnit assessments. As soon as you have bought it put in, it’s best to see the output seem like this:
(as an apart, I can be overlaying PhantomJS in additional depth within the very close to future).
So, what this script did:
Ran JSLint on our code to test it for issues.
Mechanically ran QUnit assessments for us, with out opening a browser.
Concatenated our recordsdata into one (though on this occasion there is just one)
Minified that concatenated file right into a minified JS file.
Now, I do not learn about you, however I feel that is fairly superior for only one command! Say I wish to run these duties each time, I may edit grunt.js to let me try this. Discover the code for watch, which appears to be like like this:
watch: {
recordsdata: ‘<config:lint.recordsdata>’,
duties: ‘lint qunit’
},
Now, I may add the duties concat and min to that, however in case you keep in mind we outlined the default job to do all of this, so I could make the duties to run on watch merely default:
watch: {
recordsdata: ‘config:lint.recordsdata‘,
duties: ‘default’
}
In fact, in actuality operating the concat & min duties each time you save is a bit overkill, however I simply wish to display what you are able to do. It’s possible you’ll determine to see up new duties, one to run as default, one to run if you launch your code, one to run while growing, and so forth.
Now, lets check out the JS file it initially created for us, which is in src/jquery.jsplayground-demo.js. You will note it put within the license for us, the copyright and the URL to the Github repository – all of which we arrange by way of grunt init:jquery earlier. Now, lets change this file so we will see watch in motion. Grunt offers us a number of bits of code to get us began, however I will delete a few of it, then save the file so I can display Grunt’s watching skills. First, get the watch job operating by getting into within the terminal grunt watch. Then, make an edit. I will enter some invalid JS, so we will see JSLint fail. In my plugin file I’ve typed some garbage stuff. I reserve it, after which my terminal routinely updates:
I will repair that however take away all of the jQuery code aside from the code for $.fn.superior. Grunt has assessments written for us, so once I save this file, you may see assessments fail. They fail as a result of we’re testing code I’ve simply eliminated.
I take away these assessments which aren’t not wanted, and we cross:
.
Simply think about when engaged on a mission, with the ability to run grunt watch after which fortunately working in your code, figuring out it will likely be examined, checked & minified each time.
I hope this transient take a look at Grunt has impressed you to provide it a go. I personally have used it in a number of tasks lately and have actually loved it. You probably have any questions, please do go away a remark & I’ll reply them within the subsequent tutorial on Grunt, which I anticipate can be revealed within the subsequent week or two. We now have solely simply scratched the floor of what Grunt can do and within the subsequent tutorial we will additional discover every little thing Grunt has to supply.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!