AngularJs——grunt神器的使用
前面我们已经知道了如何安装grunt,本章节给各位道友介绍如何使用 grunt 的插件,grunt是重点在于如何配置使用 Gruntfile.js,官网上也有很多范例。
1,包装函数
module.exports=function(grunt){}
我们的代码要包括在这个方法里。
2,任务配置
// 包装函数
module.exports = function(grunt) { // 任务配置
grunt.initConfig({ })
}
在这里我们需要初始化参数,这是grunt的最主要的部分
3,导入包文件
// 包装函数
module.exports = function(grunt) { // 任务配置
grunt.initConfig({
pkg:grunt.file.readJSON('package.json')
})
}
使用 grunt.file.readJSON('package.json') 可以把外部的package.json文件引入到 gruntfile.js,并生成一个JSON格式的对象可以访问 package.json里的数据,我们如果使用 grunt.file.readYAML() 生成 YAML格式的对象。
4,配置任务
// 任务配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: { // concat 任务的配置 },
uglify: { // uglify 任务的配置 }, my_property: 'whatever', my_src_files: ['foo/*.js', 'bar/*.js']// 其他与任务无关的属性
})
任务配置定义在 Gruntfile 和 grunt.intiConfig()方法中,配置主要是以任务命名的属性,也可以包含其他属性,但是不能与任务所需要的属性重合
5,任务和目标
当任务运行的时候(下面介绍的加载任务之后),Grunt会从同名的属性中查找配置(即从initConfig)。多重任务可以有多个配置,每个任务使用任意命名的目标定义。
grunt.initConfig({
concat: {
foo: {
// concat 任务的目标 "foo"
},
bar: {
// concat 任务的目标 "bar"
},
},
uglify: {
bar: {
// uglify 任务的目标 "bar"
},
},
});
运行 grunt concat:foo 或 grunt concat:bar 只会处理指定的目标配置,而运行 grunt concat都会运行
6,任务加载
一些任务,比如合并,压缩和校验等都可以作为 grunt插件。只要插件被指定 package.json中,并且通过 npm install 安装好,就可以在 gruntfile中加载:
AngularJs——grunt神器的使用的更多相关文章
- AngularJS——grunt神器的安装
前言: 刚开始学 angularJS,在慕课网上看的大漠老师的视频(http://www.imooc.com/learn/156),里面刚开始讲述了前端开发-调试-测试所使用的手段和工具,本人对前端开 ...
- [Whole Web] [AngularJS + Grunt] Using ng-html2js to Convert Templates into JavaScript
ng-html2js takes .html templates and converts them into strings stored in AngularJS's template cache ...
- AngularJS表格神器“ui-grid”的应用
HTML: (代码仅用于解释得更清楚,并未完全展示) <!doctype html> <html ng-app="app"> <head> & ...
- 发现个很有意思的angularjs +grunt 复习项目
最近作运维工作 docker 接触到一个开源webui dockerui 原项目地址 https://github.com/crosbymichael/dockerui 用angular框架实现,项目 ...
- 【前端自动化】Gulp的使用(一):安装gulp
作为一个.NET码农,在前端高速发展的时代,深深感觉自己那么点“前端”技术不够看,比如开发出来的js css等文件庞大,不便于管理,还记得以前的开发就是累加 html css jquery, 现 ...
- 使用Yeoman,Grunt和Bower开发AngularJS(译)
使用Yeoman产生AngularJS的主要骨架 使用Grunt加速开发和帮助执行 使用Bower来加入第三方插件和框架——third party plugins/frameworks 一.准备工作 ...
- [Grunt + AngularJS] Using ng-annotate for min-safe AngularJS
When you minify your code with a tool like Uglify, the resulting minified file will rename variables ...
- Angularjs Nodejs Grunt 一个样例
做了一个简单的演示样例,目的是记录环境配置以及这套框架的结构流程. 1.配置环境 默认nodejs已安装. 安装下面模块:express(nodejs框架),grunt(javascript task ...
- AngularJS介绍
AngularJS介绍–AngularJS的前世今生 AngularJS是什么 在Web开发领域,我们一般使用HTML作为前端页面元素的声明式语言,使用CSS技术作为展示样式的描述语言,JavaScr ...
随机推荐
- C++ 基本知识
无论父类与子类的析构函数是否是virutal,子类的析构函数都会调用父类的析构函数 调用构造函数是与构造函数顺序相反,先子类后基类,否则如果基类先析构,子类的有些资源已经不存在了,会出错. 在C++中 ...
- 如何对ZBrush中面部进行快速布线
面部布线的最重要目的是为了表情动画.人物内心的各种不同的心里活动,主要是通过面部表情反映出来.而面部变化最丰富的地方是眼部(眉毛)和口 部,其他部位则相应的会受这两部分的影响而变化.对于面部表情,必须 ...
- 【转载】jQuery Validate验证框架 + CKEditor 无法验证问题的解决方法
文章1:http://yangzhihuan.iteye.com/blog/717254 CKEDITOR.instances["page_content"].on("i ...
- 分布式服务框架 Zookeeper(转)
分布式服务框架 Zookeeper -- 管理分布式环境中的数据 Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题 ...
- 移动开发js库Zepto.js应用详解
从哪里下载 Zepto 地址:http://zeptojs.com/ 中文版地址:http://www.css88.com/doc/zeptojs_api/ 这个问题看起来很蠢,从官网下载不就行了嘛! ...
- Python中的逗号有什么作用?
最近研究python 遇到个逗号的问题 一直没弄明白 今天总算搞清楚了 1.逗号在参数传递中的使用: 这种情况不多说 没有什么不解的地方 就是形参或者实参传递的时候参数之间的逗号 例如def a ...
- Spring 一二事(5) - 依赖注入
<!-- 依赖注入的装配过程 --> <bean id="person" class="com.lee.spring007.di.xml.setter. ...
- 第23章 SEH结构化异常处理(2)_编译器对系统SEH机制的封装
23.2 编译器层面对系统SEH机制的封装 23.2.1 扩展的EXCEPTION_REGISTRATION级相关结构:VC_EXCEPTION_REGISTRATION (1)VC_EXCEPTIO ...
- Xcode中文乱码问题
老师给拷贝的程序用Xcode打开中文显示是乱码,而预览里面是正常显示的,Xcode默认编码UTF-8没错的,怎么办呢? 解决办法:用自带的文本编辑器打开,全选,复制,Xcode中打开文件,粘贴,ok~ ...
- mysql及php命名规范
一.mysql命名规范 1.设计原则 1) 标准化和规范化数据的标准化有助于消除数据库中的数据冗余.标准化有好几种形式,但 Third Normal Form(3NF)通常被认为在性能.扩展性和数据完 ...