我是新来的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,所以它会:
>仅将这些js文件的缩小版本复制到构建目录
>替换HTML,以便它将更改。 jquery.js到jquery.min.js
>不使用CDN时 – 是否建议将所有文件与自定义应用程序脚本结合在一起?
这里有什么正确的方法?我必须在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模块一起提供。缩小和连接不是包管理器负责,而是您的构建管道。
原文链接:https://www.f2er.com/angularjs/145646.html有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'] },