-
Notifications
You must be signed in to change notification settings - Fork 222
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Yeoman的好基友:Grunt #10
Labels
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Yeoman的好基友:Grunt
前端不能承受之痛
1、这是我们的生活
2、究竟痛在哪里
下载难 /(版本)管理难
环境依赖、平台依赖
配置使用难:
3、谁能拯救我们
问题一:grunt是什么
问题二:grunt是什么
曾经grunt是: 命令行工具+构建工具+脚手架工具+预定义任务
grunt-cli:
grunt:
grunt-init:
问题三:为什么使用grunt
哪些优势
demo演示:运行任务
步骤一:安装package
步骤二:运行任务
文件合并
js文件校验
grunt项目的要素
Gruntfile.js:必要
package.json
grunt我们需知道什么
grunt任务配置
方式一:grunt.initConfig
方式二:grunt.config 接口
grunt Task类型
根据任务类型:
根据任务位置:
grunt Task类型:根据任务类型
普通任务
插件任务
grunt Task类型:根据任务位置
内部任务
最常见,Gruntfile.js里定义,可满足绝大部分项目的需求
外部任务
定义方式跟内部任务基本没区别,在Grungfile.js之外定义,用到的时候显式加载即可
加载插件:
加载自定义任务
grunt-inline:一个自定义的grunt插件
grunt-inline作用:将html页面里的声明了__inline标记的
<script>
、<link>
、<img>
等变成内联资源,即:例子:下面这段script标签,声明了__inline,构建阶段会被行内脚本替换
构建前
构建后
grunt-inline:插件创建实战
首先我们看下官方教程里参考教程:http://gruntjs.com/creating-plugins
下载脚手架工具
grunt-init
安装grunt插件模板
在任意空目录下运行
grunt-init gruntplugin
运行
npm install
初始化开发环境声明所有权:其实就是修改package.json里的
name
、version
等字段通过
npm publish
发布插件进入实战
。。。(待填坑)
The text was updated successfully, but these errors were encountered: