grunt compress 多个css,grunt 单独压缩多个js和css文件

一，什么是grunt，

grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：

① 压缩文件

② 合并文件

③ 简单语法检查

对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件

二，准备阶段

1，nodejs环境

因为grunt是基于nodeJs的，所以首先各位需要安装nodeJS环境

安装nodejs。

安装好之后检查

打开cmd

输入：node -v

输出：v0.10.28(这个是我的版本)

三，安装grunt

有了nodeJs环境后，我们便可以开始搞grunt了，因为我们可能在任何目录下运行打包程序，所以我们需要安装CLI官方推荐在全局安装CLI(grunt的命令行接口)

输入：npm install -g grunt-cli

这条命令将会把grunt命令植入系统路径，这样就能在任意目录运行他，原因是

每次运行grunt时，它都会使用node的require查找本地是否安装grunt，如果找到CLI便加载这个本地grunt库然后应用我们项目中的GruntFile配置，并执行任务

ps这里安装好后一般在我们的C:\Users\SOS\AppData\Roaming\npm\node_modules

会看到grunt-cli文件

四，添加package.json和Gruntfile.js文件

package.json

代码如下：{

"name": "test",

"version": "0.1.0",

"description": "test",

"license": "MIT",

"devDependencies": {

"grunt": "~0.4.1",

"grunt-contrib-jshint": "~0.6.3",

"grunt-contrib-concat": "~0.3.0",

"grunt-contrib-uglify": "~0.2.1",

"grunt-contrib-requirejs": "~0.4.1",

"grunt-contrib-copy": "~0.4.1",

"grunt-contrib-clean": "~0.5.0",

"grunt-strip": "~0.2.1"

},

"dependencies": {

"express": "3.x"

}

}

Gruntfile.js

代码如下：module.exports = function (grunt) {

// 构建任务配置

grunt.initConfig({

//读取package.json的内容，形成个json数据

pkg: grunt.file.readJSON('package.json'),

//压缩js

uglify: {

//文件头部输出信息

options: {

banner: '/*! */\n'

},

my_target: {

files: [

{

expand: true,

//相对路径

cwd: 'js/',

src: '*.js',

dest: 'dest/js/',

rename: function (dest, src) {

var folder = src.substring(0, src.lastIndexOf('/'));

var filename = src.substring(src.lastIndexOf('/'), src.length);

// var filename=src;

filename = filename.substring(0, filename.lastIndexOf('.'));

var fileresult=dest + folder + filename + '.min.js';

grunt.log.writeln("现处理文件："+src+" 处理后文件："+fileresult);

return fileresult;

//return filename + '.min.js';

}

}

]

}

},

//压缩css

cssmin: {

//文件头部输出信息

options: {

banner: '/*! */\n',

//美化代码

beautify: {

//中文ascii化，非常有用！防止中文乱码的神配置

ascii_only: true

}

},

my_target: {

files: [

{

expand: true,

//相对路径

cwd: 'css/',

src: '*.css',

dest: 'dest/css/',

rename: function (dest, src) {

var folder = src.substring(0, src.lastIndexOf('/'));

var filename = src.substring(src.lastIndexOf('/'), src.length);

// var filename=src;

filename = filename.substring(0, filename.lastIndexOf('.'));

var fileresult=dest + folder + filename + '.min.css';

grunt.log.writeln("现处理文件："+src+" 处理后文件："+fileresult);

return fileresult;

//return filename + '.min.js';

}

}

]

}

}

});

// 加载指定插件任务

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-cssmin');

// 默认执行的任务

grunt.registerTask('default', ['uglify', 'cssmin']);

};

这个里面主要对 js 和 css 进行批量压缩

会依赖 grunt-contrib-uglify 和 grunt-contrib-cssmin 这两个插件

做好后，我们需要在我们的项目的根目录下运行命令

输入： npm install

会将相关的文件下载下来

这个时候我们的根目录下就会多个文件名字叫 node_modules

这一步我们就可以压缩

进入根目录输入命令 grunt 回车就 ok

这个时候如果输出有报错可能说：“ grunt-contrib-cssmin”notfound

那我们要把 grunt-contrib-cssmin 插件下载下来

输入命令： npm install grunt-contrib-cssmin

OK

这个时候如果输出有报错可能说： Fatal error :Unable to find local grunt

或者找不到 grunt 的错误

那我们可以重新安装 grunt

把 C:\Users\SOS\AppData\Roaming\npm\node_modules 下面的 grunt-cli 文件删除。。重新执行

npm install -g grunt-cli

那么最后我们就只用输入 grunt 回车

看到输出的内容就知道 OK 不 OK 了

运行 OK 后，我们的目录里面多了一个文件 dest 里面的有 css 和 js 文件都是多个文件单独的压缩

这就省了我们手动去逐一压缩的苦恼了。

对于 grunt 是如何工作的深入理解就可以看 grunt 官网了