Home

Awesome

grunt-smushit Build Status

Grunt plugin to remove unnecessary bytes of PNG and JPG using reSmush.it

reSmush.it is a FREE alternative to Yahoo Smush.it (deprecated on March 2015). This tool provides a online way to optimize pictures size via a documented webservice.

Read more about reSmush.it

Prefer Gulp? gulp-smushit

Getting Started

This plugin requires Grunt 0.4.x

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-smushit --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-smushit');

The "smushit" task

Overview

In your project's Gruntfile, add a section named smushit to the data object passed into grunt.initConfig().

grunt.initConfig({
  smushit: {
    mygroup: {
      src: ['tests/img/**/*.png','tests/img/**/*.jpg'],
      dest: 'tests/img/min'
    }
  }
});

Options

options.service

Type: String Default value: null Call another service instead of Yahoo Smushit

options.verbose

Type: boolean Default value: true Show image compressing rate log

Usage Examples

Output Folder

Move your files to a target folder (should not be into the same).

grunt.initConfig({
  smushit: {

    // catch all files from a single folder
    group1: {
      src: 'tests/img',
      dest: 'tests/opt_img'
    },

    // filter by filetype
    group2: {
      src: ['tests/img/**/*.png','tests/img/**/*.jpg'],
      dest: 'tests/img/min'
    },

    // set each file
    group3:{
        src: ['tests/img/logo.png','tests/img/whatever.png'],
        dest: 'tests/img/min'
    }

  }
});

Replace files

Be safe to replace all of your old files with this option.

grunt.initConfig({
  smushit: {

    // a single directory
    group1: {
      src: 'tests/img'
    },

    // filter by filetype
    group2: {
      src: ['tests/img/**/*.png','tests/img/**/*.jpg']
    },

    //replace recursive
    group3: {
      src: ['tests/img/logo.png','tests/img/tellme.jpg']
    }

  }
});

Work with a nested folder

Recursively walk into folders and smushit files

grunt.initConfig({
  smushit: {

    // catch all files from a nested folder
    group1: {
      src: 'tests/nested/img',
      dest: 'tests/opt_img'
    },

    // filter files in a nested folder by filetype
    group2: {
      src: ['tests/nested/img/**/*.png','tests/nested/img/**/*.jpg'],
      dest: 'tests/opt_img'
    },

    // retrieve files in a nested folder by file name
    group3: {
      src: ['tests/nested/img/**/southpark.png','tests/nested/img/**/southpark.jpg'],
      dest: 'tests/opt_img'
    },
  }
});

Provide multiple source

Smushit one folder, or many of them

grunt.initConfig({
  smushit: {

    // catch all files from a nested folder
    group1: {
      src: ['tests/img1', 'tests/img2'],
      dest: 'tests/opt_img'
    },

    // filter files in a folder by filetype
    group2: {
      src: ['tests/img1/**/*.png','tests/img2/**/*.jpg'],
      dest: 'tests/opt_img'
    },

    // retrieve files in a folder by file name
    group3: {
      src: ['tests/img1/**/southpark.png','tests/img2/**/southpark.jpg'],
      dest: 'tests/opt_img'
    },
  }
});

Use of cwd

Provide your base directory

grunt.initConfig({
  smushit: {

    // src folder is 'tests/img' and dest is 'tests/opt_img'
    group1: {
      cwd: 'tests'
      expand: true,
      src: 'img',
      dest: 'tests/opt_img'
    },

    // multiple src folders: src folder is ['tests/img1', 'tests/img2'] and dest is 'tests/img/min'
    group2: {
      cwd: 'tests'
      expand: true,
      src: ['img1/**/*.png','img2/**/*.jpg'],
      dest: 'tests/img/min'
    },
  }
});

Your own service

There is an option that you can set your own image optimizer service. Its a good alternative if you don't want to wait for smush.it web service latency.

grunt.initConfig({
  smushit: {
    options: {
      service: 'http://myimgopt.com/exec'
    },
    mygroup: {
      src: ['tests/img/**/*.png','tests/img/**/*.jpg'],
      dest: 'tests/img/min'
    }
  }
});

Contributing

$ git clone git://github.com/heldr/grunt-smushit.git
$ cd grunt-smushit
$ npm install
$ npm test

NOTE: Be sure to keep up to date the plugin tests and jshint code quality.

Release History

Credits

License

MIT License (c) Helder Santana