Grunt 新手指南
导言
作为一个正在准备从java 后端转大前端,一直都有想着,在js 的世界里面有没有类似于maven或者gradle 的东西..然后,就找到了grunt 这玩意
Grunt是用来干什么的
诸如ant,maven,gradle,make 之流的,那么我们为什么要学这么一个工具了,我们用IDE编程不是好好的吗,要让人去学这么一个工具,那么必然要有这个工具能够为我们搞定什么的原因.
选择Grunt原因
- 管理我们的文件依赖
- 随心所欲的批处理任务
- 整合常用的前端工具,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写脚本而已.
插件推荐
- grunt-contrib-watch
- 监听文件修改
- grunt-curl
- 想curl 下载远程js
- grunt-contrib-clean
- 文件清理工具
- grunt-contrib-cssmin
- css压缩工具
- grunt-contrib-copy
- 文件复杂工具
generated by haroopad
Grunt 新手指南的更多相关文章
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
- 是时候搁置Grunt,耍一耍gulp了
也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...
- 应用Grunt自动化地优化你的项目前端
在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...
- Grunt(页面静态引入的文件地址的改变探究)-V2.0
相关插件的引用: grunt-usemin 对页面的操作 grunt-contrib-cssmin 压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...
- Grunt基本使用-V1.0
浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...
- nodejs、npm、grunt——名词解释
最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
随机推荐
- update select
update中加入select 最常用的update语法是:UPDATE <table_name>SET <column_name1> = <value>, SET ...
- sublime构建执行go程序真爽
1.安装gosublime插件 2.直接在sublime下调试运行共程序,不用去cmd了: 选择编译系统,编译,出现下面的模拟命令行,直接执行go的命令即可,比如go run process.go,结 ...
- 手写DataSet,DataTable
一:DataSet DataSet ds = new DataSet();//创建DataSet DataTable dt = new DataTable();//创建一个DataTalbe dt.C ...
- jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
- MySQL调优参数
key_buffer_size 含义:用于索引块的缓冲区大小,增加它可得到更好处理的索引(对所有读和多重写). 影响:对于MyISAM表的影响不是很大,MyISAM会使用系统的缓存来存储数据,所以大量 ...
- Java写的爬虫的基本程序
这是一个web搜索的基本程序,从命令行输入搜索条件(起始的URL.处理url的最大数.要搜索的字符串),它就会逐个对Internet上的URL进行实时搜索,查找并输出匹配搜索条件的页面. 这个程序的原 ...
- 后台向前台输出 换行“\n”
MVC 中后台向前台输出 "\n"总是报错 因为后台向前台输出 "\n" 后,前台出现换行 eg: "这里是\n换行" var str=& ...
- Xamarin开发Android笔记:背景操作
使用Xamarin开发Android UI的时可能会遇到一些场景背景的问题,虽然可以利用多层或直接使用图片背景来完成,但这样会增加不少的资源消耗,最终导致内存溢出的情况.最好的方法还是利用内部方法或代 ...
- 【Win10】UAP/UWP/通用 开发之 SplitView
[Some information relates to pre-released product which may be substantially modified before it's co ...
- 编写高质量代码改善C#程序的157个建议读书笔记【11-20】
章节索引 建议11:区别对待 == 和Equals 建议12:重写Equals也要重写GetHashCode 建议13:为类型输出格式化字符串 建议14:正确实现浅拷贝和深拷贝 建议15:使用dyna ...