本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> web前端技术
立即购买视频教程 Grunt.js学习教程
夜鹰教程网 来源:www.yyjcw.com 日期:2018-4-27 23:23:29
Grunt.js学习教程

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理。在JavaScript的世界里,随着Node.js的流行,JavaScript原生的构建工具已经成为可能。


Grunt.js是基于Node.js的自动化任务运行器。Grunt.js结合NPM的包依赖管理,完全可以媲美Maven。Grunt.js天然适合前端应用程序的构建——不仅限于JavaScript项目,同样可以用于其他语言的应用程序构建。越来越多的JavaScript项目已经在使用Grunt,其中最大的使用者包括著名的jQuery项目。


Grunt的生态系统在迅速的成长,目前已经有上百种插件发布在NPM上可供选择。同时,任何人都可以方便的发布自己的插件到NPM上供其他人使用。


相关厂商内容


滴滴出行iOS端瘦身实践

超级App的实时性能监控与性能优化实践 微信图片视频背后的EB级存储引擎设计 漏斗模型:京东物流系统高并发架构演进之路 如何开发一个商业智能推荐系统?

相关赞助商


 

ArchSummit深圳2017,7月7-8日,深圳·华侨城洲际酒店,精彩内容抢先看


Grunt没有像Maven那样强调构建的生命周期,各种任务的执行顺序可以随意配置。Grunt本身仅是一个执行器,大量的功能都存在于NPM管理的插件中。特别是以grunt-contrib-开头的核心插件,覆盖了大部分的核心功能,比如handlebars,jade,less,compass,jshint,jasmine,clean,concat,minify,copy,uglify,watch,minify,uglify等。


通过提供通用的接口以进行代码规范检验(Lint)、合并、压缩、测试及版本控制等任务,Grunt使入门门槛大大降低了。


安装


Grunt目前的最新版本为v0.4版。相比v0.3版,Grunt本身不再作为一个整体全局模块安装,而是分为了三个部分:grunt,grunt-cli,grunt-init。


grunt-cli用于命令行启动Grunt,必须作为全局模块安装:


npm install -g grunt-cli


grunt-init是可选的,用于以命令行新建Grunt项目模板,必须作为全局模块来安装:


npm install -g grunt-init


Grunt核心作为项目或插件的依赖包而单独存在,避免由于不同的插件依赖的Grunt版本不同而造成的冲突。


新建项目工程


在命令行中执行  grunt init


无论新建项目是应用程序还是一个Grunt插件,Grunt生成的工程都是一个标准的NPM模块。


新工程目录下有两个文件非常重要:


package.json: NPM的发布配置文件,包含了包依赖信息和项目工程的元数据。熟悉Node.js的读者应该不陌生。


gruntfile.js: Grunt配置文件,用于配置或定义Grunt任务,以及加载Grunt插件等。 


Grunt任务配置


所有的任务配置都存在gruntfile.js中。作为JavaScript源文件,其配置信息以JSON对象的方式来存放,并可以使用JS函数来动态生成,比Maven的XML配置方式更加简洁和富有灵活性。一份典型的gruntfile如下:


module.exports = function(grunt) {



  // 项目配置信息.


  grunt.initConfig({


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


    uglify: {


      options: {


        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'


      },


      build: {


        src: 'src/<%= pkg.name %>.js',


        dest: 'build/<%= pkg.name %>.min.js'


      }


    }


  });



  // 加载"uglify"插件..


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



  // 注册默认任务.


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



};

可以看到,它就是一个标准的Node.js模块定义。


插件配置:形如JSON对象的配置信息,包括定义文件操作的源与目标,标志变量等。Grunt还提供了一些模板变量用于插入常用的信息,如日期时间等。


加载插件:通过grunt.loadNpmTask(),显式地加载外部Grunt插件。


注册自定义任务。用法见下文“自定义任务”。可以注册任意的任务链,但至少注册一个默认任务链。


运行


进入项目的根目录,在命令行执行grunt 即可根据配置文件来执行所有的自动化任务。


$ grunt


Running "jshint:gruntfile" (jshint) task


1 file lint free.


 


Running "jshint:src" (jshint) task


1 file lint free.


 


Running "uglify:dist" (uglify) task


File "dist/ba-tiny-pubsub.min.js" created.


Uncompressed size: 389 bytes.


Compressed size: 119 bytes gzipped (185 bytes minified).


 


Done, without errors.



$

也可以选择性地执行某些任务,甚至给不同的插件附加命令行参数:


例如,只执行clean插件的dist子任务和jasmine插件的所有任务:


grunt clean:dist jasmine


流行的插件


v0.4版以后,各种常用插件基本都归入了 grunt-contrib-xxx系列。下面介绍几个比较常用的插件:


grunt-contrib-clean: 用于清理指定文件(夹),一般是构建之前或之后进行


grunt-contrib-coffee: 将CoffeeScript编译为JavaScript


grunt-contrib-compass: 调用Compass工具生成CSS文件


grunt-contrib-concat: 连接源文件,减少HTTP请求


grunt-contrib-copy: 复制文件(夹)


grunt-contrib-handlebars: 将handlebars模板预编译为JST文件,提高运行时性能


grunt-contrib-jasmine: 借助Jasmine在PhantomsJS中运行单元测试,结合grunt-template-jasmine-istanbul,还能实现单元测试覆盖率计算


grunt-contrib-jshint: JS代码质量检查工具,类似jsLint


grunt-contrib-watch: 监视磁盘文件,一旦更改就会重新运行指定的任务,例如使http服务器重新加载源文件


grunt-contrib-ugligy: 压缩JS源文件,提高运行时性能


自定义任务


利用Grunt的API可以很方便的创建自定义任务和插件。两种方式所用到的API完全一致,只不过自定义任务在写在项目的gruntfile.js中,而插件可以自主发布。


任务分为两种:


grunt.registerTask():以JS函数的形式定义的一个独立的任务,可以从命令行传入参数、调用Grunt API、 或者仅仅是作为别名(alias),链式地调用其他任务。


grunt.registerMultiTask():与registerTask()函数不同的是,同一任务可以同时存在多组配置目标(target),Grunt会自动地遍历读取每组配置目标分别执行,也可以指定仅以某个配置来单独执行任务。这对于文件操作任务比较常用。例如要使用清理文件的clean插件,可能会有两组配置,分别用于清理打包文件夹和清理单元测试临时文件夹。此外,jshint,concat,uglify等也都是MuitiTask类型。


API扩展


无论是自定义任务还是创建独立的Grunt插件,都少不了要用到Grunt提供的API。其中一些是对Node.js功能的扩展,另一些是满足Grunt的特殊需要:


grunt.config: 读取和管理gruntfile中的配置信息


grunt.event: 自定义事件


grunt.fail: 用于异常处理时发出警告或强制终止任务


grunt.file: 用于磁盘文件管理的扩展函数,包括read,write,copy,delete,mkdir,expand,exist,path等


grunt.log: Grunt自有的log功能


grunt.option: 用于从命令行中读取参数


grunt.task: 用于注册自定义任务和加载外部任务


grunt.template: 处理gruntfile中的模板变量,以及提供了常用的日期模板辅助(helper)函数,包括template.data,template.today


grunt.util:  各种公用工具函数,以及集成了各种外部库,包括Lo-Dash,Async,Hook等


小结


本文介绍了基于Node.js的自动化构建工具Grunt.js,展示了其基本组成、安装步骤,配置文件示例以及运行示例,并且列出了流行的Grunt插件以及其API扩展接口。 


复制链接 网友评论 收藏本文 关闭此页
上一条: Git 常用命令介绍  下一条: webpack学习指南
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
XML Schema学习笔记(1)
XML Schema学习笔记(2)
C#对XML文档的操作
ASP操作XMLDOM
XML入门教程:分析XML
百度新闻开放协议XML文档制作方法…
XSL 语言
用RSS做五分钟一自动更新的网站
XML入门教程:文档类型声明
XML教程:通过一个例子来学习XML的…
XML节点相关知识
把XML文件绑定到列表控件
XML+XSLT+CSS+JQuery+WebService组…
XHTML头部Doctype声明必不可少!
历数Firefox2.0对XML处理的改进
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
金三银四跳槽季—前端面试汇总
Sublime常用插件汇总(全)
大前端学习路线
如何克服前端学习进步慢的问题
web前端常见基础问题
阿里前端面试经历(转载)
Web前端需要掌握技术汇总(转)
ESLint详解-让你的代码更加规范
通过userAgent适配 PC端和移动端网…
js操作DOM中需要注意的问题
Promise编程简介
Emmet语法和实例
新手所必须掌握的前端知识汇总
移动端视口的相关概念及其适配方案…
上传图片立即预览
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3