导言

作为一个正在准备从java 后端转大前端,一直都有想着,在js 的世界里面有没有类似于maven或者gradle 的东西..然后,就找到了grunt 这玩意

Grunt是用来干什么的

诸如ant,maven,gradle,make 之流的,那么我们为什么要学这么一个工具了,我们用IDE编程不是好好的吗,要让人去学这么一个工具,那么必然要有这个工具能够为我们搞定什么的原因.

选择Grunt原因

  1. 管理我们的文件依赖
  2. 随心所欲的批处理任务
  3. 整合常用的前端工具,js混淆,文件合并压缩.

说了这么多,上面就是我们为什么要选择grunt.js 作为我们项目构建的工具,如果你没有任何项目构建的概念,我建议了就不要看有关grunt的任何资料了,包括本文.因为,你看不懂我接下来我要写东西,也看不懂任何有关grunt相关资料,所以,就不要浪费时间了.

让Grunt 干活

如果,你之前有接触过构建工具,或者你现在有项目构建的概念,那么任务(tasks)这个概念想必理解起来不会有太大的难度了.

创建我们第一个任务

只要在我们的Gruntfile.js 文件写上这么几句

module.exports = function (grunt) {
grunt.registerTask('test', 'my first tasks', function () {
grunt.log.write('Hello World!').ok();
});
}

接着我们只要在当前目录运行 grunt test

就能看到控制台输出

Hello World.

接下来咱们有个node 环境就可以想干嘛的就干嘛了..停住!如果只是这样,这跟我们写个shell脚本有什么区别呢?实际上grunt跟shell 脚本没什么区别,只是grunt有一个node 运行环境,可以比写shell脚本简单那么一些,如果你已经是shell脚本达人,我觉得没有再学grunt必要了.

任务的任务

有时候,我们有很多任务,不过这里任务,都可以归类为一中,我们就需要注册一个多任务来处理这种情况,例如,文件的操作就有,创建,打开,重命名,这些任务都可以归类为文件操作任务

module.exports = function (grunt) {
grunt.initConfig({
file: {
create: 'source file',
open: 'open file',
delete: 'delete file'
}
});
grunt.registerMultiTask('file', 'Log stuff.', function () {
grunt.log.writeln(this.target + ': ' + this.data);
});
}

这个时候我们运行的时候,就会看到如下接口

grunt file:create

create: ‘source file’

grunt file:open

open: ‘open file’

grunt file:delete

delete: ‘delete file’

那么在我们自定义多任务的时候,可以通过this.target 获得当前任务命令,然后通过this.data 获取到我们的配置值,接下来就是发挥你的想象力的时候了.

总结

实际上grunt不是什么神奇的时候,它最不过是一个运行在node的一个命令行工具,可以方便我们用js写脚本而已.

插件推荐

  1. grunt-contrib-watch

    • 监听文件修改
  2. grunt-curl
    • 想curl 下载远程js
  3. grunt-contrib-clean
    • 文件清理工具
  4. grunt-contrib-cssmin
    • css压缩工具
  5. grunt-contrib-copy
    • 文件复杂工具

generated by haroopad

Grunt 新手指南的更多相关文章

  1. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  2. grunt配置任务

    这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...

  3. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  4. 是时候搁置Grunt,耍一耍gulp了

    也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...

  5. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  6. Grunt(页面静态引入的文件地址的改变探究)-V2.0

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  7. Grunt基本使用-V1.0

    浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...

  8. nodejs、npm、grunt——名词解释

    最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...

  9. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

随机推荐

  1. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  2. 实现毛玻璃模糊效果/DRNRealTimeBlur

    四种方法:1.美工出图  2.coreImage框架,高斯效果 3.ToolBar,覆盖在view上边 //1.添加图片 self.imageView.image = [UIImage imageNa ...

  3. JavaScript-setInterval-周期性行定时器-倒计时

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 如何卸除SDL TRADOS中的自开发插件

    去年学着用SDL的例子编译了一个名为SimpleText的插件,每次打开TRADOS 2014时都要提示三次加载插件,很是烦人.但我想卸掉时,却无从下手,不知道怎么办.这个问题纠缠了我很久,今晨心性比 ...

  5. 关于mysql占用CPU过高,问题解决

    使用SHOW PROCESSLIST 查看 原因: 使用了 一个触发器 不断的去删除日志,保证每个用户的日志只有10条 去掉之后,CPU使用率从97% 降到了 %. 利用show columns fr ...

  6. OpenGL(一)——入门学习

    概要 1. 为什么使用OpenGL 2. 在VS2008上搭建环境 3. 一个简单的例程 OpenGL相较于DirectX的优越性 1. 与C语言紧密结合 OpenGL命令最初就是用C语言函数来进行描 ...

  7. Webpack使用教程一

    过去数年间,web开发已经从包含少量JavaScript代码的应用发展到到拥有复杂JavaScript代码和代码之间依赖关系树的应用.手动维护这些复杂的代码依赖关系是很麻烦的.Webpack能分析项目 ...

  8. java servlet 代码样例 (demo)

    今天又搞了下jsp +servlet 的代码样例,感觉虽然搭了好多次,可是每次还是不记得那些参数,都要去网上搜索,索性自己把这次的简单demo给记录下来,供下次使用的时候直接复制吧. 这个web逻辑 ...

  9. WebApi 服务监控

    本文主要介绍在请求WebApi时,监控Action执行的时间,及Action传递的参数值,以及Http请求头信息.采用log4net记录监控日志,通过日志记录的时间方便我们定位哪一个Action执行的 ...

  10. PL/SQL 创建视图语法

    使用create view 语句创建视图 create [or replace][force | noforce] view [user.] viewName (column [,column2].. ...