A year ago I was working on a project.It was a standard HTML and CSS project.Since it was side project I had about an hour to work on it every day.

The first few weeks the project CSS was fairly large each file with about ~1000 lines of hate.But after a couple of weeks the CSS was now about 2000 lines and reusing CSS had become cumbersome.

Wow it’s 2013 and I was not using a build process for my saas files.I got so tired of running compass manually on the files and waiting for it complete so I could refresh the browser tab.

I took a stab at grunt.Grunt is a task runner for JavaScript.It has a huge collection of plugins which can be installed and used to create your build pipeline.

Grunt is cross platform and it runs on nodes.So the first thing I had to set up was node.I suggest getting the latest version of node.With every node project you need to use a package manger as it takes care of downloading and dependency management for the packages.

Grunt includes a command line tool which has to be installed globally

npm install -g grunt-cli

You need to create a package .json file by running the npm init command in your shell.You will also need to create a Gruntfile.js file in the project root directory.

Add the following dependencies to package.json file.

{
  "name": "Demo site",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-compass": "^1.0.1",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-express": "^1.4.1",
    "grunt-open": "^0.2.3",
    "matchdep": "^0.3.0"
  }
}

 

You then need to add the following tasks to Gruntfile.

module.exports = function(grunt){
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
  grunt.initConfig({
    express: {
    all: {
        options: {
          bases: ['/Users/surajshirvankar/Desktop/vk.ae/'],
          port: 8080,
          hostname: "0.0.0.0",
          livereload: true
        }
      }
    },
    compass:{
      dev:{
        options: {
          sassDir: 'sass',
          cssDir: 'css'
        }
      }
    },
    watch: {
      compass: {
        files: ['sass/*'],
        tasks: ['compass:dev']
      },
      all: {
          files: ['*.html', 'css/*.css'],
          options: {
              livereload: true
        }
      }
    },
    open: {
      all: {
        path: 'http://localhost:8080/index.html'
      }
    }
  });
  grunt.registerTask('default', ['express','open','watch']);
}

 

You are now done.Just run grunt and it takes care of starting a local server,live-reloading if you change files and build your CSS.



Grunt is an awesome javascript tool to automate your build process.The best part about gruntjs is how quickly you can build tasks.I came across this project which lets me build html email templates which work well with most browser.

The most important feature of this project is that it automatically builds and inlines the css.Emails need to have inline css because all of the email client in existence do not allow external stylesheets especially outlook.

This project is great once you create an email template you have it sent to your inbox to test.It also supports cloudfront cdn to have your email attachments in the cloud.

I am a big fan of mailchimp and their email service,I wanted to mailchimp’s smtp server to send the email to me rather than the built in mailgun(Mailgun is awesome too).I looked around for a grunt plugin for mailchimp.After a couple of minutes searching,I decided to write my own grunt plugin to send the email.

Since mailchimp calls it’s email service mandrill.I did the logical thing and named the plugin grunt-mandrill(I suck at naming things)

The plugin is pretty simple.You add the configs in your Gruntfile and add the grunt-mandrill task to it.

Back to grunt-email-design.
I have integrated the plugin with the email design repo,pull request is still pending.But if you want to use mandrill head over to my github repo to use it.