如何配置Grunt以将Bower依赖项替换为其小型化版本

Question

我是约曼/格伦特/鲍尔的新手。我有一个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时，是否建议将所有文件与自定义应用程序脚本结合在一起？

这里的正确方法是什么？我是否必须在一个普通复制任务中定义每个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模块一起提供。缩小和连接不是包管理器负责的事情，而是您的构建管道。

对于约曼，推荐的方法是使用咕噜咕噜，它将处理所有必要的步骤。当脚手架使用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']
},

Answer 2

不需要更改html，请尝试格罗特-接触-丑陋

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

如果文件被请求更多的一个页面，它将被浏览器缓存，它的加载速度将比合并的更大的文件快。

Answer 3

如果您对使用小型化的javascript感兴趣，并且在包含路径中也有包版本，那么另一个选项是使用咕噜-版本-拷贝-保龄球-组件。这个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>文件中列出的文件包括/来源于bower组件。指定useComponentMin将导致它选择组件的小型化版本。