Yeoman的好基友:Grunt
grunt介绍
前端不能承受之痛
1、这是我们的生活
- 文件压缩:YUI Compressor、Google Closure
- 文件合并:fiddler + qzmin
- 文件校验:jshint
- 雪碧图:cssGaga
- sass编译:sass/compass
- 文件打包:require + r.js / seajs + wpm
- 。。。
2、究竟痛在哪里
下载难 /(版本)管理难
YUI Compressor:https://github.com/yui/yuicompressor
Google Closure:https://code.google.com/p/closure-compiler/downloads/list
jshint:http://www.jshint.com/
其他:。。。
环境依赖、平台依赖
YUI Compressor:JDK
fiddler/qzmin:win平台
sass/compass:ruby
配置使用难:
系统参数设置
工具自己的命令、参数
3、谁能拯救我们
grunt
问题一:grunt是什么
- 官方定义:The JavaScript Task Runner
- 民间版本:基于任务的JavaScript项目构建工具
- 关键词:JavaScript、Task、Runner
问题二:grunt是什么
曾经grunt是: 命令行工具+构建工具+脚手架工具+预定义任务
- 命令行工具(grunt-cli)
- 构建工具(grunt)
- 脚手架工具(grunt-init)
- 预定义任务(concat、uglify、jshint等)
grunt-cli:
The Grunt command line interface.
Note: The job of the grunt command is to load and run the version of Grunt you have installed locally to your project, irrespective of its version.
grunt:
The JavaScript Task Runner
grunt-init:
Grunt-init is a scaffolding tool used to automate project creation.
问题三:为什么使用grunt
哪些优势
环境/平台依赖小(node环境、grunt-cli)
便捷的下载/版本管理(npm)
插件丰富,极易扩展(目前300++)http://gruntjs.com/plugins
活跃的社区
demo演示:运行任务
步骤一:安装package
npm install
步骤二:运行任务
文件合并
grunt dist
js文件校验
grunt jshint
grunt项目的要素
Gruntfile.js:必要
Grunt任务的主入口文件,主要作用在于任务的定义与配置
package.json
项目组件依赖的描述文件,非必要
grunt我们需知道什么
- 基于nodejs(npm)
- 核心是任务、任务配置(配置即任务)
- 大部分是文件操作 (基于blob、minmath的文件匹配)
- 一系列API:file、config、log、task、option等
- 自定义插件
grunt任务配置
方式一:grunt.initConfig
grunt.initConfig({
clean: {
dev: [ 'dev/' ],
},
jshint: {
all: ['dist/js/**/*.js']
}
});
方式二:grunt.config 接口
grunt.config.set('jshint', {
all: ['dist/js/**/*.js']
});
grunt.task.run('jshint');
grunt Task类型
根据任务类型:
- 普通任务
- 插件任务
根据任务位置:
- 内部任务:Gruntfile.js里定义
- 外部任务:Gruntfile.js之外定义
grunt Task类型:根据任务类型
普通任务
任务定义
grunt.task.registerTask('hello', '一个无聊的demo', function() {
console.log( '大家好,我是grunt任务!');
});
运行任务
grunt hello
插件任务
任务内部
grunt.registerMultiTask('inline', "同样是很无聊的demo", function() {
var files = this.filesSrc; // 用户
files.forEach(function(filepath){
console.log( '输出文件路径:'+ filepath );
};
});
任务配置
grunt.initConfig({
'inline': {
test: {
src: [$config.distPath+'**/*.html']
}
}
});
运行任务
grunt inline
grunt Task类型:根据任务位置
内部任务
最常见,Gruntfile.js里定义,可满足绝大部分项目的需求
grunt.task.registerTask('hello', '一个无聊的demo', function() {
console.log( '大家好,我是grunt任务!');
});
外部任务
定义方式跟内部任务基本没区别,在Grungfile.js之外定义,用到的时候显式加载即可
加载插件:
grunt.loadNpmTasks('grunt-cdn');
加载自定义任务
grunt.task.loadTasks('proj-task/core');
grunt-inline:一个自定义的grunt插件
grunt-inline作用:将html页面里的声明了__inline标记的<script>
、<link>
、<img>
等变成内联资源,即:
- script:内联脚本
- link:内联样式
- img:base64
例子:下面这段script标签,声明了__inline,构建阶段会被行内脚本替换
构建前
<script type="text/javascript" src="modules/common/js/nohost.js?__inline"></script>
构建后
<script>
void function(){setTimeout(function(){var b=document.cookie.match(/(^| )nohost_guid=([^;]*)(;|$)/);if(!b?0:decodeURIComponent(b[2])){var b="/nohost_htdocs/js/SwitchHost.js?random="+Math.random(),c=function(a){try{eval(a)}catch(b){}window.SwitchHost&&window.SwitchHost.init&&window.SwitchHost.init()},a=window.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest;a.open("GET",b);a.onreadystatechange=function(){4==a.readyState&&((200<=a.status&&300>a.status||304===a.status||1223===a.status||
0===a.status)&&c(a.responseText),a=null)};a.send(null)}},1500)}();
</script>
grunt-inline:插件创建实战
参见 开源一小步,前端一大步 第二部分《插件编写及发布》
进入实战
@TODO
Yeoman的好基友:Grunt的更多相关文章
- 前端工程化开发之yeoman、bower、grunt
上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...
- 前端自动化学习笔记(一)——Yeoman,bower,Grunt的安装
最近看视频学习了前端自动化的一些知识,确实让我大开眼界.感觉前端越来越神器了.同时跟着视频自己也尝试运用了一些工具去构建前端项目,但是中间遇见了很多坑,磕磕绊绊的才实现了一点功能,所以打算记录一下学习 ...
- 2015 前端[JS]工程师必知必会
2015 前端[JS]工程师必知必会 本文摘自:http://zhuanlan.zhihu.com/FrontendMagazine/20002850 ,因为好东东西暂时没看懂,所以暂时保留下来,供以 ...
- [ 学习路线 ] 2015 前端(JS)工程师必知必会 (2)
http://segmentfault.com/a/1190000002678515?utm_source=Weibo&utm_medium=shareLink&utm_campaig ...
- Visual Studio 2015 开发 ASP.NET 5 有何变化?
本篇博文目录: ASP.NET 5 模版 ASP.NET 5 目录结构 前端管理工具 无编译开发 Microsoft Git Provider 智能感知和错误信息 Smart Unit Testing ...
- 2014 Visual Studio Contact(); 直播笔记
昨天微软干了几件了不起的事:.NET开发环境将开源.跨平台支持(Mac OS X和Linux).多设备支持(WP.Android和iOS)和Visual Studio免费(Visual Studio ...
- AngularJS+NodeJS环境搭建
需要安装的软件: node-v0.12.7-x64.msi python-2.7.10.amd64.msi Git-2.5.1-64-bit.exe (注意:Git安装时,需要选择的步骤) 安装位置 ...
- Visual Studio Contact
Visual Studio Contact(); 直播笔记 昨天微软干了几件了不起的事:.NET开发环境将开源.跨平台支持(Mac OS X和Linux).多设备支持(WP.Android和iOS ...
- angularjs框架及其生态环境 --待续
angular的MVVM框架结构: 1. app, 2.routes, config, 3.module, 4.Controller, $scope,controller参数,事件 ...
随机推荐
- 系统升级win7 sp1后,ado,MSJRO.tlh error 问题
MSJRO.tlh() : error C2501: '_RecordsetPtr' : missing storage-class or type specifiers MSJRO.tlh() : ...
- 【13】python time时间模块知识点备查
表示时间的三种形式 # 时间模块 '''UTC(世界协调时间):格林尼治天文时间,世界标准时间,在中国来说是UTC+8DST(夏令时):是一种节约能源而人为规定时间制度,在夏季调快1个小时 时间的表示 ...
- SP--report存储过程
USE [edison_prc] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO ),),),),),@day1 int,@day2 int) ...
- 第二次SDN上机作业
SDN第二次作业 1.安装floodlight fatter树在floodlight上的连接显示 2.生成拓扑并连接控制器floodlight,利用控制器floodlight查看图形拓扑 floodl ...
- java如何对map进行排序详解(map集合的使用)
今天做统计时需要对X轴的地区按照地区代码(areaCode)进行排序,由于在构建XMLData使用的map来进行数据统计的,所以在统计过程中就需要对map进行排序. 一.简单介绍Map 在讲解Map排 ...
- OpenCV——Brisk特征检测、匹配与对象查找
检测并绘制特征点: #include <opencv2/opencv.hpp> #include <opencv2/xfeatures2d.hpp> #include < ...
- SpringBoot实用技巧札记
目录 如何手工设置SpringBoot内嵌的Tomcat启动端口号(port) 如何解决Eclipse.Properties中文乱码的问题 如何手工设置SpringBoot内嵌的Tomcat启动端口号 ...
- Python2.7-io
io 模块,用于处理流数据,在 python2 下,是内置 file 对象的另一种选择,在 python3 下,此模块是默认的文件和流数据的接口. 1.模块继承关系 IOBase--RawIOBase ...
- Working With JSON
JavaScript对象表示法(JSON)是用于将结构化数据表示为JavaScript对象的标准格式,通常用于在网站上表示和传输数据(例如从服务器向客户端发送一些数据,因此可以将其显示在网页上). J ...
- (二) DRF 视图
DRF中的Request 在Django REST Framework中内置的Request类扩展了Django中的Request类,实现了很多方便的功能--如请求数据解析和认证等. 比如,区别于Dj ...