Grunt简单教程
1.grunt简单介绍
Grunt是一个基于任务的命令行工具。依赖于node.js环境。
它能帮你合并js文件，压缩js文件，验证js。编译less，合并css。还能够配置自己主动任务。单元測试等等，grunt有许多的插件，能够满足你的大部分需求。
2.怎么安装
先介绍一些东西：
npm是node.js的包管理器通过npm能够下载安装nodejs的模块包
cnpm是淘宝 npm镜像，用此取代官方版本号(仅仅读)，同步频率眼下为10分钟一次。
安装cnpm方法
npm install -g cnpm --registry=https://registry.npm.taobao.org
经常使用命令：
node -v 版本号
npm -v 版本号
npm list：查看当前文件夹下已安装的node包
npm help：查看帮助命令
npm install <name> -g
将包安装到全局环境中,在命令行能直接使用
npm update moduleName：更新node模块
npm uninstall moudleName：卸载node模块
npm root：查看当前包的安装路径
npm root -g：查看全局的包的安装路径
假设你之前安装过老的0.3版本号，请先卸载：
npm uninstall -g grunt
安装Grunt命令行（CLI）：
npm install -g grunt-cli
注1：-g代表全局安装，Grunt有二个版本号：server端版本号（grunt）和client版本号（grunt-cli）。
注2：安装grunt-cli并不等于安装了grunt！grunt CLI的任务非常easy：调用与Gruntfile在同一文件夹中的grunt。这样带来的优点是。同意你在同一个系统上同一时候安装多个版本号的grunt。而grunt使用模块结构。除了安装命令行界面以外。还要依据须要安装对应的模块。这些模块应该採用局部安装。由于不同项目可能须要同一个模块的不同版本号。
package.json: 此文件被npm用于存储项目的元数据，以便将此项目公布为npm模块。
{
"name": "grunt",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-nodeunit": "~0.1.2",
"grunt-contrib-watch": "~0.2.0",
"grunt-contrib-concat": "~0.1.1",
"grunt-contrib-uglify": "~0.1.0",
"grunt-contrib-cssmin": "~0.9.0",
"difflet": "~0.2.3"
}
}
devDependencies里面的參数，指定了项目依赖的Grunt和Grunt插件版本号。当中"~0.1.1"代表安装该插件的某个特定版本号，假设仅仅需安装最新版本号，能够改成"*"。
创建新的Grunt项目
cd到项目目录
方式一：建好package.json文件然后运行：
npm install
这时你会发现项目目录中多了个node_modules目录，其里面就是相应的Grunt和Grunt插件。
方式二：自己主动安装
安装最新版的Grunt：
npm install grunt --save-dev
接着安装我们所须要的插件：
npm install grunt-contrib-cssmin --save-dev
注：当中--save-dev，表示将它作为你的项目依赖加入到package.json文件里devDependencies内。假设你要安装指定版本号的Grunt或者Grunt插件。仅仅须要执行npm install grunt@VERSION --save-dev命令，当中VERSION就是你所须要的版本号(指定版本号号就可以)。
配置任务
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee。用来配置或定义任务（task）并载入Grunt插件
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
},
dist: {
src: ['src/**/*.js'],//src目录下包含子目录下的全部文件
dest: 'dist/built.js'//合并文件在dist下名为built.js的文件
}
},
uglify: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd HH:mm:ss") %> */\n'
},
//详细任务配置
build: {
src: 'dist/built.js',
dest: 'build/built.min.js'
}
},
cssmin: {
build: {
src: ["src/css/css1.css", "src/css/css2.css"],
dest:"dist/css/cssOut.css"
}
}
});
// 载入提供”uglify”任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 默认任务
grunt.registerTask('default', ['concat','uglify','mincss']);
}
运行任务
运行配置中全部的任务：
grunt
运行某个特定的任务：
grunt concat
经常使用插件介绍：
grunt-contrib-uglify 压缩js文件
grunt-contrib-concat 合并随意文件
grunt-contrib-jshint 于javascript代码检查（并会给出建议），公布js代码前运行jshint任务，能够避免出现一些低级语法问题
grunt-contrib-mincss 用于css压缩
grunt-contrib-watch 它能监測文件的改动，触发指定任务
grunt-contrib-less less编译
等等