在示例Angular应用中angular-app，在GitHub上，index.html文件包含以下行
<script type="text/javascript" src="/static/<%= grunt.config.get('pkg.name') %>.js"></script>
当我尝试在Web服务器中运行项目时，此行出现问题，无法显示任何内容。
显然，我必须先与Grunt一起构建项目，然后才能进行这项工作。但是在我或任何未来的读者有机会深入学习Grunt之前，有人可以解释一下Grunt文件如何将这行变成需要的内容吗？
编辑
根据@JBNizet的评论，这是HTML代码和Grunjs代码：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet" type="text/css" href="/static/<%= grunt.config.get('pkg.name') %>.css"/>
<script type="text/javascript" src="/static/jquery.js"></script>
<script type="text/javascript" src="/static/angular.js"></script>
<script type="text/javascript" src="/static/mongolab.js"></script>
<script type="text/javascript" src="/static/bootstrap.js"></script>
<script type="text/javascript" src="/static/<%= grunt.config.get('pkg.name') %>.js"></script>
</head>
<body ng-controller="AppCtrl">
<div ng-include="'header.tpl.html'"></div>
<div ng-include="'notifications.tpl.html'" class="container-fluid" ng-show="notifications.getCurrent().length"></div>
<div ng-view class="container-fluid"></div>
</body>
</html>
和Grunt文件：
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-html2js');
// Default task.
grunt.registerTask('default', ['jshint','build','karma:unit']);
grunt.registerTask('build', ['clean','html2js','concat','recess:build','copy:assets']);
grunt.registerTask('release', ['clean','html2js','uglify','jshint','karma:unit','concat:index', 'recess:min','copy:assets']);
grunt.registerTask('test-watch', ['karma:watch']);
// Print a timestamp (useful for when watching)
grunt.registerTask('timestamp', function() {
grunt.log.subhead(Date());
});
var karmaConfig = function(configFile, customOptions) {
var options = { configFile: configFile, keepalive: true };
var travisOptions = process.env.TRAVIS && { browsers: ['Firefox'], reporters: 'dots' };
return grunt.util._.extend(options, customOptions, travisOptions);
};
// Project configuration.
grunt.initConfig({
distdir: 'dist',
pkg: grunt.file.readJSON('package.json'),
banner:
'/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n' +
'<%= pkg.homepage ? " * " + pkg.homepage + "\\n" : "" %>' +
' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author %>;\n' +
' * Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %>\n */\n',
src: {
js: ['src/**/*.js'],
jsTpl: ['<%= distdir %>/templates/**/*.js'],
specs: ['test/**/*.spec.js'],
scenarios: ['test/**/*.scenario.js'],
html: ['src/index.html'],
tpl: {
app: ['src/app/**/*.tpl.html'],
common: ['src/common/**/*.tpl.html']
},
less: ['src/less/stylesheet.less'], // recess:build doesn't accept ** in its file patterns
lessWatch: ['src/less/**/*.less']
},
clean: ['<%= distdir %>/*'],
copy: {
assets: {
files: [{ dest: '<%= distdir %>', src : '**', expand: true, cwd: 'src/assets/' }]
}
},
karma: {
unit: { options: karmaConfig('test/config/unit.js') },
watch: { options: karmaConfig('test/config/unit.js', { singleRun:false, autoWatch: true}) }
},
html2js: {
app: {
options: {
base: 'src/app'
},
src: ['<%= src.tpl.app %>'],
dest: '<%= distdir %>/templates/app.js',
module: 'templates.app'
},
common: {
options: {
base: 'src/common'
},
src: ['<%= src.tpl.common %>'],
dest: '<%= distdir %>/templates/common.js',
module: 'templates.common'
}
},
concat:{
dist:{
options: {
banner: "<%= banner %>"
},
src:['<%= src.js %>', '<%= src.jsTpl %>'],
dest:'<%= distdir %>/<%= pkg.name %>.js'
},
index: {
src: ['src/index.html'],
dest: '<%= distdir %>/index.html',
options: {
process: true
}
},
angular: {
src:['vendor/angular/angular.js', 'vendor/angular/angular-route.js'],
dest: '<%= distdir %>/angular.js'
},
mongo: {
src:['vendor/mongolab/*.js'],
dest: '<%= distdir %>/mongolab.js'
},
bootstrap: {
src:['vendor/angular-ui/bootstrap/*.js'],
dest: '<%= distdir %>/bootstrap.js'
},
jquery: {
src:['vendor/jquery/*.js'],
dest: '<%= distdir %>/jquery.js'
}
},
uglify: {
dist:{
options: {
banner: "<%= banner %>"
},
src:['<%= src.js %>' ,'<%= src.jsTpl %>'],
dest:'<%= distdir %>/<%= pkg.name %>.js'
},
angular: {
src:['<%= concat.angular.src %>'],
dest: '<%= distdir %>/angular.js'
},
mongo: {
src:['vendor/mongolab/*.js'],
dest: '<%= distdir %>/mongolab.js'
},
bootstrap: {
src:['vendor/angular-ui/bootstrap/*.js'],
dest: '<%= distdir %>/bootstrap.js'
},
jquery: {
src:['vendor/jquery/*.js'],
dest: '<%= distdir %>/jquery.js'
}
},
recess: {
build: {
files: {
'<%= distdir %>/<%= pkg.name %>.css':
['<%= src.less %>'] },
options: {
compile: true
}
},
min: {
files: {
'<%= distdir %>/<%= pkg.name %>.css': ['<%= src.less %>']
},
options: {
compress: true
}
}
},
watch:{
all: {
files:['<%= src.js %>', '<%= src.specs %>', '<%= src.lessWatch %>', '<%= src.tpl.app %>', '<%= src.tpl.common %>', '<%= src.html %>'],
tasks:['default','timestamp']
},
build: {
files:['<%= src.js %>', '<%= src.specs %>', '<%= src.lessWatch %>', '<%= src.tpl.app %>', '<%= src.tpl.common %>', '<%= src.html %>'],
tasks:['build','timestamp']
}
},
jshint:{
files:['gruntFile.js', '<%= src.js %>', '<%= src.jsTpl %>', '<%= src.specs %>', '<%= src.scenarios %>'],
options:{
curly:true,
eqeqeq:true,
immed:true,
latedef:true,
newcap:true,
noarg:true,
sub:true,
boss:true,
eqnull:true,
globals:{}
}
}
});
};
索引文件是由grunt任务解析的，可能是grunt build，并且该<%= grunt.config.get('pkg.name') %>部分已替换为包的名称。
grunt.config.get('pkg.name') 只是JavaScript。
更改它以console.log(grunt.config.get('pkg.name'))查看会发生什么。
具体来说，concat完成模板或在中找到的内容是由grunt任务完成的client/src/index.html，然后将其放置在client / dist / index.html`中。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句