web开发利器之grunt

标签: web 开发 grunt | 发表时间:2014-07-08 08:01 | 作者:nx8823520
出处:http://blog.csdn.net

伴随着项目的多样化和复杂化,前端的代码维护和管理(打包、压缩等等)也越来越难以维护,人为的疏忽往往会导致不可预期的错误,对于这样的错误给我们带来了很多的麻烦和多余的工作量;对于前端的项目携同开发来说,我们每个人均会负责不同板块,将JS、CSS拆解成各自个的模块单独开发,为了方便管理这些模块均为独立的文件,而为了页面加载速度(增加了文件个数这时也产生过多的Http请求,影响页面加载速度)我们又不得不将这些文件进行合并、压缩等等,早期我们会用YUI做这些事但如今我们需要的却更多(如项目的源代码做单元测试和回归测试,以及JS语法自动化检测等等)YUI开始无法满足我们需求,这时grunt横空出世,它众多插件和灵活性满足了我们的需求,对于需要反复重复的任务,例如压缩、编译、单元测试、代码检查等,轻而易举的完成,今天主要说下grun的用法。

grunt不难,它主要依赖的是nodeJS的npm包管理器,和一个JSON及一个JS文件,先说说npm包管理器,玩过nodeJS的对它应该都很熟悉,在这里我们只需要安装nodeJS即可(新版的nodeJS基本都集成了npm),至于nodeJS的安装可以 点这里,这这篇文章就不做详细介绍,安装完后打开命令管理器(nodeJS安装完后的终端)输入:

npm install -g grunt-cli

在grunt中安装全局命令接口;

然后说说JSON,确切的说应该是package.json,它主要用于安装grunt依赖的插件,和nodeJS的pakeage.json一样,在执行npm install时,它就会作为主入口,npm通过这JSON中的devDependencies去安装这些插件,具体的关于package大家可以 点击这里看看。

最后也就是最重要和最难的gruntfile.js了,它是用于配置和定义任务的一个主文件,grunt运行任务接口主要就时依赖它了,它是由包含函数、任务配置、任务加载、自定义任务四部分组成,如下:

    // 包装函数
module.exports = function(grunt) {

  // 任务配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 任务加载
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 自定义任务
  grunt.registerTask('default', ['uglify']);

};

其中包装函数没什么好说的,它和backbone这样的写法差不多,主要用于定义一个输出模块,在这个模块中处理grunt的相关事务;而任务配置大家可以看看 这里;任务加载则是加载你需要的插件如concat、jshint、uglify(合并、检测、压缩);自定义任务则是自定义grunt的执行命令;

具体的大家可以 点击这里,把代码clone到本地自己执行跑到看下,毕竟手动理解会比文字描述容易明白到多。好了今天写到这里吧,其实这篇文章描述多不是很多,给的更多是外链和自己git上的一个测试代码,多动动手再去结合理解比光看不练的好,大家想深入看看可以看下grunt的官网,另外如果碰到什么可以mail我大家交流。最后各位大大晚安

作者:nx8823520 发表于2014/7/8 0:01:23 原文链接
阅读:101 评论:0 查看评论

相关 [web 开发 grunt] 推荐:

web开发利器之grunt

- - CSDN博客Web前端推荐文章
grunt不难,它主要依赖的是nodeJS的npm包管理器,和一个JSON及一个JS文件,先说说npm包管理器,玩过nodeJS的对它应该都很熟悉,在这里我们只需要安装nodeJS即可(新版的nodeJS基本都集成了npm),至于nodeJS的安装可以 点这里,这这篇文章就不做详细介绍,安装完后打开命令管理器(nodeJS安装完后的终端)输入:.

利用 Grunt (几乎)无痛地做前端开发 (一)

- - 阿里巴巴(中国站)用户体验设计部博客
如果你想开发一个js应用,甭管多简单,都要先创建整个宇宙. 来看看我们的Javascript小宇宙:. 确定如何根据需求、功能划分模块,如何将代码分成多个文件开发,合成一个发布. 保证上一条的同时,使用 Coffeescript、SCSS/LESS 等技术. 保证上2条的同时,想想怎么在浏览器的刷新后一切都最新.

Web开发入门(转载)

- linchanx - Starming星光社最新更新
Web应用的竞争异常激烈,开发难度也是入门容易做好很难,所以第一次开发的应用不成功是很正常的事情. 不过这正是一个积累的过程,反正你需要的只是电脑和少量服务器经费,所以多磨练几次,水平自然会提高. 2, 习惯阅读及查阅英文资料. 前沿信息基本源自美国,翻译的东西不及时,不全,很多水平不高,再加之中文原创资料毕竟很有限,因此是否能熟练地查阅英文资料决定了你获取信息的 及时性和质量.

Spring MVC 与 web开发

- - 码蜂笔记
项目组用了 Spring MVC 进行开发,觉得对里面的使用方式不是很满意,就想,如果是我来搭建开发环境,我会怎么做. 下面就是我的想法,只关注于 MVC 的 View 层. 现在基本上都是用 ajax 来调用后台接口,拿到 json格式的数据再展示,有的人直接返回数据,却没有考虑异常的情况,我觉得返回的报文里必须包含表示可能的异常信息的数据和业务响应数据.

Web开发者必备:Web应用检查清单

- - ITeye博客
想做一个高质量的Web应用,前前后后要做的事情非常多. 国外开发者 Ata Sasmaz 为 Web 开发者制作分享了一份检查清单,包括应用开发、性能、安全、分析、可用性、可靠性、转换策略、竞争策略这些方面需要注意的事项. 清单内容可能不全面,欢迎大家在评论中补充. JavaScript 允许捕获异常.

Web应用程序的开发步骤

- xxg - 月光博客
  如今已进入了web2.0高速发展的互联网时代,各种互联网的Web应用程序如雨后春笋般出现. 那么作为一名Web开发人员,怎样去开发一款优秀的Web应用程序呢. 这个问题没有一个简单的答案,甚至那些教育机构都未必能清楚的知道. 所以,像大多数在这个领域里的web开发人员一样,我们只是通过去做,去实验才学会了这些.

Web开发人员速查卡

- abcd - 酷壳 - CoolShell.cn
无论你是多牛的程序员,你都无法记住所有的东西. 而很多时候,查找某些知识又比较费事. 所以,网上有很多Cheat Sheets,翻译成小抄也好 ,速查卡也好,总之就是帮你节省 时间的. 之前给大家介绍过Web设计的速查卡、25个jQuery的编程小抄,还有程序员小抄大全,今天转一篇开发人员的速查卡,源文在这里.

平台是Web开发的未来吗?

- iyuan - 伯乐在线 -博客
  导读:本文是Arjun Khanna关于平台的出现以及它们如何简化Web开发的个人分析,也分析了平台的缺点和它们能够继续存在的因素.   即便现在大部分网站开发人员所构建的网站在结构上非常相似,或是至少在布局方面会有一些根本的共同之处,如果你问一下,他们大多会说他们还有一大堆的苦差使要头疼呢. 虽然客户几乎都要求顶上有横幅,导航条在左边,页面布局不超过三列,但是这并不使他们的工作更简单.

Web开发框架安全杂谈

- goodman - 80sec
最近框架漏洞频发,struts任意代码执行、Django csrf token防御绕过、Cakephp代码执行等等各大语言编程框架都相继暴出高危漏洞,这说明对于编程框架的安全问题已经逐渐走入安全工作者的视线. Web开发框架就相当于web应用程序的操作系统,他决定了一个应用程序的模型结构和编程风格.

最好的开源Web开发资源

- 陈晖 - Solidot
51开源社区 写道 "B2bweb.fr对“开源中最好的Web开发的资源(中文)进行了汇总.