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

【问题标题】：How to configure Grunt to replace Bower dependencies by its minified versions如何配置 Grunt 以通过缩小版本替换 Bower 依赖项
【发布时间】：2013-05-21 14:34:55
【问题描述】：

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

【问题讨论】：

标签： angularjs gruntjs yeoman bower

【解决方案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']
},

【讨论】：

@sindre-sorhus 缩小工件应该是维护者的责任。您必须了解工件代码库才能使用正确的缩小选项。
@GuillaumeMassé 不，不是。构建工件是维护者的责任，而不是缩小它们。我还没有看到无法通过 uglify 运行的已构建项目。不过，我很乐意以其他方式展示。
@GuillaumeMassé 众所周知，Prototype 做了一些糟糕的事情。不要让它拖累其余部分。
@sindre-sorhus 如果我开发了一个工件并发布了一个版本，那么发布缩小版并节省其他开发人员构建整个东西的效率会更高。
声称缩小 3rd 方的 atrifacts 是用户的责任不仅奇怪，而且会与如此多的公司实践相冲突，我什至写下来都吓坏了。你不应该那样做。如果有什么事情发生了，那纯粹的责备战争......

【解决方案2】：

不用改html，试试grunt-contrib-uglify

uglify: {
  libs: {
    files: [
      {
        expand: true,
        cwd: 'components',
        src: '**/*.js',
        dest: 'build/components'
      }
    ]
  }
}

如果文件被请求超过一页，它会被浏览器缓存，它的加载速度会比合并后的大文件更快。

【讨论】：

您从哪里得知这些参数的含义？我正在寻找一些解释expand 和cwd 的文档。谢谢
找到了一个例子，但没有关于每个选项的文档：github.com/gruntjs/…
试一试就清楚了 cwd: 目标文件夹展开: 编译文件夹中的所有文件

【解决方案3】：

如果您有兴趣使用缩小的 javascript 并且在包含路径中包含包版本，另一个选择是使用 grunt-version-copy-bower-components。这个 grunt 插件处理将 bower 组件复制到目标目录，在组件路径中包含组件版本，并修改引用文件（html 和 css）以使用版本化缩小路径。

如果站点使用缓存（位于 CDN 后面）托管，则在组件路径中包含版本会很有帮助。它允许您为 bower 组件指定较长的缓存时间。当切换到新的 bower 组件版本时，URL 将是新的，并且缓存将获取新的而不是提供过时的组件。

一个示例配置：

versionCopyBowerComponents: {
  options: {
    exclude: ['underscore'],
    dest: 'dist/libs',
    filesReferencingComponents: {
      files: ['dist/test.html', 'dist/test.css'],
      useComponentMin: true
    }
  }
}

该插件将确定您的项目正在使用的 bower 组件，并自动将它们安装到 dest 中指定的路径。 filesReferenceComponents->files 中列出的文件是包含/来源 bower 组件的文件。指定 useComponentMin 将导致它选择组件的缩小版本。

【讨论】：

【解决方案4】：

将自己缩小为已存在于缩小版本中的库是一种不好的做法。幸运的是，至少对于 angularJS，bower 包中包含 angular.min.js.map 文件。使用此源映射，我认为在源中的任何时候都包含非缩小文件是没有意义的。只需包含 min 文件，将其放在 Grunt minifier 之外，然后让浏览器映射到未缩小的源。

【讨论】：