Grunt

一:Grunt

http://www.gruntjs.net/           http://gruntjs.com/

基于命令行的前端自动化管理工具。用于自动化构建、测试、发布及生成文档等,如:

前期:一键替代重复创建及组织前端文件
开发:自动刷新
发布:HTML去掉注析、换行符 - HtmlMin
            CSS文件压缩合并 – CssMinify
            JS代码风格检查 – JsHint
            JS代码压缩 – Uglyfy
             image压缩 - imagemin


二:安装配置

1:node环境(>0.8.0), npm包管理

2:卸载旧版

      npm uninstall grunt -g

3:安装grunt-cli

      Grunt的工具具有两个

      grunt  

      npm install grunt --save-dev

      grunt-cli(Grunt命令行工具,安装这个工具 grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了,例如如我们要为某一个项目中添加Grunt,则使用 grunt-cli的grunt命令)  

      $ npm install -g grunt-cli

4:安装 grunt-init(可选)

      grunt-init是个脚手架工具,它可以帮你完成项目的自动化创建,包括项目的目录结构,每个目录里的文件等。具体情况要看你运行grunt-init指定的模板,以及创建过程中你对问题的回答

      1)安装

      $ npm install -g grunt-init

      2)安装模板

      你首先得安装github : http://windows.github.com

      Grunt官方维护的grunt-init模板:
      grunt-init-commonjs               创建一个包含Nodeunit单元测试的commonjs模块。(sample "generated" repo | creation transcript)
      grunt-init-gruntfile                   创建一个基本的Gruntfile。(sample "generated" repo | creation transcript)
      grunt-init-gruntplugin             创建一个包含Nodeunit单元测试的Grunt插件。(sample "generated" repo | creation transcript)
      grunt-init-jquery                      创建一个包含QUnit单元测试的jQuery插件。(sample "generated" repo | creation transcript)
      grunt-init-node                        创建一个包含Nodeunit单元测试的Node.js模块。(sample "generated" repo | creation transcript)

      打开命令行输入:

      linux:
      git clone https://github.com/gruntjs/grunt-init-commonjs.git ~/.grunt-init/commonjs
      git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
      git clone https://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
      git clone https://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery
      git clone https://github.com/gruntjs/grunt-init-node.git ~/.grunt-init/node


      windows
      git clone https://github.com/gruntjs/grunt-init-commonjs.git %USERPROFILE%/.grunt-init/commonjs
      git clone https://github.com/gruntjs/grunt-init-gruntfile.git %USERPROFILE%/.grunt-init/gruntfile
      git clone https://github.com/gruntjs/grunt-init-gruntplugin.git %USERPROFILE%/.grunt-init/gruntplugin
      git clone https://github.com/gruntjs/grunt-init-jquery.git %USERPROFILE%/.grunt-init/jquery
      git clone https://github.com/gruntjs/grunt-init-node.git %USERPROFILE%/.grunt-init/node

      windows安装完之后会在类似以下目录找到它们:
      C:\Users\你的用户名\.grunt-init


     在windos中使用模板创建项目步骤如下

      1)创建项目如Test

      2)打开cmd,切换到Test目录

      3)假如我们要创建以Jquery模板的项目,则将Jquery模板拷贝到Test根目录下面

             git clone %USERPROFILE%/.grunt-init/jquery jquery

      4)使用grunt-init工具使用模板进行自动化创建前端文件(根据提示一步一步创建)

             grunt-init jquery --force


三:为你的项目配置Grunt

      假设项目为Test

1:在Test目录下创建package.json

      创建方式:

      1)根据grunt-init模板自动创建一个特定的package.json文件(如上 二:4);
      2)在命令终端通过npm init命令自动创建一个基本的package.json文件;
      3)从官网上复制或者下载一个package.json文件;
      4)手工创建一个package.json文件;

      格式:

      {
          "name":"项目名称",
          "version":"项目版本号",
          "description":"项目描述",
          "author":"项目创建者",
          "license":"项目版权",
          "devDependencies": {
              //项目依赖插件
           }
      }

      例子:

    {
        "name": "Test",
        "version": "0.0.1",
        "description": "project with grunt.",
        "author": "xxx",
        "license": "BSD",
        "devDependencies": {
            "grunt": "~0.4.5",
            "grunt-contrib-jshint":"~0.10.0",
            "grunt-contrib-nodeunit":"~0.4.1",
            "grunt-contrib-uglify":"~0.5.0"
        }
    }

    打开cmd,切换到Test根目录,也可以通过以下命令的方式向package.json文件中添加插件:
    $ npm install grunt插件名 --save-dev

2:在Test目录下创建Gruntfile.js文件 

       创建方式:

      1)根据grunt-init模板自动创建一个特定的Gruntfile.js文件(如上 二:4);
      2)在命令终端通过npm init命令自动创建一个基本的package.json文件;
      3)从官网上复制或者下载一个Gruntfile.js文件;
      4)手工创建一个package.json文件;

      格式:

module.exports = function(grunt){
    // 构建任务配置
    grunt.initConfig({
        //读取package.json的内容,形成个json数据
        pkg: grunt.file.readJSON('package.json'),
        //Grunt 任务配置
    });
    //加载Grunt插件
    grunt.loadNpmTasks('Grunt插件名');
    //默认的Grunt任务
    grunt.registerTask('default',['Grunt任务']);
};

      例子:

module.exports = function(grunt) {
  //构建任务配置
  grunt.initConfig({
    //读取package.json的内容,形成个json数据
    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'
      }
    }
  });
  //加载指定插件任务 "uglify"
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认执行的任务
  grunt.registerTask('default', ['uglify']);
};

3:执行安装,为项目Test安装Grunt

      $ npm install

四:开发

1:启动文件变更监控(livereload)

      $ grunt live

五:发布

1:编码完成后Build

      $ grunt build






你可能感兴趣的:(Grunt)