已经咕噜产生不同的设置的index.html [英] Have Grunt generate index.html for different setups
问题描述
我试图用步兵作为我的web应用程序的构建工具。
I'm trying to use Grunt as a build tool for my webapp.
我想至少有两个设置：
我。开发设置 - 从单独的文件加载脚本，无连接，
I. Development setup - load scripts from separate files, without concatenation,
所以我的index.html看起来是这样的：
so my index.html would look something like:
<!DOCTYPE html>
<html>
<head>
<script src="js/module1.js" />
<script src="js/module2.js" />
<script src="js/module3.js" />
...
</head>
<body></body>
</html>
II。产品设置 - 载入我的剧本精缩和放大器;串连在一个文件中，
II. Production setup - load my scripts minified & concatenated in one file,
与相应的index.html：
with index.html accordingly:
<!DOCTYPE html>
<html>
<head>
<script src="js/MyApp-all.min.js" />
</head>
<body></body>
</html>
现在的问题是，怎样才能让我做咕噜根据当我运行咕噜开发或咕噜配置这些的index.html的督促？的
也许我挖错了方向，它会更容易产生总是 MyApp的-all.min.js 但是放到里面全部是我的脚本（串联）或异步从单独的文件加载这些脚本加载器脚本？
Or maybe I'm digging in the wrong direction and it would be easier to always generate MyApp-all.min.js but put inside it either all my scripts (concatenated) or a loader script that asynchronously loads those scripts from separate files?
你怎么做，伙计们？
推荐答案
我拿出我自己的解决方案。不用抛光，但是我想我会在这个方向移动。
I've come up with my own solution. Not polished yet but I think I'm going to move in that direction.
在根本上，我使用 grunt.template.process（）以从分析当前配置和生产无论是我的原始源文件或链接列表与缩小的code单个文件的模板生成我 index.html的。下面的例子是为JS文件，但相同的方法可以扩展到CSS和任何其他可能的文本文件。
In essense, I'm using grunt.template.process() to generate my index.html from a template that analyzes current configuration and produces either a list of my original source files or links to a single file with minified code. The below example is for js files but the same approach can be extended to css and any other possible text files.
grunt.js ：
grunt.js:
/*global module:false*/
module.exports = function(grunt) {
var // js files
jsFiles = [
'src/module1.js',
'src/module2.js',
'src/module3.js',
'src/awesome.js'
];
// Import custom tasks (see index task below)
grunt.loadTasks( "build/tasks" );
// Project configuration.
grunt.initConfig({
pkg: '<json:package.json>',
meta: {
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */'
},
jsFiles: jsFiles,
// file name for concatenated js
concatJsFile: '<%= pkg.name %>-all.js',
// file name for concatenated & minified js
concatJsMinFile: '<%= pkg.name %>-all.min.js',
concat: {
dist: {
src: ['<banner:meta.banner>'].concat(jsFiles),
dest: 'dist/<%= concatJsFile %>'
}
},
min: {
dist: {
src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],
dest: 'dist/<%= concatJsMinFile %>'
}
},
lint: {
files: ['grunt.js'].concat(jsFiles)
},
// options for index.html builder task
index: {
src: 'index.tmpl', // source template file
dest: 'index.html' // destination file (usually index.html)
}
});
// Development setup
grunt.registerTask('dev', 'Development build', function() {
// set some global flags that all tasks can access
grunt.config('isDebug', true);
grunt.config('isConcat', false);
grunt.config('isMin', false);
// run tasks
grunt.task.run('lint index');
});
// Production setup
grunt.registerTask('prod', 'Production build', function() {
// set some global flags that all tasks can access
grunt.config('isDebug', false);
grunt.config('isConcat', true);
grunt.config('isMin', true);
// run tasks
grunt.task.run('lint concat min index');
});
// Default task
grunt.registerTask('default', 'dev');
};
index.js（索引任务）：
index.js (the index task):
module.exports = function( grunt ) {
grunt.registerTask( "index", "Generate index.html depending on configuration", function() {
var conf = grunt.config('index'),
tmpl = grunt.file.read(conf.src);
grunt.file.write(conf.dest, grunt.template.process(tmpl));
grunt.log.writeln('Generated \'' + conf.dest + '\' from \'' + conf.src + '\'');
});
}
最后， index.tmpl ，以生成逻辑在出炉：
Finally, index.tmpl, with generation logic baked in:
<doctype html>
<head>
<%
var jsFiles = grunt.config('jsFiles'),
isConcat = grunt.config('isConcat');
if(isConcat) {
print('<script type="text/javascript" src="' + grunt.config('concat.dist.dest') + '"></script>\n');
} else {
for(var i = 0, len = jsFiles.length; i < len; i++) {
print('<script type="text/javascript" src="' + jsFiles[i] + '"></script>\n');
}
}
%>
</head>
<html>
</html>
UPD。发现，约曼的，这是基于呼噜声，有一个内置的 usemin 任务，与约曼的构建系统集成。它产生的index.html从信息的index.html的开发版以及其他的环境设置的量产版。复杂的，但有趣的有点多关注一下。
UPD. Found out that Yeoman, which is based on grunt, has a built-in usemin task that integrates with Yeoman's build system. It generates a production version of index.html from information in development version of index.html as well as other environment settings. A bit sophisticated but interesting to look at.
这篇关于已经咕噜产生不同的设置的index.html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
