如何在Grunt目标之间共享文件
How to share files between Grunt targets?
My Gruntfile在相同任务的两个目标dist
和dev
之间共享了"files"
。以下是一个仅包括触控笔问题的示例:
"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"]);
};
有没有一种方法可以将文件配置提升一个级别,这样我就不必在两个目标中重复它了?
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"]);
};
检查模板: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"]);
};
您可以将config传递到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"]);
};
我过去曾以几种不同的方式处理过这个问题。一种是利用环境变量并使用环境变量来切换简单的标志,如手写笔标志。扩展这种方法,您甚至可以注册一个为您设置标志的任务。例如
"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"]);
};
您也可以使用templates路由或扩展基本对象,但我通常发现标记非常简单。
您可以将其作为行项目添加到您的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
很确定这样的东西能起作用。。。
"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.
相关文章:
- 是否可以缓存可下载的文件,并在XHR和非XHR请求之间共享该缓存
- 如何将json文件中的数据提取到对象数组中,并在两个控制器之间共享
- 关于node.js/javascript在文件之间共享变量
- 在2js文件之间共享值
- 在两个文件之间共享按钮变量
- 在单独文件夹/位置中的.js文件之间共享变量
- 在父帧和子帧之间共享 javascript 包含文件
- 在两个不同的模块和两个不同的js文件之间共享服务
- 在两个js文件之间共享全局变量
- 如何在javascript文件之间共享数据
- 如何在Grunt目标之间共享文件
- 如何在Node中的两个文件之间共享模块私有数据
- 如何在不同的JS文件之间共享相同的作用域变量
- DRY jasmine测试——在多个.js文件之间共享代码
- 使用JavaScript在HTML文件之间共享JSON对象
- 在两个JS文件之间共享代码
- 在加载到Meteor的javascript文件之间共享全局变量
- 在服务器、客户端和所有文件之间共享Meteor功能,而不声明它们为全局文件
- 在 Firefox 扩展名中的文件之间共享数据
- 是否可以限制全局变量仅在2个脚本文件之间共享