如何使用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 cssmingrunt-csscssmin但无济于事。 无法让我的头在如何使用它们!

我的目录结构如下(是典型的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'); }; 

所以只是总结我需要两个问题的帮助:

  1. 如何将文件夹/public/css/下的所有css文件连接并缩小为一个文件,例如main.min.css
  2. 为什么grunt.js会在每次运行grunt命令时, concat.min.js/public/js/下覆盖连接和缩小的javascript文件concat.jsconcat.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:

https://stackoverflow.com/a/33481683/1897196