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，因此它将：

仅将这些js文件的缩小版本复制到构建目录
替换HTML以便更改，例如jquery.js至jquery.min.js
不使用CDN时 - 是否建议将所有文件与自定义应用程序脚本组合在一起？

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

使用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']
},

Answer 2

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

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

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

Answer 3

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

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

示例配置：

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

插件将确定项目正在使用的bower组件，并自动将它们安装到dest中指定的路径。 filesReferencingComponents-＆gt;文件中列出的文件是包含/来源于bower组件的文件。指定useComponentMin将使其选择组件的缩小版本。

Answer 4

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

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

4 个答案: