30

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

鲍尔.json 

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

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

索引.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'
      ]
    }]
  }
}
4

4 回答 4

35

您使用的 JavaScript 库的缩小版本最终不会随 Bower 模块一起提供。缩小和连接不是包管理器负责的事情，而是您的构建管道。

对于Yeoman，推荐的方法是使用grunt-usemin，它将处理所有必要的步骤。yo webapp当使用脚手架搭建一个新应用程序并查看生成的Gruntfile.jsand时，您可以看到一个示例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']
},
于 2013-05-26T17:53:33.563 回答
2

不需要更改 html，试试grunt-contrib-uglify

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

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

于 2013-05-26T17:20:39.497 回答
0

如果您有兴趣使用缩小的 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 将导致它选择组件的缩小版本。

于 2014-09-02T17:22:28.200 回答
0

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

于 2015-02-17T21:16:03.527 回答