Concat凉亭组件与咕噜声
我正在构build一个需要很less前端lib /框架的应用程序，例如：
- 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
问题：
随着我所有的研究，我弄清楚如何连接目录中的所有文件。 我的目标是获取凉亭组件，并将它们连接起来，而不必一一列出在grunt文件中。 我如何能够实现这一点？
也有可能做一个自定义的jQuery UI只与我想要的模块，而不是整个用户界面。
谢谢。
“我的目标是获取凉亭组件，并将它们连接起来，而不必一一列出在grunt文件中”
您可以从您的依赖关系目录和子目录中获取所有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' }] })
…但是，这当然不是防弹 – 一个给定的组件可能有一个build设版本，并分裂源。
恕我直言，唯一的理智的出路是明确列出你想要汇总的文件，按照你需要的顺序（就像你现在的HTML一样）。
usemin是你的朋友在这里。
安装usemin，copy，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文件中设置一个构build块：
<!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>