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
运维网声明
1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网 享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com