如何配置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复制任务中定义每个库？像:

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

- fischermatte

Answer 1

未来，Bower模块将不再附带所使用的JavaScript库的缩小版。缩小和连接并不是包管理器的职责，而是你的构建流程。

对于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']
},

- passy

---

缩小构件的责任应由维护者承担。你必须了解构件的代码库，以使用正确的缩小选项。 - Guillaume Massé

@GuillaumeMassé，众所周知Prototype做了一些糟糕的事情。不要让这拖累其他部分。 - Sindre Sorhus

@sindre-sorhus 如果我开发了一个工件并发布它，发布经过压缩的版本并避免其他开发人员构建整个工件只是更有效率的做法。 - Guillaume Massé

声称缩小第三方构件是用户的责任不仅奇怪，而且会与许多企业实践相冲突，甚至写下来都让我感到害怕。你不应该这样做。如果发生问题，责任争执就会非常复杂。 - ZenMaster

来自Angular团队的@SindreSorhus，最佳实践。他们特别推荐使用他们的压缩文件，因为他们已经调整了恰到好处的设置。 - Jacob Eggers

Answer 2

不需要更改HTML，尝试使用grunt-contrib-uglify。

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

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

- yao tony

---

你是在哪里找到这些参数的含义的？我正在寻找一些解释expand和cwd的文档。谢谢。 - Chris Bier

找到了一个例子，但没有关于每个选项的文档：https://github.com/gruntjs/grunt-contrib-uglify#compiling-all-files-in-a-folder-dynamically - Chris Bier

只要试一下，就会清楚了。 cwd：目标文件夹 expand：编译文件夹中的所有文件 - yao tony

Answer 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 中指定的路径。在 filesReferencingComponents->files 中列出的文件是包含/来源于 bower 组件的文件。指定 useComponentMin 将导致它选择组件的缩小版本。

- HypeXR

Answer 4

将已经存在于缩小版本中的库再次进行缩小是一种不好的做法。 幸运的是，至少对于angularJS来说，bower包含angular.min.js.map文件。有了这个源映射，我认为在任何时候都没有必要在源代码中包含非缩小文件。只需包含缩小文件，将其留在Grunt缩小器之外，并让浏览器映射到非缩小源。

- Romain F.