grunt-psdslicer
v0.0.1
Published
Retrieve slice data in a Photoshop file (.psd) so it can be used in a template file.
Downloads
4
Maintainers
Readme
grunt-psdslicer
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:
grunt.loadNpmTasks('grunt-psdslicer');
The "grunt-psdslicer" task
Overview
In your project's Gruntfile, add a section named grunt-psdslicer
to the data object passed into grunt.initConfig()
.
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
grunt.initConfig({
psdslicer: {
myTask: {
psd: [ 'src/psd/psd_01.psd', 'src/psd/psd_02.psd' ],
template: 'src/template/template.css',
dest: 'src/css/main.css'
}
}
})
Acknowledgements
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 psdheight
Height of the slice in the psdx
X coordinates of the slice in the psdy
Y coordinates of the slice in the psd
Contributing
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