node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



The grunt-psdslicer parses a Photoshop file (.psd) to retrieve user-sliced data. The information can be used in a template file out of which a distribution file will be generated.

Getting Started

This plugin requires Grunt ~0.4.0

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.

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


The "grunt-psdslicer" task


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

  psdslicer: {
    psd: // path to your psd file,   
    template: // path to your template file,   
    dest: // The destination for the build file. (css usually)   

Usage Examples

  psdslicer: {
    myTask: {
      psd: [ 'src/psd/psd_01.psd', 'src/psd/psd_02.psd' ],  
      template: 'src/template/template.css',
      dest: 'src/css/main.css'  


The psd-slicer uses movableink's The PSD.js node module to parse psd files.

Mustache Templates

Templates are parsed using mustache. To obtain slice information, simply specify your psd file name, a slice name and a property between {{ and }}.

ie.) {{ myPsdName.mySlice.width }}

Each slice information has following properties:

  • width Width of the slice in the psd

  • height Height of the slice in the psd

  • x X coordinates of the slice in the psd

  • y Y coordinates of the slice in the psd


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

To Do

  • Add Test