intro to grunt.js

for a better front-end workflow !

disclaimer


This is a entry-level demo.

This is a free-flowing presentation, 
so feel free to interrupt me at any point.

summary

  1. What is Grunt.js, you ask me ?
  2. Why should you use it ?
  3. How does it twerk ?
  4. An example ? Right this way!
  5. What's next ? 

What is grunt.js

Grunt is a task runner. It runs tasks that you ask it to run.

In short: it automates tedious actions so that you don't have to do them manually.


The way I see it is like having my own personal intern :)

Basically


It can: image resizing, croping, optimizing assets, compiling stuff, etc.


But it's also much more:  create dynamic websites that will compile into static builds, run test suites, lint and hint your code, live-reload your app, run a nodejs server with phantomjs, etc.

--

Hint: take a look at Yeoman (http://yeoman.io/) to
get a sense of how powerfull Grunt can be.

Qwhat?


The designers will better understand
if they see Grunt as a photoshop action.


Grunt, via the Terminal, is just a tiny tool that
helps enable this sorts of #automated #bliss.


The PM will better understand it as a way
to make more money by working faster.


Also, it helps preserve the front-end devs' sanity. 

Win-win-win-win.

why use grunt


Seriously ?

The Grunt ecosystem is huge and it's growing every day.

Which means, you can find a bunch of plugins that will make you harder, better, faster, stronger in your everyday boring tasks!

---

Let's go to http://gruntjs.com/ and see for ourselves.

But rails does all of that already,
leave me alone you freak!



Granted, Rails does answer a lot of the same questions Grunt tries to solve.


But not all of them.


There is a gap in the front-end workflow and relationship
with design and integration that can be filled with Grunt.

For example: a designer hands you unoptimized background images.
What would you do ?

how does grunt work


Before we jump into the example project, you should know that:

  1. Grunt runs on nodejs, so you need that.
  2. You should install Grunt (and it's CLI) through npm
  3. You should have a package.json file to declare your dependencies
  4. You will need a Gruntfile.js to tell Grunt what to run and how.


What is node and npm


Very quickly, Nodejs is a platform 
(a server-side framework) built in javascript.

So it will use that language instead of ruby to execute its tasks.

Like Gems for Rails, npm is node's package system
which are basically like plugins that you can use in the framework.

what is package.json


This file lists all the dependencies needed
to run a given application or website.

This allows developers to easily manage versions and do upgrades.

It very is similar to the Gemfile. 

{
  "name": "my-project-name", // project name
  "version": "0.1.0", // version name
  "devDependencies": { // dependencies list with versions
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.3.3",
    "grunt-contrib-uglify": "~0.4.0"
  }
}

Dependencies will be 'bundled' in the project using:
npm install

what is the gruntfile


This file is the link between the plugins (dependencies) loaded in package.json and their execution.

This is where we are gonna list all our tasks and point them to the right assets
and assign a command so that they can be ran and chained.

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Task commands
  grunt.registerTask('my-task-name', ['uglify']);

how can i run grunt


To run a Grunt task (or a series of), 
you must use the follow command in the terminal:

 grunt my-task

'my-task' is of course declared and configured in the Gruntfile.

This command needs to be called in the same folder as the Gruntfile.


Simple right ?


Show me that project, by the beard of Zeus!

grunt in action


The repo:  


The Steps:

  1. Overview of the project
  2. Install Grunt and it's CLI
  3. Configure and install the dependencies via npm
  4. Configure the tasks
  5. Run everything
  6. Add a new package and a task
  7. Wipe tears of joy and amazement
  8. Give money to the speaker

Add a package and a task




Repo:
https://www.npmjs.org/package/grunt-prettysass

What?
Usefull (or not) utility that will comb 
through your sass and make it cleaner.



  1. Add to package.json
  2. Create task
  3. Chain it

what's next?


In the Rails ecosystem, we need to find 
a nice and clean way to automate Grunt tasks, 
especially for deployment purposes.

This is opened for discussion!

have any questions, 

fears or needs?

that's it!




Thanks guys :)




Github
https://github.com/simonwalsh

Twitter
https://twitter.com/sim_walsh

Email
simon@godynamo.com

Intro to Grunt.js

By Simon Walsh

Made with Slides.com

Intro to Grunt.js

For a better front-end workflow!

  • 718

More from Simon Walsh