grunt快速入门

1、执行 npm update -g npm 指令进行升级（在某些系统中可能需要 sudo 指令）。

 

2、安装cli

npm install -g grunt-cli

上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

 

      注意，安装grunt-cli并不等于安装了 Grunt！

 

3、准备一份新的grunt项目

     一般需要在你的项目中添加两份文件：package.json 和 Gruntfile。

      package.json应当放置于项目的根目录中，

{
  "name": "grunt-feng",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

 

      Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件，应当放 在你的项目根目录中，和package.json文件在同一目录层级，并和项目源码一起加入源码管理 器。

     Gruntfile由以下几部分构成：

• "wrapper" 函数
• 项目与任务配置
• 加载grunt插件和任务
• 自定义任务

  module.exports = function(grunt) {
  
    // Project configuration.
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      concat: {
         options: {
          // 定义一个用于插入合并输出文件之间的字符
            separator: ';'
         },
         dist: {
          // 将要被合并的文件
           src: ['src/**/*.js'],
          // 合并后的JS文件的存放位置
         dest: 'dist/<%= pkg.name %>.js'
         }
     }
   });
    // 加载包含 "concat" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
  
    // 默认被执行的任务列表。
    grunt.registerTask('default', ['concat']);
  
  }; 

4、安装Grunt 和 grunt插件

 

npm install grunt --save-dev

   这条命令将安装Grunt最新版本到项目目录中，并将其添加到devDependencies内

 

 

  grunt插件和其它node模块都可以按相同的方式安装。下面展示的实例就是安装 concat 任务模块

npm install grunt-contrib-concat --save-dev

   (或者直接使用npm install 替代上面的两步，但是部分插件可能会无法安装)

5、在根目录小建立src和dist（根据grunt.js中的配置进行调整）文件。在src下建立想要连起来的js文件

 

6、运行grunt 。可以在dist目录下看到生成的文件

 

 

 参考链接http://www.gruntjs.net/getting-started