Grunt教程-前端自动化

摘要：为何选择压缩编译单元测试代码检查等我们需要自动化，不必重复劳动，减小工作量。用于保存项目元数据。图像压缩模块。监视文件变动，做出相应动作。

  
压缩、编译、单元测试、代码检查等 我们需要自动化，不必重复劳动，减小工作量。为何选择Grunt呢？好像是没有更好的选择了。

  
Grunt基于Node.js，安装之前要先安装Node.js。

shellbrew install node  

shellsudo npm install npm -g

  
安装 grunt-cli 并不等于安装了 Grunt 任务运行器

  Grunt CLI 的任务是运行 Gruntfile 指定的 Grunt 版本。 这样就可以在一台电脑上同时安装多个版本的 Grunt。(没有懂，俺直接实战)

shellnpm install -g grunt-cli

  
创建文件必须创建文件夹，我建立了一个 test 的文件夹，一个标准的 grunt 项目中必须有两个文件。
  
  
package.json：用于保存项目元数据。

  Gruntfile.js : 用于配置或定义任务、加载 Grunt 插件。
  
  
在test1文件夹中创建这两个文件吧。那么文件中写什么内容呢。我们首先来关注一下package.json写什么内容

json{
  "name": "test",
  "version": "1.0.0"
}

shellnpm install

lognpm WARN package.json test1@1.0.0 No description
npm WARN package.json test1@1.0.0 No repository field.
npm WARN package.json test1@1.0.0 No README data

  
提示说没有描述信息没有README之类的

  在根目录添加一个 README.md 文件

{
  "name": "test",
  "version": "1.0.0",
  "description": "测试的例子",
  "repository": {
    "type": "git",
    "url": "https://github.com/JSLite/JSLite.git"
  }
}

  
于是乎万事大吉了

  
在此项目中安装 Grunt 插件

shellsudo npm install grunt --save-dev

json{
  "name": "test",
  "version": "1.0.0",
  "description": "测试的例子",
  "repository": {
    "type": "git",
    "url": "https://github.com/JSLite/JSLite.git"
  },
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

  
插件用途：压缩js,css文件

  插件名称：grunt-contrib-uglify

shellsudo npm install grunt-contrib-uglify --save-dev

json  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "^0.8.0"
  }

  
还记得我们上面说一个Grunt项目要两个必须的文件一个 package.json 和Gruntfile.js，注意大小写，Linux区分大小写的，创建 Gruntfile.js 并写入如下内容

js// 包装函数
module.exports = function(grunt) {

  // 任务配置,所有插件的配置信息
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),

    // uglify插件的配置信息
    uglify: {
        options: {
          banner: "/*! This is uglify test - " +
            "<%= grunt.template.today("yyyy-mm-dd") %> */",
          beautify: true,//是否压缩
          mangle: false, //不混淆变量名
          compress:true,//打开或关闭使用默认选项源压缩。
        },
        app_task: {
          files: {
            "build/app.min.js": ["lib/index.js", "lib/test.js"]
          }
        }
    }
  });

  // 告诉grunt我们将使用插件
  grunt.loadNpmTasks("grunt-contrib-uglify");

  // 告诉grunt当我们在终端中输入grunt时需要做些什么
  grunt.registerTask("default", ["uglify"]);

};

  
输入命令下面命令，好了，我的没有错误正常的。如果有错误，会有错误日志，自己分析哦。

shellgrunt

  
插件用途：监控文件变化并自动运行grunt的watch插件

  插件名称：grunt-contrib-watch

shellsudo npm install grunt-contrib-watch --save-dev

  
修改 Gruntfile.js

js    // watch插件的配置信息
    watch: {
        another: {
            files: ["lib/*.js"],
            tasks: ["uglify"],
            options: {
                // Start another live reload server on port 1337
                livereload: 1337
            }
        }
    }

jsgrunt.loadNpmTasks("grunt-contrib-watch");

jsgrunt.registerTask("default", ["uglify","watch"]);

js// 包装函数
module.exports = function(grunt) {

  // 任务配置,所有插件的配置信息
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),

    // uglify插件的配置信息
    uglify: {
        options: {
          banner: "/*! This is uglify test - " +
            "<%= grunt.template.today("yyyy-mm-dd") %> */"
        },
        app_task: {
          files: {
            "build/app.min.js": ["lib/index.js", "lib/test.js"]
          }
        }
    },


    // watch插件的配置信息
    watch: {
        another: {
            files: ["lib/*.js"],
            tasks: ["uglify"],
            options: {
                // Start another live reload server on port 1337
                livereload: 1337
            }
        }
    }


  });

  // 告诉grunt我们将使用插件
  grunt.loadNpmTasks("grunt-contrib-uglify");
  grunt.loadNpmTasks("grunt-contrib-watch");

  // 告诉grunt当我们在终端中输入grunt时需要做些什么
  grunt.registerTask("default", ["uglify","watch"]);

};

shellsudo npm install grunt-contrib-watch --save-dev

jsstylus:{
    build: {
        options: {
            linenos: false,
            compress: false,
            banner: "/** 
 * <%= pkg.name %> - <%= pkg.description %>
 * version <%= pkg.version %> 
 * author <%= pkg.author %> 
 * date <%= grunt.template.today() %> 
**/
"
        },
        files: [{
            "css/historyDetail.css": "styl/historyDetail.styl"
        }]
    }
},

js    grunt.loadNpmTasks("grunt-contrib-stylus");

banner: "/** 
 * <%= pkg.name %> - <%= pkg.description %>
 * version <%= pkg.version %> 
 * author <%= pkg.author %> 
 * date <%= grunt.template.today() %> 
**/
"