带有 grunt 的 Concat bower 组件
Posted
技术标签:
【中文标题】带有 grunt 的 Concat bower 组件【英文标题】：Concat bower components with grunt 【发布时间】：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。
谢谢。
【问题讨论】：
【参考方案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以上是关于带有 grunt 的 Concat bower 组件的主要内容，如果未能解决你的问题，请参考以下文章
使用 grunt、bower、node 模块部署到 heroku
Grunt、NPM 和 Bower 之间的区别（ package.json 与 bower.json ）