Grunt 入门 －1

1. 安装环境
2. • 安装node.js,?http://nodejs.org/dist/v0.10.36/node-v0.10.36.pkg, 查看nodejs版本｀node -v`.
   • 安装Node.js包管理器npm:?`brew install npm`, 查看npm 版本
   • 安装Grunt command line： `npm install -g grunt-cli`
3. 准备一个新的Grunt项目
   
   
   ? ? ?? ? ?一个Grunt项目主要有两个文件，package.json和Gruntfile。package.json文件中将列出你项目所依赖
   ? ? ? ? ??? ? ?的Grunt版本和Grunt插件。Guntfile中定义Grunt任务。
   ? ? ? ? ? ? ? ?? ? 下面我们创建一个简单的Grunt项目。
   ? ? ? ? ? ? ? ?? ? ?1）使用`npm init` 创建一个基本的package.json
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????? "name": "empty-grunt",
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? "version": "0.1.0",
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????"description": "this is a empty grunt project",
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????"main": "index.js",
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????"scripts": {
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ?????"test": "test"
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ?????},
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? "author": "zengwei shao",
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????"license": "ISC",
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????"devDependencies": { ?//依赖的Grunt插件
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????"grunt": "^0.4.5"
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ?????}
   ? ? ? ? ? ? ? ? ? ? ? ?? ?????}
   ? ? ? ? ? ? ? ?? ? ?2）安装Grunt插件`npm install`,安装之后目录下会生成一个node_modules的文件夹。
   ? ? ? ? ? ? ? ?? ? ?3）Gruntfile? ?Gruntfile支持两种格式：Gruntfile.js和Grungfile.coffee。
   ? ? ? ? ? ? ? ? ? ? ? ? ?? ? Gruntfile由以下几部分组成：
   ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ?》“wrapper”函数
   ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ?》项目和任务配置
   ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ?》加载的Grunt插件和任务
   ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ?》自定义任务
   ? ? ? ? ? ? ? ? ? ? ? ? ?下面我们创建一个简单的Gruntfile
   ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ?》首先我们安装一下我们将要使用的Grunt插件`grunt-contrib-uglify`
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ?`npm install grunt-contrib-uglify —save-dev`
   ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ?》创建如下Gruntfile.js
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??module.exports=function(grunt){
   
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????? //project configure
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????? grunt.initConfig({
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??????? pkg: grunt.file.readJSON(‘package.json‘),
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ?????uglify: {
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??????? options: {
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? banner: ‘/*! <%= pkg.name%> <%= grunt.template.today("yyyy-mm-dd")%>*/\n‘
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??????? },
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??????? build: {
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? src: ‘src/<%= pkg.name%>.js‘,
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? dest: ‘build/<%= pkg.name%>.min.js‘
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????}
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ?????});
   
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????//loading task plugin
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????? grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
   
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????//default task
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????grunt.registerTask(‘default‘, [‘uglify‘]);
   ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? }
   ? ? ? ? ? *****?“wrapper”函数module.exports=function(grunt){…..},所有Gruntfile都使用这个基本格式（包括Grunt插件），并且所有的Grunt相关定义必须定义在这个Wrapper函数中。
   ? ? ? ? ? ***** grunt.initConfig({})初始化Grunt的配置，grunt.file.readJSON(),可以读出package.json中的相关配置，可以在定义任务时使用。
   ? ? ??
4. Grunt插件和自定义Grunt任务
   》》所有在package.json的依赖，通过`npm install`就可以直接安装相关插件。安装完成后，我们就可以通过`grunt.loadNpmTasks(‘plugin name’)`加载和注册插件中的任务。
   
   》》grunt.registerTask(‘firstSimpleTask‘, ‘This is a simple grunt task‘, function(){
   ????????? grunt.log.write("this is a simple grunt task..").ok();
   ???? });
   这是一个简单的Grunt任务，然后我们运行`grunt firstSimpleTask`就可以在控制台上看到输出结果。

Grunt 入门 －1

原文：http://xiaoshao.iteye.com/blog/2183877