Grunt.js


SD-PHP is getting it's Javascript on

Javascript task running, that is

What is Grunt.js?


  • Javascript task runner
    • Minify, Concatenate,
      Pre-processerize
    • Watch files, Live Reload
    • Different tasks to run different
      plugins
    • Close to 2,000 plugins to
      choose from

I need to install grunt


It's simple!

Prerequisities: Node.js

how does it work?

Run grunt from the command line


Anatomy of a gruntfile


ANATOMY OF A GRUNTFILE


grunt.initConfig( object );
Sets up your tasks with options and target files

grunt.loadNpmTasks( string );
Load each NPM Task you will use

grunt.registerTask( string, array );
Set up a command line option to run specific tasks

Another Example

grunt-contrib-compass (SASS)

How to get those plugins

Via the command line, of course!
Install a package:

--save-dev saves it to your package.json file

This is a lightning talk

In conclusion:

Grunt.js is awesome. Use it to:

Identify repetitive tasks you do while developing

For instance:
Starting a web server, refreshing the browser,
creating sprite maps, compressing images,
concatenating and minifying CSS and JS,
upload to FTP, building production files,
etc... etc...

Also remember


These are beneficial for you and everyone
else who works on your project.

If someone else doesn't own Coda, or PHP Storm,
they can still use SASS, they can still utilize
Live Reload, they can still build the same files as you.

Plus, you get to say Grunt a lot.

Cue childish IRC jokes.




THANK YOU!


Further reading:



Learn about the package.json file

In-depth look at Grunt.js (paid membership)


Grunt.js

By Kalen Johnson

Loading comments...

More from Kalen Johnson