如何配置 Grunt 以通过其缩小版本替换 Bower 依赖项 [英] How to configure Grunt to replace Bower dependencies by its minified versions

问题描述

我是 Yeoman/Grunt/Bower 的新手.我有一个 bower.json 文件，它定义了以下依赖项:

I am new to Yeoman/Grunt/Bower. I have a bower.json file that defines the following dependencies:

bower.json

{
    "dependencies": {
        "angular": "~1.0.7",
        "jquery": "~1.8.0",
        "bootstrap": "~2.3.2",
        "angular-grid": "~2.0.5"
    }
}

在我的 html 文件中，我使用了这些库的非缩小版本，我通过命令 bower install

In my html file I am using the non-minified versions of those libraries, which I installed via the command 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，所以它会:

How can I configure grunt, so it will:

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

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

What is the right approach here? Do I have to define each lib in a grunt copy task? Like:

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 模块一起提供.缩小和连接不是包管理器负责的事情，而是您的构建管道.

Minified versions of the JavaScript libraries you're using will eventually not be shipped with Bower modules. Minifying and concatenating is not something the package manager is responsible for, but your build pipeline.

使用 Yeoman，推荐的方式是使用 grunt-usemin，它将处理所有必要的步骤.在使用 yo webapp 搭建新应用程序并查看生成的 Gruntfile.js 和 index.html 时，您可以看到这样的示例>.

With Yeoman, the recommended way is to use grunt-usemin, which will take care of all the necessary steps. You can see an example of this when scaffolding out a new app with yo webapp and taking a look at the generated Gruntfile.js and index.html.

在您的情况下，您需要在脚本周围添加注释，包括:

In your case, you would need to add a comment around your script includes:

<!-- 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 任务:

And make sure to have the corresponding usemin tasks in your Grunt pipeline:

useminPrepare: {
    options: {
        dest: 'dist'
    },
    html: 'app/index.html'
},
usemin: {
    options: {
        dirs: ['dist']
    },
    html: ['dist/{,*/}*.html'],
    css: ['dist/styles/{,*/}*.css']
},

这篇关于如何配置 Grunt 以通过其缩小版本替换 Bower 依赖项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！