我打算开发一个 angularJS 客户端，我将在其中使用 Angular 组件。这将导致多个 .js/.css 文件。 为了避免手动引用每个新添加的 js/css 文件，我打算使用 grunt-include-source 任务。
问题是，在配置 Gruntfile.js 之后，“grunt includeSource”任务运行，返回“完成，没有错误”。状态，但没有在 index.html 文件中进行更新。
我的项目结构如附图所示(我使用WebStorm作为IDE)。
我的 index.html 文件如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RavenApp</title>
<!-- include: "type": "css", "files": "*.css" -->
</head>
<body>
<!-- bower:js -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-mocks/angular-mocks.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/underscore/underscore.js"></script>
<!-- endbower -->
<!-- include: "type": "js", "files": "*.js" -->
</body>
</html>
我的 Gruntfile.js 如下:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-include-source');
grunt.initConfig({
wiredep: {
target: {
src: 'app/index.html'
}
},
includeSource: {
options: {
basePath: 'app',
templates: {
html: {
js: '<script src="{filePath}"></script>',
css: '<link rel="stylesheet" type="text/css" href="{filePath}" />'
}
},
app: {
files: {
'app/index.html': 'app/index.html'
}
}
}
}
});
};
谁能指出我做错了什么？ 谢谢。
最佳答案
我们不需要在 includeSource key 下写 templates key:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-include-source');
grunt.initConfig({
wiredep: {
target: {
src: 'app/index.html'
}
},
includeSource: {
options: {
basePath: 'app',
app: {
files: {
'app/index.html': 'app/index.html'
}
}
}
}
});
};
HTML代码包含js和css就够了:
<!-- include: "type": "css", "files": "*.css" -->
<!-- include: "type": "js", "files": "*.js" -->
关于javascript - 使用 grunt 将本地 *.js 和 *.css 文件自动引用到 index.html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39930329/