使用grunt自动将本地*.js和*.css文件引用到index.html中
Luc*_*ean 5 html javascript angularjs gruntjs grunt-includes
我打算开发一个angularJS客户端,我将使用角度组件.这将导致多个.js / .css文件.为了避免手动引用每个新添加的js/css文件,我打算使用grunt-include-source任务.
问题是,在配置Gruntfile.js后,"grunt includeSource"任务运行,返回"Done,without errors."状态,但在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'
}
}
}
}
});
};
谁能指出我做错了什么？谢谢.
小智 0
我们不需要在 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" -->
| 归档时间： |
|
| 查看次数： |
551 次 |
| 最近记录： |