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

grunt前端构建工具使用教程

时间: 2024-11-05 18:31:24

grunt前端构建工具使用教程的相关文章

Gulp vs Grunt 前端构建工具对比

Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等.而如今前端提到构建工具会自然想起Grunt.Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理. 在JavaScript的世界里,Grunt.js是基于Node.js的自动化任务运行器.201

(转)前端构建工具gulp入门教程

前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,

前端构建工具gulpjs的使用介绍及技巧

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm inst

前端构建工具gulpjs的使用介绍及技巧(转载)

本文转载自无双 ,原文地址 http://www.cnblogs.com/2050/p/4198792.html. 感谢原博主的辛苦总结. gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的AP

前端构建工具gulpjs

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快. 1.安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次.把目录切换到你的项目文件夹中,然后在命令行中执行: npm install gulp 如果想在安装

前端构建工具之gulp的安装和配置

在选择构建工具时,看到更多人推荐gulp,从此入了gulp的坑- 一.安装node环境 百度谷歌一下就有了,在终端中分别输入 node -v 和 npm -v,若显示node和npm的版本号则说明node环境装好了. 二.安装gulp linux下安装全局环境: sudo npm install -g gulp 或cd进入项目目录下安装gulp到项目本地: npm install gulp --save-dev --save-dev的意思是将安装的gulp版本信息写入package.json,更

Gulp.js----比Grunt更易用的前端构建工具

Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一职责.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一些和其主要任务无关的事情.比如说要对处理后的文件进行更名操作,你可能使用的是 uglify 插件,也有可能使用的是 concat 插件(取决于工作流的最后一个环节是谁). 用插件做一些本来不需要插件来做的事情.因为

[转载]前端构建工具gulpjs的使用介绍及技巧

转载地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp

(转载)前端构建工具gulp使用

前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/alferov/awesome-gulp StuQ-Gulp实战和原