标签：des style blog http color io os 使用 ar
Grunt 是基于Node.js环境下的 项目脚手架，用于快速搭建项目文件与目录，以及提供各种插件来自动化解决开发过程中的常用程序，比如 代码压缩，代码检测，单元测试等....
Grunt的安装首先你得确保你安装了node环境，如果没有安装，请移步 http://www.nodejs.org/download/ (新手请下载exe安装包一键安装免折腾);
建议将项目放入本地服务器，因为Grunt部分插件需要在服务器环境下才能正常运行;
Grunt的三大组成部分:
pakeage.json // grunt的项目信息与项目依赖的插件声明; Gruntfile.js // grunt工作配置文件, 插件设置啊，任务设置啊什么的都在这里面; node_modules文件夹 //当你在此执行了接下来要讲的 grunt平台安装后，项目根目录就会出现这个文件夹，这里面装了 grunt平台各种核心文件跟插件文件;
Grunt 安装流程:
在项目目录 shift + 右键,选择 在此打开运行窗口(cmd); 输入 npm install -g; 进行 grunt的安装(确保本目录有pagage.json与gruntfile.js文件);
如果 grunt安装成功后，在你的项目根目录会出现一个node_modules文件夹，这时候就好啦;
Grunt 的核心概念:
package.json //项目信息设置, 声明依赖(需要使用)的插件信息;
{ "name": "just-a-demo", //项目名字，字符串不能有空格 "version": "0.1.0", //项目版本号 "devDependencies": { //这些是本项目需要引入的grunt插件信息, “*”代表最新版本; "grunt": "~0.4.1", "grunt-contrib-jshint": "*", "grunt-contrib-qunit": "*", "grunt-contrib-nodeunit": "*", "grunt-contrib-uglify": "*", "grunt-contrib-watch": "*" } }
Gruntfile.js //项目任务配置，插件配置;
// grunt项目的所有配置代码都得放在以下这个函数内; module.exports = function(grunt){ // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json‘), // 指定 package文件，方便插件引用package.json内的信息;
//以下是各种插件的配置,格式是 插件名: {配置key: 配置value,...};
uglify: { // TODO:这是压缩代码的插件 -- uglify; options: { // 自动在合并后的文件上插入注释; banner: ‘/*! 这是狼哥哥压缩后的代码！！ <%= grunt.template.today("yyyy-mm-dd") %> */\n‘ }, build: { // 需要合并的单个 || 多个文件; src: [ ‘src/<%=pkg.name %>.js‘, ‘src/not-a-demo.js‘ ], // 输出目录以及文件名; dest: ‘build/<%= pkg.name %>.min.js‘ } }// 加载提供"uglify"任务的插件 grunt.loadNpmTasks(‘grunt-contrib-uglify‘);// 创建任务 ‘default‘为grunt默认任务，直接cmd执行grunt即可运行，其他需要 "grunt 任务名" 运行; grunt.registerTask(‘default‘, [‘uglify‘, ‘qunit‘]); grunt.registerTask(‘sam‘, [‘uglify‘]); };
完整的流程就是:
1. 将 package.json与 Gruntfile.js复制进项目根目录;
2. 在当前项目根目录 shift+右键 选 在当前目录打开运行窗口，输入 npm install 进行 grunt安装;
3. 输入grunt执行 grunt的默认任务， 或输入 grunt 任务名 执行自定义任务;
4. 至于具体的插件啊什么的，你需要啥插件就把插件名 写进 package.json的devDependencies里，然后在 Gruntfile.js里的grunt.initConfig写插件的配置;
在Gruntfile.js的下方 写下此命令,加载你需要的插件: grunt.loadNpmTasks(‘grunt-contrib-uglify 插件全名‘);
在Gruntfile.js的下方 创建任务: grunt.registerTask(‘test‘, [‘插件短名‘]);
如果你新增了插件，你必须 npm install; 重新安装一次grunt，否则会运行报错！
接下来你就可以通过命令台，在当前项目目录 愉快的玩耍Grunt啦，狼哥哥写的算简单算精彩吧~~鲜花掌声拥抱亲吻，快来啊！！！！！
标签：des style blog http color io os 使用 ar
原文地址：http://www.cnblogs.com/juhualang/p/3972951.html
