如何使用Grunt.js（0.3.x）连接和缩小多个CSS和JavaScript文件 [英] How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)
问题描述
注意：此问题仅与Grunt 0.3.x相关，并留作参考。有关最新Grunt 1.x版本的帮助，请参阅此问题下方的注释。
我目前正在尝试使用Grunt.js来设置自动构建过程，首先连接，然后缩小CSS和JavaScript文件。
我已经能够成功连接和缩小我的JavaScript文件，虽然每次我运行grunt
至于缩小或者甚至连接CSS，我已经无法做到这一点了！
在grunt CSS模块方面，我尝试使用 consolidationate-css ， grunt-css & cssmin 但无效。
我的目录结构如下（是一个典型的node.js应用程序）：
- app.js
- grunt.js
- /public/index.html
-
- / public / css / [various css files]
- / public / js / [各种JavaScript文件]
这里是我的grunt.js文件当前在我的应用程序的根文件夹中：
module.exports = function（grunt）{
//项目配置。
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：{
选项：{
curly：true，
eqeqeq：true，
immed：true，
latedef：true，
newcap：true，
noarg： true，
sub：true，
undef：true，
boss：true，
eqnull：true，
node：true
}，
全局变量：{
exports：true，
module：false
}
}，
uglify：{}
}
//默认任务。
grunt.registerTask（'default'，'concat min'）;
};
因此，只要总结，我需要帮助两个问题：
- 如何将文件夹
/ public / css /下的所有css文件连接并缩小到一个文件中，例如main.min.css - 为什么grunt.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.js Skeleton 以帮助设置 Grunt的构建过程
从 Grunt 0.4.x 移至 Grunt 1.x 不应引入许多重大更改。 p>
concat.js包含在 concat 任务的源文件 public / js / *。js 。您可以有一个任务，在再次连接之前删除 concat.js （如果文件存在），传递一个数组以明确定义要连接的文件及其顺序，或者更改项目的结构。
如果是后者，你可以把所有的源码放在 ./ src c $ c> ./ 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'
}
}，
您的分钟任务
分钟：{
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 '
}
}
请注意，分钟。
将您的预设变更为
grunt.registerTask（'default'，'concat min cssmin'）;
现在，运行 grunt
dest
├──css
│├──concat.css
│└──concat.min.css
└──js
├──concat.js
└──concat.min.js
Note: This question is only relevant for Grunt 0.3.x and has been left for reference. For help with the latest Grunt 1.x release please see my comment below this question.
I'm currently trying to use Grunt.js to setup an automatic build process for first concatenating and then minifying CSS and JavaScript files.
I have been able to successfully concatenate and minify my JavaScript files, although each time I run grunt it seems to just append to the file instead of overwriting them.
As for the minifying or even concatenating CSS, I have been unable to do this as of yet!
In terms of grunt CSS modules I have tried using consolidate-css, grunt-css & cssmin but to no avail. Could not get my head around how to use them!
My directory structure is as follows (being a typical node.js application):
- app.js
- grunt.js
- /public/index.html
- /public/css/[various css files]
- /public/js/[various javascript files]
Here is what my grunt.js file currently looks like in the root folder of my application:
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');
};
So just to summarise I need help with two questions:
- How to concatenate and minify all my css files under the folder
/public/css/into one file, saymain.min.css - Why does grunt.js keep on appending to the concatenated and minified javascript files
concat.jsandconcat.min.jsunder/public/js/instead of overwriting them each time the commandgruntis run?
Updated 5th of July 2016 - Upgrading from Grunt 0.3.x to Grunt 0.4.x or 1.x
Grunt.js has moved to a new structure in Grunt 0.4.x (the file is now called Gruntfile.js). Please see my open source project Grunt.js Skeleton for help with setting up a build process for Grunt 1.x.
Moving from Grunt 0.4.x to Grunt 1.x should not introduce many major changes.
concat.js is being included in the concat task's source files public/js/*.js. You could have a task that removes concat.js (if the file exists) before concatenating again, pass an array to explicitly define which files you want to concatenate and their order, or change the structure of your project.
If doing the latter, you could put all your sources under ./src and your built files under ./dest
src
├── css
│ ├── 1.css
│ ├── 2.css
│ └── 3.css
└── js
├── 1.js
├── 2.js
└── 3.js
Then set up your concat task
concat: {
js: {
src: 'src/js/*.js',
dest: 'dest/js/concat.js'
},
css: {
src: 'src/css/*.css',
dest: 'dest/css/concat.css'
}
},
Your min task
min: {
js: {
src: 'dest/js/concat.js',
dest: 'dest/js/concat.min.js'
}
},
The build-in min task uses UglifyJS, so you need a replacement. I found grunt-css to be pretty good. After installing it, load it into your grunt file
grunt.loadNpmTasks('grunt-css');
And then set it up
cssmin: {
css:{
src: 'dest/css/concat.css',
dest: 'dest/css/concat.min.css'
}
}
Notice that the usage is similar to the built-in min.
Change your default task to
grunt.registerTask('default', 'concat min cssmin');
Now, running grunt will produce the results you want.
dest
├── css
│ ├── concat.css
│ └── concat.min.css
└── js
├── concat.js
└── concat.min.js
这篇关于如何使用Grunt.js（0.3.x）连接和缩小多个CSS和JavaScript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
