我是 Yeoman/Grunt/Bower 的新手。我有一个 bower.json
定义以下依赖项的文件:
bower.json
{
"dependencies": {
"angular": "~1.0.7",
"jquery": "~1.8.0",
"bootstrap": "~2.3.2",
"angular-grid": "~2.0.5"
}
}
在我的 html 文件中,我使用了这些库的非缩小版本,我通过命令
bower install
安装了这些库。index.html
<script src="components/jquery/jquery.js"></script>
<script src="components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-grid/build/ng-grid.js"></script>
如何配置 grunt,它将:
jquery.js
至jquery.min.js
这里的正确方法是什么?我是否必须在 grunt 复制任务中定义每个库?像:
Gruntfile.js:
copy: {
dist: {
files: [{
src: [
'components/jquery/jquery.min.js',
'components/bootstrap/docs/assets/js/bootstrap.min.js',
'components/angular/angular.min.js',
'components/angular-grid/build/ng-grid.min.js'
]
}]
}
}
最佳答案
您正在使用的 JavaScript 库的缩小版本最终不会随 Bower 模块一起提供。缩小和连接不是包管理器负责的事情,而是您的构建管道。
与 Yeoman ,推荐的方式是使用grunt-usemin ,它将处理所有必要的步骤。在使用 yo webapp
搭建新应用程序时,您可以看到这样的示例。并查看生成的 Gruntfile.js
和 index.html
.
在您的情况下,您需要在脚本周围添加注释,包括:
<!-- build:js scripts/main.js -->
<script src="components/jquery/jquery.js"></script>
<script src="components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-grid/build/ng-grid.js"></script>
<!-- endbuild -->
并确保在您的 Grunt 管道中有相应的 usemin 任务:
useminPrepare: {
options: {
dest: 'dist'
},
html: 'app/index.html'
},
usemin: {
options: {
dirs: ['dist']
},
html: ['dist/{,*/}*.html'],
css: ['dist/styles/{,*/}*.css']
},
关于angularjs - 如何配置 Grunt 以通过缩小版本替换 Bower 依赖项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16761272/