如何配置Grunt以通过其缩小版本替换Bower依赖项

Question

我是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,它将:

1. 仅将这些js文件的缩小版本复制到构建目录
2. 替换HTML所以它会如变更jquery.js至jquery.min.js
3. 不使用CDN时 - 是否建议将所有文件与自定义应用程序脚本组合在一起？

这里的正确方法是什么？我是否必须在grunt复制任务中定义每个lib？喜欢:

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'
      ]
    }]
  }
}

Answer 1

您正在使用的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']
},