如何用Grunt.js (0.3.x)连接和缩小多个CSS和JavaScript文件
注意:这个问题只与Grunt 0.3.x相关，并留作参考。有关最新的Grunt 1.x版本的帮助，请参阅我在这个问题下面的评论。
我目前正在尝试使用Grunt.js来设置一个自动构建过程，首先连接CSS和JavaScript文件，然后将其缩小。
我已经能够成功地连接和缩小我的JavaScript文件，尽管每次我运行grunt时，它似乎只是附加到文件中，而不是覆盖它们。
至于缩小甚至拼接CSS，我目前还无法做到这一点！
关于CSS模块，我尝试过使用consolidate-css，grunt-css和cssmin，但都没有效果。我想不通如何使用它们！
我的目录结构如下(作为一个典型的node.js应用程序)：
- app.js
- grunt.js
- /public/index.html
- /public/css/various css files
- /public/js/various 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文件连接和缩小为一个文件，例如
/public/css/grunt.js是否继续附加到/public/js/下连接和缩小的javascript文件concat.js和concat.min.js，而不是在每次运行命令grunt时覆盖它们？
更新于2016年7月5日-从Grunt 0.3.x升级到Grunt 0.4.x或1.x
Grunt.js已移至Grunt 0.4.x中的新结构(该文件现在名为Gruntfile.js)。有关为Grunt 1.x设置构建过程的帮助，请参阅我的开放源码项目Grunt.js Skeleton。
从Grunt 0.4.x迁移到Grunt 1.x should not introduce many major changes。
回答 5
Stack Overflow用户
发布于 2012-12-07 01:33:03
concat.js包含在concat任务的源文件public/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'
}
},内置的min任务使用UglifyJS，因此您需要一个替代品。我发现grunt-css相当不错。安装后，将其加载到grunt文件中
grunt.loadNpmTasks('grunt-css');然后把它设置好
cssmin: {
css:{
src: 'dest/css/concat.css',
dest: 'dest/css/concat.min.css'
}
}请注意，它的用法类似于内置的min。
将default任务更改为
grunt.registerTask('default', 'concat min cssmin');现在，运行grunt将产生您想要的结果。
dest
├── css
│ ├── concat.css
│ └── concat.min.css
└── js
├── concat.js
└── concat.min.jsStack Overflow用户
发布于 2014-11-28 08:56:24
我想在这里提到一种非常非常有趣的技术，它被用于大型项目中，如jQuery和Modernizr，用于连接事物。
这两个项目都是完全使用requirejs模块开发的(你可以在他们的github repos中看到这一点)，然后他们使用requirejs优化器作为一个非常智能的链接器。有趣的是，正如你所看到的，无论是jQuery还是Modernizr都不需要requirejs才能工作，这是因为它们删除了requirejs的语法仪式，以便在他们的代码中去掉requirejs。因此，他们最终得到了一个独立的库，这个库是用requirejs模块开发的！多亏了这一点，他们能够执行他们的库的切割构建，以及其他优势。
对于所有对使用requirejs优化器进行串联感兴趣的人，请查看this post
此外，还有一个小工具可以抽象出流程的所有样板：AlbanilJS
Stack Overflow用户
发布于 2012-12-12 05:08:06
我同意上面的答案。但这是另一种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;
});
});
}; https://stackoverflow.com/questions/13713273
复制相似问题