带有 grunt 的 Concat bower 组件答案

【问题标题】：Concat bower components with grunt带有 grunt 的 Concat bower 组件
【发布时间】：2014-02-04 13:10:22
【问题描述】：

我正在构建一个需要少量前端库/框架的应用程序，例如：

jQuery
JQueryUI
AngularJS
基础

我正在使用bower 下载组件。此时我的 HTML 看起来像：

<script src="components/jquery/jquery.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/etc/etc.js"></script>

我的目标是制作一个grunt 脚本，它会自动获取已安装的组件，连接并缩小它们并将它们输出为lib.js。

问题：

通过我所有的研究，我想出了如何连接目录中的所有文件。我的目标是获取 bower 组件并将它们连接起来，而不是在 gruntfile 中一一列出。我该如何存档？

是否可以只使用我想要的模块而不是拥有整个 UI 来构建自定义 jQuery UI。

谢谢。

【问题讨论】：

标签： node.js concatenation gruntjs minify bower

【解决方案1】：

usemin 是你的朋友。

安装 usemin、复制、concat 和 uglify：

npm install --save-dev grunt-usemin
npm install --save-dev grunt-contrib-copy
npm install --save-dev grunt-contrib-concat
npm install --save-dev grunt-contrib-uglify

在您的 HTML 文件中设置构建块：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>usemin</title>
  <!-- build:js lib.js -->
    <script src="components/jquery/jquery.js"></script>
    <script src="components/angular/angular.js"></script>
    <script src="components/etc/etc.js"></script>
  <!-- endbuild -->
</head>
<body>
<h1>usemin</h1>
</body>
</html>

设置您的 Gruntfile：

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    copy: {
      dist: {
        files: [ {src: 'index.html', dest: 'dist/index.html'} ]
      }
    },

    'useminPrepare': {
      options: {
        dest: 'dist'
      },
      html: 'index.html'
    },

    usemin: {
      html: ['dist/index.html']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-usemin');

  grunt.registerTask('default', ['useminPrepare', 'copy', 'concat', 'uglify', 'usemin']);
};

咕噜声

grunt

结果：

├── Gruntfile.js
├── components
│   ├── angular
│   │   └── angular.js
│   ├── etc
│   │   └── etc.js
│   └── jquery
│       └── jquery.js
├── dist
│   ├── index.html
│   └── lib.js
├── index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>usemin</title>
  <script src="lib.js"></script>
</head>
<body>
<h1>usemin</h1>
</body>
</html>

【讨论】：

很好的答案。我已经找了一段时间了！
@steveax 我注意到concat 和uglify 已加载/注册，但未配置。我的印象是所有任务都必须配置，所以您是否不小心忽略了它们的配置，或者是为了缩短答案，或者因为它们不是必需的？
@travelampel 它们不是必需的，useminPrepare 生成配置。阅读useminPrepare section。
@steveax - 很抱歉恢复旧的回复，但我还有一个问题。在按照您的说明/代码进行操作后，我现在是否应该更改我的 Expressjs server.js 文件中的设置，以便在推送到 Heroku 之前从 dist 文件夹中提供文件？我还用 dist 文件夹推送我的 app 文件夹吗？提前致谢。
usemin 尚未维护。还有其他解决方案吗？

【解决方案2】：

“我的目标是获取 bower 组件并将它们连接起来，而不是在 gruntfile 中一一列出”

您可以从依赖项目录和子目录中获取所有 javascript 文件，并以这种方式将它们连接起来：

grunt.config('concat.mydeps', {
  files: [{
    src: ['components/**/*.js'],
    dest: 'dist/lib.js'
  }]
})

...但是如果脚本执行的顺序很重要，这就是灾难的根源:-)。

此外，这些文件夹很可能包含缩小版和非缩小版，导致您包含一些脚本两次...

避免这种副作用的方法是：

grunt.config('concat.mydeps', {
  files: [{
    src: ['components/**/*.js', '!components/**/*min.js'],
    dest: 'dist/lib.js'
  }]
})

...但同样，这当然不是万无一失的——给定的组件很可能有一个构建版本，以及一个拆分的源代码。

恕我直言，唯一明智的出路是按照您需要的顺序明确列出您想要聚合的文件（就像您现在在 html 中所做的那样）。

【讨论】：

或者使用类似 npm module grunt-bower-concat