Question

目前是Grunt的新手，他正在设置一个任务来从源文件集合中构建CSS sprites（在公共文件夹结构中）。

要做到这一点，我一直在使用grunt-spritesmith：https://npmjs.org/package/grunt-spritesmith。

截至目前，我的任务是查看特定文件夹并构建sprite和SCSS partials。

我的问题：是否可以遍历一系列网站名称并将其传递到下面的任务中 - 而无需为每个网站重复任务？

grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    sprite: {

        normal: {
            src: 'site1/images/sprite/1x/*.png',
            destImg: 'site1/images/site1-sprite.png',
            destCSS: 'styles/scss/site1/sprite/_spritesmith.scss',
            algorithm: 'binary-tree',
            padding: 20,
            cssFormat: 'scss',
            engine: 'pngsmith',
            cssOpts: {
                cssClass: function(item) {
                    return '.' + item.name;
                },
            },
        },

        retina: {
            src: 'site1/images/sprite/2x/*.png',
            destImg: 'site1/images/site1-sprite-2x.png',
            destCSS: 'styles/scss/site1/sprite/_spritesmith-retina.scss',
            algorithm: 'binary-tree',
            padding: 40,
            cssFormat: 'scss',
            engine: 'pngsmith',
            cssOpts: {
                functions: false,
            },
        },

    },

});

我有大约15-20个网站的集合，因此标准和视网膜精灵两次复制每个任务很快就臃肿了我的Gruntfile。 Javascript不是我的强项，所以迄今为止的每个解决方案都无法工作。

任何帮助将不胜感激。

提前谢谢！

Answer 1

您会注意到grunt.initConfig函数将对象文字作为输入，因此您可以在将配置对象传递给initConfig之前以语法方式构建配置对象

类似

var _ = require('lodash'),
    tasks = require('mytasks'),
    abunchOftasks = require('anotherSetOfTasks');


var combined = _.merge(tasks, abunchOftasks ) //a deep extend

grunt.initConfig(combined)

其中require('mytasks')和require('anotherSetOfTasks')返回带有一堆已定义任务，变量等的{}。例如：

//mytasks
module.exports=   { 
  sprite: {
    normal: {
        src: 'site1/images/sprite/1x/*.png',
        destImg: 'site1/images/site1-sprite.png',
        destCSS: 'styles/scss/site1/sprite/_spritesmith.scss',
        algorithm: 'binary-tree',
        padding: 20,
        cssFormat: 'scss',
        engine: 'pngsmith',
        cssOpts: {
            cssClass: function(item) {
                return '.' + item.name;
            },
        },
    },
  }
};

//anotherSetOfTasks
module.exports = {
  sprite: {
    retina: {
        src: 'site1/images/sprite/2x/*.png',
        destImg: 'site1/images/site1-sprite-2x.png',
        destCSS: 'styles/scss/site1/sprite/_spritesmith-retina.scss',
        algorithm: 'binary-tree',
        padding: 40,
        cssFormat: 'scss',
        engine: 'pngsmith',
        cssOpts: {
            functions: false,
        },
    },
  }
};

编辑哎呀可能有点误解，但基本原则仍然适用。您可以创建一个从站点名称生成任务的函数。我会按照你的建议循环遍历一系列名称并创建一个新的配置，然后将每个对象组合成一个sprite属性的对象。这有意义吗？

循环通过Grunt任务

1 个答案: