Grunt入门教程(自动任务运行器)


Posted in Javascript onAugust 06, 2015

在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具,可以帮助我们自动管理和运行各种任 务。

简单说,Grunt是一个自动任务运行器,会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程,减轻重复性工作带来的负担。

## 安装

Grunt基于Node.js,安装之前要先安装Node.js,然后运行下面的命令。

sudo npm install grunt-cli -g

grunt-cli表示安装的是grunt的命令行界面,参数g表示全局安装。

Grunt使用模块结构,除了安装命令行界面以外,还要根据需要安装相应的模块。这些模块应该采用局部安装,因为不同项目可能需要同一个模块的不同版本。

首先,在项目的根目录下,创建一个文本文件package.json,指定当前项目所需的模块。下面就是一个例子。

{ “name”: “my-project-name”, “version”: “0.1.0”, “author”: “Your Name”, “devDependencies”: { “grunt”: “0.x.x”, “grunt-contrib-jshint”: ““, “grunt-contrib-concat”: “~0.1.1”, “grunt-contrib-uglify”: “~0.1.0”, “grunt-contrib-watch”: “~0.1.4” } }

上面这个package.json文件中,除了注明项目的名称和版本以外,还在devDependencies属性中指定了项目依赖的grunt模 块和版本:grunt核心模块为最新的0.x.x版,jshint插件为最新版本,concat插件不低于0.1.1版,uglify插件不低于 0.1.0版,watch插件不低于0.1.4版。

然后,在项目的根目录下运行下面的命令,这些插件就会被自动安装在node_modules子目录。

npm install

上面这种方法是针对已有package.json的情况。如果想要自动生成package.json文件,可以使用npm init命令,按照屏幕提示回答所需模块的名称和版本即可。

npm init

如果已有的package.json文件不包括Grunt模块,可以在直接安装Grunt模块的时候,加上—save-dev参数,该模块就会自动被加入package.json文件。

npm install <module> —save-dev

比如,对应上面package.json文件指定的模块,需要运行以下npm命令。

npm install grunt —save-dev npm install grunt-contrib-jshint —save-dev npm install grunt-contrib-concat —save-dev npm install grunt-contrib-uglify —save-dev npm install grunt-contrib-watch —save-dev

## 命令脚本文件Gruntfile.js

模块安装完以后,下一步在项目的根目录下,新建脚本文件Gruntfile.js。它是grunt的配置文件,就好像package.json是npm的配置文件一样。Gruntfile.js就是一般的Node.js模块的写法。

module.exports = function(grunt) { // 配置Grunt各种模块的参数 grunt.initConfig({ jshint: { / jshint的参数 / }, concat: { / concat的参数 / }, uglify: { / uglify的参数 / }, watch: { / watch的参数 / } }); // 从node_modules目录加载模块文件 grunt.loadNpmTasks(‘grunt-contrib-jshint'); grunt.loadNpmTasks(‘grunt-contrib-concat'); grunt.loadNpmTasks(‘grunt-contrib-uglify'); grunt.loadNpmTasks(‘grunt-contrib-watch'); // 每行registerTask定义一个任务 grunt.registerTask(‘default', [‘jshint', ‘concat', ‘uglify']); grunt.registerTask(‘check', [‘jshint']); };

上面的代码用到了grunt代码的三个方法: grunt.initConfig:定义各种模块的参数,每一个成员项对应一个同名模块。
grunt.loadNpmTasks:加载完成任务所需的模块。 grunt.registerTask:定义具体的任务。第一个参数为任务名,第二个参数是一个数组, 表示该任务需要依次使用的模块。default任务名表示,如果直接输入grunt命令,后面不跟任何参数,这时所调用的模块(该例为 jshint,concat和uglify);该例的check任务则表示使用jshint插件对代码进行语法检查。
上面的代码一共加载了四个模块:jshint(检查语法错误)、concat(合并文件)、uglify(压缩代码)和watch(自动执行)。接下来,有两种使用方法。

(1)命令行执行某个模块,比如

grunt jshint

上面代码表示运行jshint模块。

(2)命令行执行某个任务。比如

grunt check

上面代码表示运行check任务。如果运行成功,就会显示“Done, without errors.”。

如果没有给出任务名,只键入grunt,就表示执行默认的default任务。

## Gruntfile.js实例:grunt-contrib-cssmin模块

下面通过cssmin模块,演示如何编写Gruntfile.js文件。cssmin模块的作用是最小化CSS文件。

首先,在项目的根目录下安装该模块。

npm install grunt-contrib-cssmin —save-dev

然后,新建文件Gruntfile.js。

module.exports = function(grunt) { grunt.initConfig({ cssmin: { minify: { expand: true, cwd: ‘css/‘, src: [‘.css', ‘!.min.css'], dest: ‘css/‘, ext: ‘.min.css' }, combine: { files: { ‘css/out.min.css': [‘css/part1.min.css', ‘css/part2.min.css'] } } } }); grunt.loadNpmTasks(‘grunt-contrib-cssmin'); grunt.registerTask(‘default', [‘cssmin:minify','cssmin:combine']); };

下面详细解释上面代码中的三个方法,下面一个个来看。

(1)grunt.initConfig

grunt.initConfig方法用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。由于我们要配置的是cssmin模块,所以里面有一个cssmin成员(属性)。

cssmin(属性)指向一个对象,该对象又包含多个成员。除了一些系统设定的成员(比如options),其他自定义的成员称为目标 (target)。一个模块可以有多个目标(target),上面代码里面,cssmin模块共有两个目标,一个是“minify”,用于压缩css文 件;另一个是“combine”,用于将多个css文件合并一个文件。

每个目标的具体设置,需要参考该模板的文档。就cssmin来讲,minify目标的参数具体含义如下:

expand:如果设为true,就表示下面文件名的占位符(即号)都要扩展成具体的文件名。
cwd:需要处理的文件(input)所在的目录。 src:表示需要处理的文件。如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符。
dest:表示处理后的文件名或所在目录。 ext:表示处理后的文件后缀名。
除了上面这些参数,还有一些参数也是grunt所有模块通用的。

filter:一个返回布尔值的函数,用于过滤文件名。只有返回值为true的文件,才会被grunt处理。 dot:是否匹配以点号(.)开头的系统文件。
makeBase:如果设置为true,就只匹配文件路径的最后一部分。比如,a?b可以匹配/xyz/123/acb,而不匹配/xyz/acb/123。
关于通配符,含义如下:
:匹配任意数量的字符,不包括/。 ?:匹配单个字符,不包括/。
**:匹配任意数量的字符,包括/。 {}:允许使用逗号分隔的列表,表示“or”(或)关系。
!:用于模式的开头,表示只返回不匹配的情况。
比如,foo/
.js匹配foo目录下面的文件名以.js结尾的文件,foo//.js匹配foo目录和它的所有子目录下面的文件名以.js结尾的文件,!.css表示匹配所有后缀名不为“.css”的文件。

使用通配符设置src属性的更多例子:
(2)grunt.loadNpmTasks

grunt.loadNpmTasks方法载入模块文件。 (3)grunt.registerTask

grunt.registerTask方法定义如何调用具体的任务。“default”任务表示如果不提供参数,直接输入grunt命令,则先运行 “cssmin:minify”,后运行“cssmin:combine”,即先压缩再合并。如果只执行压缩,或者只执行合并,则需要在grunt命令后 面指明“模块名:目标名”。
grunt-contrib-clean:删除文件。
*
grunt-contrib-compass:使用compass编译sass文件。
*
grunt-contrib-concat:合并文件。
*
grunt-contrib-copy:复制文件。
*
grunt-contrib-cssmin:压缩以及合并CSS文件。
*
grunt-contrib-imagemin:图像压缩模块。
*
grunt-contrib-jshint:检查JavaScript语法。
*
grunt-contrib-uglify:压缩以及合并JavaScript文件。
*
grunt-contrib-watch:监视文件变动,做出相应动作。
模块的前缀如果是grunt-contrib,就表示该模块由grunt开发团队维护;如果前缀是grunt(比如grunt-pakmanager),就表示由第三方开发者维护。

以下选几个模块,看看它们配置参数的写法,也就是说如何在grunt.initConfig方法中配置各个模块。

### grunt-contrib-jshint

jshint用来检查语法错误,比如分号的使用是否正确、有没有忘记写括号等等。它在grunt.initConfig方法里面的配置代码如下。
/.js'] },

上面代码先指定jshint的检查项目,eqeqeq表示要用严格相等运算符取代相等运算符,trailing表示行尾不得有多余的空格。然后,指定files属性,表示检查目标是Gruntfile.js文件,以及lib目录的所有子目录下面的JavaScript文件。

### grunt-contrib-concat

concat用来合并同类文件,它不仅可以合并JavaScript文件,还可以合并CSS文件。
.js', dest : ‘js/‘ } },

上面代码中的options属性指定压缩后文件的文件头,以及sourceMap设置;target目标指定输入和输出文件。

### grunt-contrib-copy

copy模块用于复制文件与目录。

copy: { main: { src: ‘src/‘, dest: ‘dest/‘, }, },

上面代码将src子目录(只包含它下面的第一层文件和子目录),拷贝到dest子目录下面(即dest/src目录)。如果要更准确控制拷贝行为,比如只拷贝文件、不拷贝目录、不保持目录结构,可以写成下面这样:

copy: { main: { expand: true, cwd: ‘src/‘, src: ‘*‘, dest: ‘dest/‘, flatten: true, filter: ‘isFile', }, },

grunt-contrib-watch

watch模块用来在后台运行,监听指定事件,然后自动运行指定的任务。

watch: { scripts: { files: ‘/*.js', tasks: ‘jshint', options: { livereload: true, }, }, css: { files: ‘/.sass', tasks: [‘sass'], options: { livereload: true, }, }, },

设置好上面的代码,打开另一个进程,运行grunt watch。此后,任何的js代码变动,文件保存后就会自动运行jshint任务;任何sass文件变动,文件保存后就会自动运行sass任务。

需要注意的是,这两个任务的options参数之中,都设置了livereload,表示任务运行结束后,自动在浏览器中重载(reload)。这需要在浏览器中安装livereload插件。安装后,livereload的默认端口为localhost:35729,但是也可以用livereload: 1337的形式重设端口(localhost:1337)。

### 其他模块

下面是另外一些有用的模块。

(1)grunt-contrib-clean

该模块用于删除文件或目录。

clean: { build: { src: [“path/to/dir/one”, “path/to/dir/two”] } }

(2)grunt-autoprefixer

该模块用于为CSS语句加上浏览器前缀。

autoprefixer: { build: { expand: true, cwd: ‘build', src: [ ‘**/.css' ], dest: ‘build' } },

(3)grunt-contrib-connect

该模块用于在本机运行一个Web Server。

connect: { server: { options: { port: 4000, base: ‘build', hostname: ‘‘ } } }

connect模块会随着grunt运行结束而结束,为了使它一直处于运行状态,可以把它放在watch模块之前运行。因为watch模块需要手动中止,所以connect模块也就会一直运行。

(4)grunt-htmlhint

该模块用于检查HTML语法。

htmlhint: { build: { options: { ‘tag-pair': true, ‘tagname-lowercase': true, ‘attr-lowercase': true, ‘attr-value-double-quotes': true, ‘spec-char-escape': true, ‘id-unique': true, ‘head-script-disabled': true, }, src: [‘index.html'] } }

上面代码用于检查index.html文件:HTML标记是否配对、标记名和属性名是否小写、属性值是否包括在双引号之中、特殊字符是否转义、HTML元素的id属性是否为唯一值、head部分是否没有script标记。

(5)grunt-contrib-sass模块

该模块用于将SASS文件转为CSS文件。

sass: { build: { options: { style: ‘compressed' }, files: { ‘build/css/master.css': ‘assets/sass/master.scss' } } }

上面代码指定输出文件为build/css/master.css,输入文件为assets/sass/master.scss。

(6)grunt-markdown

该模块用于将markdown文档转为HTML文档。

markdown: { all: { files: [ { expand: true, src: ‘.md', dest: ‘docs/html/‘, ext: ‘.html' } ], options: { template: ‘templates/index.html', } } },

上面代码指定将md后缀名的文件,转为docs/html/目录下的html文件。template属性指定转换时采用的模板,模板样式如下。

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <div id=”main” class=”container”> <%=content%> </div> </body> </html>

{src: ‘foo/th.js'}grunt-contrib-uglify {src: ‘foo/{a,b}.js'} {src: [‘foo/a.js', ‘foo/b.js']}

至于combine目标,就只有一个files参数,表示输出文件是css子目录下的out.min.css,输入文件则是css子目录下的part1.min.css和part2.min.css。

files参数的格式可以是一个对象,也可以是一个数组。

files: { ‘dest/b.js': [‘src/bb.js', ‘src/bbb.js'], ‘dest/b1.js': [‘src/bb1.js', ‘src/bbb1.js'], }, // or files: [ {src: [‘src/aa.js', ‘src/aaa.js'], dest: ‘dest/a.js'}, {src: [‘src/aa1.js', ‘src/aaa1.js'], dest: ‘dest/a1.js'}, ],

如果minify目标和combine目标的属性设置有重合的部分,可以另行定义一个与minify和combine平行的options属性。

grunt.initConfig({ cssmin: { options: { / … / }, minify: { / … / }, combine: { / … / } } });

grunt # 默认情况下,先压缩后合并 grunt cssmin:minify # 只压缩不合并 grunt css:combine # 只合并不压缩

如果不指明目标,只是指明模块,就表示将所有目标依次运行一遍。

grunt cssmin

## 常用模块设置

grunt的模块已经超过了2000个,且还在快速增加。下面是一些常用的模块(按字母排序)。

*

jshint: { options: { eqeqeq: true, trailing: true }, files: [‘Gruntfile.js', ‘lib/
## 参考链接

  • Frederic Hemberger, A build tool for front-end projects
  • Mária Jurčovičová, Building a JavaScript Library with Grunt.js
  • Ben Briggs,Speed Up Your Web Development Workflow with Grunt
  • Optimizing Images With Grunt
  • Swapnil Mishra, Simplifying Chores with Grunt
  • AJ ONeal, Moving to GruntJS
  • Grunt Documentation, Configuring tasks
  • Landon Schropp, Writing an Awesome Build Script with Grunt
  • Mike Cunsolo, Get Up And Running With Grunt
  • Matt Bailey, A Beginner's Guide to Using Grunt With Magento
    转自:http://javascript.ruanyifeng.com/tool/grunt.html

同时推荐:http://www.w3cplus.com/tools/writing-awesome-build-script-grunt.html

concat: { js: { src: [‘lib/module1.js', ‘lib/module2.js', ‘lib/plugin.js'], dest: ‘dist/script.js' } css: { src: [‘style/normalize.css', ‘style/base.css', ‘style/theme.css'], dest: ‘dist/screen.css' } },

js目标用于合并JavaScript文件,css目标用语合并CSS文件。两者的src属性指定需要合并的文件(input),dest属性指定输出的目标文件(output)。

### grunt-contrib-uglify

uglify模块用来压缩代码,减小文件体积。

uglify: { options: { banner: bannerContent, sourceMapRoot: ‘../‘, sourceMap: ‘distrib/‘+name+'.min.js.map', sourceMapUrl: name+'.min.js.map' }, target : { expand: true, cwd: ‘js/origin', src : ‘
Javascript 相关文章推荐
Jquery replace 字符替换实现代码
Dec 02 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 #Javascript
jQuery实现hover合成事件的方法
Aug 06 #Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 #Javascript
jQuery实现动画效果circle实例
Aug 06 #Javascript
jQuery动态星级评分效果实现方法
Aug 06 #Javascript
javascript使用输出语句实现网页特效代码
Aug 06 #Javascript
JS实现霓虹灯文字效果的方法
Aug 06 #Javascript
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
python中对_init_的理解及实例解析
2019/10/11 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
社团活动策划书范文
2014/01/09 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
《石榴》教学反思
2014/03/02 职场文书
家长寄语大全
2014/04/02 职场文书
土建工程师岗位职责
2014/06/10 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
部门2015年度工作总结
2015/04/29 职场文书
介绍信范文大全
2015/05/07 职场文书
养成教育主题班会
2015/08/13 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书