grunt是前端自动化构建工具，可以混淆js代码，当然也能压缩css样式，压缩图片，以及前端打包。而grunt必须依赖于node.js，对于node.js，早有耳闻，但一直没去认知了解。
一、我们要安装node.js.
去官网nodejs下载地址; 下载适合自身电脑系统的版本。这里我使用的是node-4.2.4.msi的版本。现在的版本中已经集合了npm；npm是nodejs的包管理工具，我这里粗浅的理解为java中maven管理架包一样的一种构建工具。
这里安装好之后，nodejs自带一个命令行管理工具Node.js command prompt;可以在此工具中或者cmd命令行一次输入node -v ；npm -v 查看安装的版本
二、grunt组件安装
接下来我们可以使用npm 命令来安装grunt了，grunt可以在单个项目中安装，也可以安装在全局系统中，推荐在项目中安装，这样方便grunt即时更新版。
在安装grunt前，必须使用：
npm install -g grunt-cli
-g代表全局；
注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。
接下来我们需要使用两个关键的文件package.json和Gruntfile.js.
在我们的想要用grunt实现系列功能的项目根目录下，新建package.json和Gruntfile.js
三、package.json文件配置
在package.json文件中：
{
"name": "demo",
"version": "0.1.0",
"description": "系统前端",
"author": "testdu",
"keywords": ["nodeJs","grunt"],
"license": "MIT",
"repository": {
"type": "git",
"url": "https://gitee.com/duweikang/demo.git"
},
"devDependencies": {
"grunt": "^1.0.2",
"grunt-contrib-concat ": "~1.0.1",
"grunt-contrib-cssmin": "^2.2.1",
"grunt-contrib-uglify": "^3.3.0"
},
"dependencies": {
"grunt-contrib-compress": "^1.4.3",
"grunt-contrib-concat": "^1.0.1"
}
}关于项目的名称，版本，描述等，重要的是devDependencies中列出了所需要依赖的grunt插件列表。这里使用了jshint，watch，和cssmin3个插件。
四、Gruntfile.js文件配置
Gruntfile.js是刚才package.json的所列grunt插件的配置：
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//合并
concat: {
tasknameconcat: {
files:{
'js/main.js':['js/jquery-3.3.1.min.js','js/common.js']
}
}
},
//加密
uglify: {
tasknameuglify: {
files:{
'js/main.min.js':['js/main.js']
}
}
},
//ccs合并压缩
cssmin:{
tasknamecssmin:{
files:{
'css/main.min.css':['css/common.css','css/normal.css','css/font-awesome.min.css']
}
}
},
//compress打包
compress: {
main: {
options: {
archive: 'dist/demo.zip'
},
files: [{
src: [
'css/main.min.css',
'fonts/**',
'img/**',
'js/main.min.js',
'index.html'
],
dest: 'demo/'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-compress');
//注册任务
grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
};此文件再grunt命令执行的时候，会加载所列grunt插件。如代码所示，我们压缩js文件夹下newtest.js到映射文件dest文件夹下，并更名为dest-js.js文件。
五、执行grunt脚本。
当配置好这两个文件就可以在命令行执行grunt来压缩js了。如下命令
npm install
grunt
此时再回到我们文件目录中，如约出现了dest/dest-js.js文件并且文件已经压缩好了。
执行脚本
css/js压缩：
项目打包：
执行结果
压缩后的css:
压缩js:（js加密混淆比较彻底）
项目打包：
六、总结：Node Grunt自动化
今天跟大家分享的grunt，比较粗浅。暂时小编工作中就是能用他来进行项目加密，项目压缩和自动化打包等功能。Gruntfile.js,package.json的脚本配置更多的大家可以了解一下，后边再慢慢学习使用grunt来构建前端项目，如有疑问，欢迎留言，共同进步。
