如何使用Grunt.js（0.3.x）连接和缩小多个CSS和JavaScript文件
注意：这个问题只与Grunt 0.3.x有关，并且已经被留作参考。 有关最新的Grunt 1.x版本的帮助，请参阅下面的问题。
我目前正在尝试使用Grunt.js设置一个自动构build过程，首先连接，然后缩小CSS和JavaScript文件。
我已经能够成功连接和缩小我的JavaScript文件，虽然每次运行grunt时似乎只是附加到文件而不是覆盖它们。
至于CSS的缩小甚至连接，我至今还无法做到这一点！
就grunt CSS模块而言，我尝试过使用consolidate-css cssmin ， grunt-css和cssmin但无济于事。 无法让我的头在如何使用它们！
我的目录结构如下（是典型的node.js应用程序）：
- app.js
- grunt.js
- /public/index.html
- / public / css / [各种css文件]
- / public / js / [各种javascript文件]
这是我的grunt.js文件目前在我的应用程序的根文件夹中的样子：
module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: '<json:package.json>', concat: { dist: { src: 'public/js/*.js', dest: 'public/js/concat.js' } }, min: { dist: { src: 'public/js/concat.js', dest: 'public/js/concat.min.js' } }, jshint: { options: { curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true, sub: true, undef: true, boss: true, eqnull: true, node: true }, globals: { exports: true, module: false } }, uglify: {} }); // Default task. grunt.registerTask('default', 'concat min'); };
所以只是总结我需要两个问题的帮助：
- 如何将文件夹
/public/css/下的所有css文件连接并缩小为一个文件，例如main.min.css - 为什么grunt.js会在每次运行
grunt命令时，concat.min.js在/public/js/下覆盖连接和缩小的javascript文件concat.js和concat.min.js，而不是覆盖它们？
2016年7月5日更新 – 从Grunt 0.3.x升级到Grunt 0.4.x或1.x
Grunt.js已经转移到Grunt 0.4.x的新结构（该文件现在称为Gruntfile.js ）。 请参阅我的开源项目Grunt.js Skeleton ，以获取有关为Grunt 1.x设置构build过程的帮助。
从Grunt 0.4.x转到Grunt 1.x 不应该引入很多重大变化 。
concat.js被包含在concat任务的源文件public/js/*.js 。js中。 您可以有一个任务，在再次连接之前删除concat.js （如果该文件存在），传递一个数组来明确定义要连接的文件及其顺序，或者更改项目的结构。
如果做后者，你可以把所有的源代码放在./src下，并把你的内置文件放在./dest
src ├── css │ ├── 1.css │ ├── 2.css │ └── 3.css └── js ├── 1.js ├── 2.js └── 3.js
然后设置你的concat任务
concat: { js: { src: 'src/js/*.js', dest: 'dest/js/concat.js' }, css: { src: 'src/css/*.css', dest: 'dest/css/concat.css' } },
你最小的任务
min: { js: { src: 'dest/js/concat.js', dest: 'dest/js/concat.min.js' } },
内置最小任务使用UglifyJS，所以你需要一个replace。 我发现grunt-css非常好。 安装完成后，将其加载到你的grunt文件中
grunt.loadNpmTasks('grunt-css');
然后设置它
cssmin: { css:{ src: 'dest/css/concat.css', dest: 'dest/css/concat.min.css' } }
请注意，使用情况类似于内置最小值。
将您的default任务更改为
grunt.registerTask('default', 'concat min cssmin');
现在，运行grunt会产生你想要的结果。
dest ├── css │ ├── concat.css │ └── concat.min.css └── js ├── concat.js └── concat.min.js
我想在这里提到一个非常非常有趣的技术，在jQuery和Modernizr等巨大项目中用于连接事物。
这两个项目都完全用requirejs模块开发（你可以在他们的github仓库中看到），然后他们使用requirejs优化器作为一个非常聪明的连接器。 有趣的是，正如你所看到的，Modernizr和Modernizr都不需要requirejs来工作，而这种情况的发生是因为他们为了摆脱requirejs代码而擦除了requirejs合成器的仪式。 所以他们最终得到了一个独立的库，它是用requirejs模块开发的！ 由于这个原因，他们可以执行其他库优点，而且还可以执行其库的构build。
对于所有对requirejs优化器感兴趣的人来说，看看这篇文章
另外还有一个小工具可以抽象出所有的stream程样板： AlbanilJS
我同意上面的答案。 但是这是CSS压缩的另一种方式。
你可以使用YUI压缩器来连接你的CSS：
module.exports = function(grunt) { var exec = require('child_process').exec; grunt.registerTask('cssmin', function() { var cmd = 'java -jar -Xss2048k ' + __dirname + '/../yuicompressor-2.4.7.jar --type css ' + grunt.template.process('/css/style.css') + ' -o ' + grunt.template.process('/css/style.min.css') exec(cmd, function(err, stdout, stderr) { if(err) throw err; }); }); };
你不需要添加concat包，你可以像这样通过cssmin来完成：
cssmin : { options: { keepSpecialComments: 0 }, minify : { expand : true, cwd : '/library/css', src : ['*.css', '!*.min.css'], dest : '/library/css', ext : '.min.css' }, combine : { files: { '/library/css/app.combined.min.css': ['/library/css/main.min.css', '/library/css/font-awesome.min.css'] } } }
对于js，使用uglify像这样：
uglify: { my_target: { files: { '/library/js/app.combined.min.js' : ['/app.js', '/controllers/*.js'] } } }
我认为可能是更自动的，咕task任务usemin小心为你做这一切的工作，只需要一些configuration：
