我是新来的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模块一起提供。缩小和连接不是包管理器负责,而是您的构建管道。
有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'] },
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。