首页 > 其他 > 详细

grunt前端构建工具使用教程

时间:2014-07-14 23:14:57      阅读:522      评论:0      收藏:0      [点我收藏+]

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

grunt前端构建工具使用教程,布布扣,bubuko.com

grunt前端构建工具使用教程

原文:http://www.cnblogs.com/fyking/p/3842421.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!