咕噜表图像文件夹

Question

我第一次尝试咕噜声。

我使用grunt-spritesheet创建一个CSS Sprite，效果很好。

现在我想做更多的事情：当我在src文件夹中添加/删除图像时，精灵任务sholud会自动运行。我试试这个，但它不起作用：

Gruntfile.js

    module.exports = function(grunt) {

    // Load the plugin(s)
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-spritesheet');

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        /* Beginn tasks */

        watch: {
            files: ['src/**/*.png'],                
            tasks: ['spritesheet']
        },

        spritesheet: {
            generate: {

                // An array of filename / source images array pairs. The basename of the sprite file
                // is also prefixed to the CSS classes.
                sprites: {
                "images/sprite.png": ['src/**/*.png'], /* img src folder */

                },

                // The destination for the build stylesheet
                sheet: "css/sptite.css",

                // A mustache template used to render your sprites in a css file. (Optional)
                templateUrl: "template.mustache",

                // Optionally pass additional options to spritesmith
                // https://github.com/Ensighten/grunt-spritesmith
                spritesmithOptions: {
                padding: 2,
                algorithm: 'binary-tree'
                }
            }
        }

        /* End tasks */

    });

    // Default task(s)
    grunt.registerTask('default', ['watch']);

};

的package.json

{
  "name": "Sprites",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.4",
    "grunt-spritesheet": "^0.1.4",
    "grunt-contrib-watch": "^0.6.1"
  }
}

终端

我运行grunt

文件夹

**添加文件来源template.mustache

{{#std}}
.{{&name}} {
    background-image: url({{&sprite}});
    width: {{width}}px;
    height: {{height}}px;
    background-position: -{{x}}px -{{y}}px;
}
{{/std}}



/**
 * Retina Display Media Query
 * http://css-tricks.com/snippets/css/retina-display-media-query/ 
 *
 */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

    {{#dbl}}
    .{{&name}} {
        background-image: url({{&sprite}});
        width: {{width}}px;
        height: {{height}}px;
        background-position: -{{x}}px -{{y}}px;
        background-size: {{spriteWidth}}px {{spriteHeight}}px;
    }
    {{/dbl}}
}

感谢您的帮助 Ogni