web开发利器之grunt

伴随着项目的多样化和复杂化,前端的代码维护和管理(打包、压缩等等)也越来越难以维护,人为的疏忽往往会导致不可预期的错误,对于这样的错误给我们带来了很多的麻烦和多余的工作量;对于前端的项目携同开发来说,我们每个人均会负责不同板块,将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我大家交流。最后各位大大晚安

web开发利器之grunt,布布扣,bubuko.com

时间: 2024-10-22 16:07:42

web开发利器之grunt的相关文章

web开发工具 http-server , grunt 使用

div#cpmenu {height:200px;float:left;} div#cpcontent {height:200px;width:150px;float:left;} 文章作者:松阳 原文链接:http://blog.csdn.net/fansongy/article/details/44121699 http-server 它是一个简单的服务部署,与Express相比,这货更轻了,它只是一个服务搭建工具,完全可以不安装到项目的目录中.安装使用: npm install -g ht

物联网APP开发利器之APICloud

本文由嵌入式企鹅圈原创团队成员-华南师范大学物联网创新中心Hende_Zhu先生执笔. 前面文章提到,庆科物联系统为APP端开发提供两种SDK,分别用于Native APP开发和基于APICloud平台的混合模式开发,其中主推APICloud进行APP开发.通过APICloud平台,开发者可以通过使用标准web技术即可完成一款高质量的移动应用(包括iOS以及Android),其所具有的开发周期短.功能模块强大的特点得到IoT开发者的喜爱. 除了庆科以外,机智云也提供了用于APICloud开发的模

Android开发利器之pidcat

介绍pidcat: pidcat 是Android届JakeWharton大神开发的一款命令行工具,堪称Android开发利器,它能方便Android程序猿捕获日志,过滤日志,定位程序问题,超级好用.pidcat对不同的Tag,显示不同的颜色,可辨认度很高,支持根据Tag过滤log,命令强大,用法简单易学,比Android默认的logcat命令强大太多.logcat只支持过滤TAG,而不支持应用级别的日志,如果只想输入某个app的日志,貌似不好做到,估计得结合Android的logcat工具等等

Android UI开发神兵利器之Angrytools

最近很多人在问我,个人App开发者如何去设计UI. 其实这是个人开发者最头痛的问题,搞技术的人,确实没法做到面面俱到,不可能花大量的时间去切图,去做原型设计,去做美工. 当然,虽然我们设计不出那么复杂,精巧的UI,但是简单的东西,我们在没有美工的基础上,通过一些手段,也是可以做的不错的,从本文开始,我们将介绍一些关于Android界面开发的神兵利器,正是这些大神们开发的工具,让Coder也能做出一些不是那么见不得人的设计. Angrytools,我们今天的主角,我想当初作者也是被UI弄的Angr

Android UI开发神兵利器之Android Action Bar Style Generator

ActionBar是3.0后的UI设计规范,同时也是Google极力推荐使用的设计风格,如何快速设计一个入眼的ActionBar呢,更进一步,给我们搭好一个入眼的ActionBar的模板吧,于是Android Action Bar Style Generator就出来了:http://jgilfelt.github.io/android-actionbarstylegenerator/ 国际惯例,上图 一目了然,小清新加大方便:大家应该都知道怎么用了吧,so easy! Android UI开发

Android UI开发神兵利器之Icon

好的设计离不开Icon 话不多,介绍2个国外的网站,一个用来找Icon,一个用来搞页面设计 http://dryicons.com/free-icons/ http://www.webdesignshock.com/ 简单易用,纯干货 Android UI开发神兵利器之Icon

后台任务利器之Hangfire

后台任务利器之Hangfire 一.简述 Hangfire作为一款高人气且容易上手的分布式后台执行服务,支持多种数据库.在.net core的环境中,由Core自带的DI管理着生命周期,免去了在NF4.X环境中配置always running的麻烦,真正做到开箱即用. 二.安装 Hangfie官方支持是MsSql和redis,除此之外,可供选择的还有PostgreSql和Mongo.在应用入口项目需要引用Hangfire.AspNetCore和特定持久库,比如使用了MsSql数据库的Hangfi

Web开发人员常犯的10个错误

说到开发一个运行在现代网络中的网站:Web开发人员需要选择虚拟主机平台和底层数据存储,准备编写HTML.CSS和JavaScript用的工具,要有设计执行方式,以及一些可用的JavaScript库/框架.在将任务分解为这几步之后,接下来要做的就简单多了,可以去网上找文章,浏览论坛,看看那些能提供更好的Web体验提示的示例. 然而不管是走哪条路,犯错却是每一个开发人员都不可避免的.虽然有些错误与某一个具体的行为相关,但有些错误却是所有Web开发人员都需要面对的挑战.因此,通过研究,体验和观察,我总

为什么做java的web开发我们会使用struts2,springMVC和spring这样的框架?

今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术框架 由struts2迁移到springMVC,我突然有了一个新的疑问无法得到正确的解释,为什么我们现在做java的web开发,会选择struts2或 者springMVC这样的框架,而不是使用servlet加jsp这样的技术呢?特别是现在我们web的前端页面都是使用velocity这样的模板语 言进行开发,抛弃了jsp,这样的选择又会给我们java的web开发带