14

我的 Gruntfile 已经重复"files"了它在两个目标之间共享的所有内容，dist并且dev，相同的任务。这是一个仅包括手写笔问题的示例：

"use strict";

module.exports = function (grunt) {
    grunt.loadNpmTasks("grunt-contrib-stylus");

    grunt.initConfig({
        stylus: {
            dist: {
                files: { "www/bundle.css": ["stylus/*.styl"] },
                options: { compress: true, linenos: false }
            },
            dev: {
                files: { "www/bundle.css": ["stylus/*.styl"] },
                options: { compress: false, linenos: true }
            }
        }
    });

    grunt.registerTask("dev", ["stylus:dev"]);
    grunt.registerTask("prod", ["stylus:prod"]);
};

有没有办法将文件配置提升一个级别，这样我就不必在两个目标中重复它？

4

6 回答 6

11

Domenic，您可以使用 POJS 变量：

"use strict";

module.exports = function (grunt) {
    grunt.loadNpmTasks("grunt-contrib-stylus");

    var stylusFiles = { "www/bundle.css": ["stylus/*.styl"] };

    grunt.initConfig({
        stylus: {
            dist: {
                files: stylusFiles,
                options: { compress: true, linenos: false }
            },
            dev: {
                files: stylusFiles,
                options: { compress: false, linenos: true }
            }
        }
    });

    grunt.registerTask("dev", ["stylus:dev"]);
    grunt.registerTask("prod", ["stylus:prod"]);
};

或者，您可以按照Grunt“配置任务”指南使用模板。

"use strict";

module.exports = function (grunt) {
    grunt.loadNpmTasks("grunt-contrib-stylus");

    grunt.initConfig({
        stylus: {
            dist: {
                files: { "www/bundle.css": ["stylus/*.styl"] },
                options: { compress: true, linenos: false }
            },
            dev: {
                files: "<%= stylus.dist.files %>",
                options: { compress: false, linenos: true }
            }
        }
    });

    grunt.registerTask("dev", ["stylus:dev"]);
    grunt.registerTask("prod", ["stylus:prod"]);
};
于 2013-07-09T14:40:57.660 回答
5

查看模板： http: //gruntjs.com/configuring-tasks#templates

"use strict";

module.exports = function (grunt) {
  grunt.loadNpmTasks("grunt-contrib-stylus");

  grunt.initConfig({
    stylus: {
      dist: {
        files: {
          "www/bundle.css": ["stylus/*.styl"],
        },
        options: { compress: true, linenos: false }
      },
      dev: {
        files: "<%= stylus.dist.files %>",
        options: { compress: false, linenos: true }
      }
    }
  });

  grunt.registerTask("dev", ["stylus:dev"]);
  grunt.registerTask("prod", ["stylus:prod"]);
};
于 2013-07-08T06:18:18.697 回答
1

您可以将配置传递给 grunt，我没有测试下面的代码，但我认为它应该可以工作。我只是之前没有使用过键的配置，只有值。希望这至少是一个开始。

"use strict";

module.exports = function (grunt) {
  grunt.loadNpmTasks("grunt-contrib-stylus");

  var buildConfig = {
    output: "www/bundle.css",
    files: ["stylus/*.styl"],
  };

  grunt.initConfig({
    config: buildConfig,
    stylus: {
        dist: {
            files: {<%= config.output%>: <%= config.files %>},
            options: { compress: true, linenos: false }
        },
        dev: {
            files: {<%= config.output%>: <%= config.files %>},
            options: { compress: false, linenos: true }
        }
    }
  });

  grunt.registerTask("dev", ["stylus:dev"]);
  grunt.registerTask("prod", ["stylus:prod"]);
};
于 2013-07-08T06:14:39.630 回答
1

过去，我曾以几种不同的方式处理过这个问题。一种是利用环境变量并使用环境变量来切换简单的标志，如手写笔标志。扩展这种方法，您甚至可以注册一个为您设置标志的任务。例如

"use strict";

var env = 'DEV';

module.exports = function (grunt) {
    grunt.loadNpmTasks("grunt-contrib-stylus");

    grunt.initConfig({
        stylus: {
            dist: {
                files: { "www/bundle.css": ["stylus/*.styl"] },
                options: { compress: env === 'PROD', linenos: env === 'DEV' }
            }
        }
    });

    grunt.registerTask('production', function () {
        env = 'PROD';
    });

    grunt.registerTask("dev", ["stylus"]);
    grunt.registerTask("prod", ["production", "dev"]);
};

您也可以使用模板路线或扩展基础对象，但我通常发现标志很容易使用。

于 2013-07-08T06:30:25.947 回答
0

您可以将其添加为 grunt 配置中的行项目：

"use strict";

module.exports = function (grunt) {
    grunt.loadNpmTasks("grunt-contrib-stylus");

    grunt.initConfig({
        cssFiles: ["stylus/*.styl"],
        stylus: {
            dist: {
                files: { "www/bundle.css": '<%= cssFiles %>' },
                options: { compress: true, linenos: false }
            },
            dev: {
                files: { "www/bundle.css": '<%= cssFiles %>' },
                options: { compress: false, linenos: true }
            }
        }
    });

    grunt.registerTask("dev", ["stylus:dev"]);
    grunt.registerTask("prod", ["stylus:prod"]);
};

如果您需要更多示例，请查看我在我的一个项目中使用的文件： https ://github.com/sugendran/cheatsheet.js/blob/master/Gruntfile.js

于 2013-07-08T06:15:31.427 回答
0

很确定这样的东西有效......

"use strict";

module.exports = function (grunt) {

    grunt.loadNpmTasks("grunt-contrib-stylus");

    var files = { "www/bundle.css": ["stylus/*.styl"] };
    var options;

    grunt.registerTask("config", function() {
        grunt.initConfig({
            stylus: {
                main: {
                    files: files,
                    options: options
                }
            }
        });
    });

    grunt.registerTask("setup-prod", function () {
        options = { compress: false, linenos: true };
    });

    grunt.registerTask("setup-dev", function () {
        options: { compress: true, linenos: false };
    });

    grunt.registerTask("dev", ["setup-dev", "config", "stylus"]);
    grunt.registerTask("prod", ["setup-prod", "config", "stylus"]);
};

看起来您也可以通过直接编辑 grunt.config.data 来更改配置而无需重新调用 initConfig()。

于 2013-07-09T06:40:22.770 回答