grunt前端构建工具使用教程

grunt能干些什么？

grunt实际上是哆啦a梦的百宝袋，是工具集，拥有很是丰富的任务插件，能够实现各式各样的构建目标。

按任务目标大体可分为四类：

文件操做型：好比合并、压缩js和css文件等（包括）

预编译型：好比编译less、sass、coffeescript等

类库项目构建型：好比 angular、ember、backbone等（这种推荐使用yeoman）

工程质量保障型：好比jshint、jasmine、mocha等

除此以外还有像 watch （监听文件改变，自动触发构建）等功能。

使用工具：

node： http://www.nodejs.org

安装：

window:安装比较傻瓜式，就两步。

1 下载源文件 http://www.nodejs.org/download/ 选择对应的最新msi文件。

2 双击进行安装。

linux：

1 wget下载源文件

打开 http://www.nodejs.org/download/,寻找到本身要下载的文件地址

# wget 源文件路径

2 解压文件

# tar xvf 文件路径

3 进入解压目录

# cd node-v0.8.7

4 检查所须要配置

# ./configure

5 安装

# make install

6 检查是否成功安装，输入命令：

# node -v

配置：

npm node pakeage manage 包管理

国内的npm镜像配置

国内的npm安装因为某种缘由老是比较慢，因此须要在作些配置了。

设置 npm 国内镜像 

npm config set registry http://registry.cnpmjs.org

可选项:使用cjnpm

grunt：https://github.com/gruntjs/

安装：

grunt的安装须要先安装node才能继续安装。grunt也就是至关于node的一个模块。

1 npm install -g grunt-cli

里边的-g 安装到全局

卸载

npm uninstall -g grunt-cli

2 npm install -g grunt-init

使用grunt-init 进行配置（待补充）

配置：

packjson介绍：用于配置须要拉取的grunt插件信息。

{

    "name": "demo",

    "version": "1.0.0",

    "devDependencies": {

        "grunt-contrib-uglify": "~0.2.0"

    }

}

  里边的devDependecies用于定义须要引入的插件信息，定义你要拉取的依赖模块，上面的代码，拉取grunt-contrib-uglify插件（用于压缩js），字段的值~0.2.0，指明须要模块的版本号，“~”是至少的意思。

使用：npm install 依赖拉取成功后，在demo工程中生成了node_modules目录，该目录就包含了grunt-contrib-uglify插件模块的代码。

实例：建立gruntFile.js文件

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/hello-grunt.js',

                //目标文件

                dest: 'build/hello-grunt-min.js'

            }

        }

    });

    // 加载指定插件任务

    grunt.loadNpmTasks('grunt-contrib-uglify');

    // 默认执行的任务

    grunt.registerTask('default', ['uglify']);

};

grunt核心方法：

grunt.initConfig(obj)

initConfig用于配置构建信息，第一个参数必须是个object。

grunt.file.readJSON(path)

读取一个json文件，一般咱们会把构建任务的基本配置写在独立的json文件内，方便咱们修改。

// 构建任务配置

grunt.initConfig({

    //读取package.json的内容，造成个json数据

    pkg: grunt.file.readJSON('package.json')

});

上面代码，将读取的json赋值给pkg字段，想要获取配置的值，就可使用pkg.name这样的形式。

grunt.loadNpmTasks(pluginName)

加载指定插件任务，示例代码以下：

grunt.loadNpmTasks('grunt-contrib-uglify');

能够加载多个：

grunt.loadNpmTasks('grunt-contrib-uglify');

//css压缩

grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt.registerTask(taskName,taskArray)

注册任务，好比下面的代码：

grunt.registerTask('default', ['uglify']);

注册默认执行的任务，即你运行grunt命令时，触发的任务构建。

第二个参数为任务目标名，在initConfig()中配置：

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/hello-grunt.js',

            //目标文件

            dest: 'build/hello-grunt-min.js'

        }

    }

});

uglify为任务目标名，options为grunt-contrib-uglify插件配置参数。

banner向输出文件打印你须要的信息。

build为具体任务构建配置

文件的简单正则匹配语法

文件名（目录路径）的匹配，基本上和ant同样。

* 匹配除了/外的任意数量的字符，好比foo/*.js

? 匹配除了/外的单个字符

** 匹配包含/的任意数量的字符，好比foo/**/*.js

! 排除指定文件，好比src: ['foo/*.js', '!foo/bar.js']

{} 能够理解为“or”表达式，好比src: 'foo/{a,b}*.js'

用法举例：

//匹配foo目录下全部th开头的js文件

{src: 'foo/th*.js', dest: ...}

//等价于{src: ['foo/a*.js', 'foo/b*.js'], dest: ...}

{src: 'foo/{a,b}*.js', dest: ...}

//优先处理bar.js，而后再处理其余文件

{src: ['foo/bar.js', 'foo/*.js'], dest: ...}

//排除处理foo/bar.js文件

src: ['foo/*.js', '!foo/bar.js'], dest: ...}

grunt经常使用插件  参见：http://gruntjs.cn/

1 经常使用插件有

  grunt-contrib-concat：文件合并

  grunt-contrib-copy：用于复制文件或目录的插件

  grunt-contrib-clean：用于删除文件或目录的插件

  grunt-contrib-compress：用于压缩文件和目录成为zip包

  grunt-contrib-jshint：js代码检查

  grunt-contrib-mincss：css压缩

  grunt-contrib-uglify：js压缩

  grunt-contrib-watch：实时监听插件

  grunt-contrib-imagemin，可以快速的压缩工程内的图片

  grunt-contrib-yuidoc：基于YUIDOC生成js API文档

  grunt-karma：单测回归插件

参考网页：http://www.36ria.com/6192

http://www.36ria.com/6226

http://www.36ria.com/6273