使用 grunt 将本地 *.js 和 *.css 文件自动引用到 index.html
Posted
技术标签:
【中文标题】使用 grunt 将本地 *.js 和 *.css 文件自动引用到 index.html【英文标题】：Automatic reference of local *.js and *.css files into index.html with grunt 【发布时间】：2017-02-17 05:24:46 【问题描述】：我打算开发一个 angularJS 客户端，我将在其中使用 Angular 组件。这将导致多个 .js/.css 文件。 为了避免手动引用每个新添加的 js/css 文件，我打算使用 grunt-include-source 任务。
问题是，在配置 Gruntfile.js 后，“grunt includeSource”任务运行，返回“Done，没有错误”。状态，但 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'
);
;
谁能指出我做错了什么？ 谢谢。
【问题讨论】：
将app 移动到options 之外的gruntfile.js。
确实，这就是问题所在。现在可以了，非常感谢。
【参考方案1】：
我们不需要在includeSource键下写templates键：
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" -->
【讨论】：
以上是关于使用 grunt 将本地 *.js 和 *.css 文件自动引用到 index.html的主要内容，如果未能解决你的问题，请参考以下文章