描述
开 本: 128开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302462019丛书名: 跨平台移动开发丛书
Ionic是一个开源免费、技术先进，并获得业内广泛认可的跨平台的移动开发框架。它是基于主流技术HTML 5和AngularJS的快速开发工具，在极大地解放开发创业者的时间和学习成本的同时又融合了成熟的前端工程技术实践的成果。遗憾的是，由于Ionic涉及了前端技术界各种先进技术并不断演进，目前网络上为初学者采纳的Ionic的中文资料不仅散乱不成体系，而且很多内容与Ionic的官方资料有较大的出入，也没有较好的开源项目可以借鉴。国内的初学者想要短时间完全掌握并成功上手开发出一个可用的APP需要走很多弯路。因此作者结合自己的学习与开发经验，在本书以学习Ionic开发的前置基础知识如AngularJS框架、SASS、Gulp等技术面为起点，阐述了Ionic框架的所有组件使用方法之后，辅以两个涵盖前后端实现的Ionic项目完整解析来引导学习者终掌握Ionic框架及其周边技术。本书的目的是力求通过官方权威资料，理论与实战项目相结合使读者在练习与模仿中熟练掌握利用Ionic快速开发跨平台移动APP的方法，并能够真实地将技术转化为经济利益和创业成果。本书的定位就是为想在移动应用领域找工作或创业的人士提供加速器。本书是一本与众不同的书1．以练带学本书采用实例驱动的方式介绍Ionic框架下的APP开发。在介绍书中重要的知识点如AngularJS、应用的页面导航、调用移动设备的硬件功能等后，紧接着就有实例来验证与解释如何应用，后还通过两个中型项目来复习和巩固所学知识点。2．跨平台本书开发的项目是跨平台应用，因此书中对Windows和Mac两种开发环境下如何配置、生成与发布Android和iOS移动APP应用都做了解析。3．案例涵括Internet和企业应用本书的项目案例从其业务领域到功能点设置都参考了目前市面上流行的Internet与企业移动应用，同时也提供了读者进一步优化和打造自己产品的建议与外部参考资源。4．低门槛、浅阅读，轻轻松松就能学会为使本书更加详尽易懂，每写完一章，笔者邀请了想要跨专业入门移动开发的大学在校生阅读并提出意见，通过它们快速分析出被遗漏的知识点和讲解不清的技术点，使本书更方便初学者入门。本书的知识结构本书共5篇15章，主要章节规划如下。篇（第1~2章）移动开发准备跨平台的框架有很多， Ionic的独特优势在哪里导致它的风行？决定选择它后，又如何为它搭建开发与测试环境，并开发个Hello World应用？一个Ionic的应用如何使用浏览器、模拟器和实体机测试？如何打包应用到实体机上？使用何种开发工具加速开发进程？这些都是本篇要介绍的内容。第二篇（第3~4章）Ionic基础知识准备与常用库Ionic构建于目前先进的前端技术框架与工具集之上，不了解这些背景知识点是无法正确理解和应用Ionic框架的强大功能的。因此本篇介绍了配置开发Ionic环境所依赖的AngularJS、SASS、Gulp、lodash等这些业内主流的库和工具，以及Ionic CLI。后以一个完整的Ionic项目模板的目录文件结构解析帮助读者了解一个Ionic应用的构成元素与结构。第三篇（第5~11章）完整解析Ionic框架的官方组件本篇基于Ionic官方文档和笔者在实际项目中的经验，对Ionic内置的CSS样式类和JavaScript组件类进行完整解析，并通过丰富的代码与效果案例介绍其使用场景与定制途径。此外本篇也说明了常用的Cordova插件和安装使用方法，使APP应用能够使用手机硬件设备专有功能如照相、地理定位、震动，分享到其他社交应用等。第四篇（第12~14章）APP项目前后端实战篇本篇是关键的综合实战篇，详细介绍了如何依照业内通行的敏捷过程来进行设计、开发，从而完成2个使用Ionic开发的APP应用。除了综合使用了前文介绍的Ionic组件外，还详述了如何配置与测试后端服务的API、集成高德地图、百度ECharts图表等技术，这都是在实际的APP项目中常常会遇到的需求功能点。第五篇（第15章）发布和推广更新APP应用内容不多，却是一个APP走向市场和客户的终一步。本篇讲述了将使用Ionic框架开发的跨平台应用为Android和iOS两大平台打包的完整过程。此外还介绍了发布和更新应用的方法，使读者能真正将开发的应用转化为经济效益。
本书面向的读者? HTM 5入门者与HTML 5爱好者? 移动互联网创业者? 基于HTML 5的开发人员? 各种平台下的移动开发人员? 从其他开发语言转行做移动开发的人员? 前端开发人员和前端设计人员? Ionic入门学习者? 大中专院校的学生? 可作为各种移动应用培训学校的入门教程代码下载本书配套的示例代码下载地址（注意数字和字母大小写）如下：http://pan.baidu.com/s/1pLyKlCn（密码：4nqh）如果下载有问题，请电子邮件联系[email protected]，邮件主题为“ionic代码”。
本书由秦超主笔，其他参与创作的人员还有宋士伟、张倩、周敏、魏星、邹瑛、王铁民、殷龙、李春城、张兴瑜、胡松涛、李柯泉、林龙、赵殿华、牛晓云。
编 者2017年1月
本书第3章介绍的AngularJS技术是一个结构复杂庞大、组件配合紧密的框架，熟练掌握了AngularJS就已经基本上跨过了Ionic开发的门槛。不过除了提供AngularJS功能组件外，Ionic还为前端组件定制了美观的样式，并使用业内流行的前端工具整合了自动化的项目开发工具链。因此在全面介绍Ionic的组件和开发前，安排了本章介绍掌握Ionic开发需要了解的SASS样式开发和构建工具Gulp。后将Ionic项目的整体目录文件结构做一个说明，这样读者未来在需要开发或是阅读调试代码时，就知道该到什么位置去查看了，而不是漫无目的地凭直觉瞎找。本章的主要知识点包括：? SASS基础知识? lodash库简单说明? Gulp原理与常用模块介绍? Ionic项目模板目录结构解析4.1 SASS 入门SASS是一种对CSS进行了扩充的开发工具，它提供了许多便利的写法，使得CSS的开发变得简单和可维护，大大节省了样式设计者尤其是有编程背景的样式设计者的时间。符合SASS语法的文件就是普通的文本文件，里面可以直接使用CSS语法。SASS文件后缀名是.scss，意思为Sassy CSS。因此有时候SASS和SCSS两个词是可以混用的。Ionic提供的样式文件就是基于SASS开发的。考虑到部分读者从未接触过SASS，本书将重点介绍Ionic涉及的SASS语法，并不打算变成一个完整的SASS说明文档。有通读需要的读者可以到SASS的官方网站学习SASS的更多特性和样例：http://sass-lang.com/documentation/file.SASS_REFERENCE.html。编写完成的SASS文件需要经过编译处理转换成浏览器可以识别的CSS代码，在Ionic里有本章4.3节介绍的Gulp调用相关模块完成编译。在开发者日常编写调试时，可以使用一个在线SASS服务网站（http://www.sassmeister.com/）的即时编译转换功能获得CSS代码，如图4.1所示。 图4.1 使用在线网站（http://www.sassmeister.com/）的即时编译转换功能获得CSS代码4.1.1 变量与计算SASS允许定义变量，变量需要冠以$前缀，如：$period : 1s;$effect : ease-in;$trans_property : all;a { -moz-transition: $trans_property $period $effect; -webkit-transition: $trans_property $period $effect; -o-transition: $trans_property $period $effect; transition: $trans_property $period $effect; }经转换后的CSS代码为：a { -moz-transition: all 1s ease-in; -webkit-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in;}【代码解析】从代码上看似乎使用SASS变量的源代码更长，但是有了变量遇到以后的调整变化时，就只需要在变量定义的地方变更值，而不用通过全文搜索去替换。相信有过网站维护经验的读者能够体会SASS变量的好处。这也是Ionic在定义CSS样式类使用的常见模式。如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中，如：$side : left;$default_radius : 5px;.rounded { border-#{$side}-radius: $default_radius;}经转换后的CSS代码为：.rounded { border-left-radius: 5px;}【代码解析】这种字符串替换经常被使用在组合型的CSS属性名上。SASS允许在代码中使用计算表达式，如：$var : 2;$more_px : 10px;body { margin: (16px/2); top: 100px 5 * $more_px; right: $var * 10%;}经转换后的CSS代码为：body { margin: 8px; top: 150px; right: 20%;}【代码解析】变量也可以出现在计算表达式中，这样就更灵活了。4.1.2 样式嵌套标准的CSS只能支持单层的选择器{}块结构，对于习惯了JavaScript开发的人来说无疑是值得改进的一个地方。而经SASS扩展，可以允许无限层的选择器嵌套，如：$default_font_size: 100%;.container { h1 { color:red; font-size: $default_font_size * 2; } h2 { color:blue; font-size: $default_font_size * 1.5; }}经转换后的CSS代码为：.container h1 { color: red; font-size: 200%;}.container h2 { color: blue; font-size: 150%;}【代码解析】从代码可以看到，生成后的CSS代码是松散的平面结构，而SASS的代码明显更有逻辑性。CSS属性名也可以嵌套生成，如：div.container { border: { color: green; } border-left: { color: red; }}经转换后的CSS代码为：div.container { border-color: green; border-left-color: red;}【代码解析】从代码可以看到，在border和border-left后分别加上冒号后，生成的CSS会使用-号来连接生成终的属性名。在嵌套的代码块内，可以使用&占位符表示引用父元素。如：a { &:link { color: blue; } &:visited { color: green; } &:active { color: blue; } &:hover { color: red; font-weight: bold; }}经转换后的CSS代码为：a:link { color: blue;}a:visited { color: green;}a:active { color: blue;}a:hover { color: red; font-weight: bold;}【代码解析】从本示例代码的里可以看出使用SASS的深层嵌套在属性较多时有可能可以减少编写的代码量，代码结构也更具有可读性。4.1.3 单行注释 //SASS是CSS的超集，因此标准的CSS注释 /* comment */ ，会保留到编译后生成的文件。而为了方便开发人员的调试，SASS支持了类似JavaScript的单行注释符//，如：/*这是单行注释，将被保留*/p{ color: red; // 单行注释示例 font-size: 10px; /* CSS原生注释风格示例 */}经转换后的CSS代码为：/*这是单行注释，将被保留*/p { color: red; font-size: 10px; /* CSS原生注释风格示例 */}【代码解析】终在生成的CSS代码里，标准的CSS注释被保留，单行注释符//被忽略省去，出于保护目的不愿把内部注释发布到网上的开发者也可以考虑使用这个方法。4.1.4 继承@extendSASS允许一个选择器继承另一个选择器，如：.classParent1{ border: 1px solid #ddd;}.classParent2{ color: red; text-align: center;}.classChild { @extend .classParent1; @extend .classParent2; font-size:120%;}p { @extend .classParent1; @extend .classParent2; font-size:120%;}经转换后的CSS代码为：.classParent1, .classChild, p { border: 1px solid #ddd;}
.classParent2, .classChild, p { color: red; text-align: center;}
.classChild { font-size: 120%;}
p { font-size: 120%;}【代码解析】这里可以看到SASS跟CSS代码相比的好处是既通过@extend继承了父CSS类的样式属性，又把相关的声明都放在子CSS类或子元素声明里，这样的代码结构可阅读可维护性明显更佳。此处的通过@extend只能继承CSS类，即父类只能是CSS类，而不能是元素。4.1.5 混入@mixin与@include早的SASS是用Ruby开发的，因此该语言的作者引入了一些类似Ruby的语言结构，其中就有用于实现多重继承的混入（Mixin）。混入有点像C语言的宏，是可以定义以后在被引入的地方展开而达到重用的代码块。首先需要使用@mixin命令，定义一个代码块，随后再使用@include命令，调用这个混入代码块使之原地展开，如：$border-width : 1px;@mixin left-setting {float: left;margin-left: 10px;padding-left: 2px;border-left: $border-width;}div { @include left-setting;}经转换后的CSS代码为：div { float: left; margin-left: 10px; padding-left: 2px; border-left: 1px;}【代码解析】如代码所示，混入定义本身并不生成CSS代码，它类似于静态库被嵌入，当一个元素或者CSS类引入了多个混入代码块，则就相当于实现了多重继承的概念了。此处变量$border-width的定义位置需要在名为left-setting的混入之前，否则将无法获取该变量的值。这种要求是SASS编译器本身的限制导致的。混入还可以指定参数和默认值，既像C语言的宏又强于它，如：@mixin left-setting($border-width: 3px) {float: left;margin-left: 10px;padding-left: 2px;border-left: $border-width;}div { @include left-setting;}div.special{ @include left-setting(5px);}经转换后的CSS代码为：div { float: left; margin-left: 10px; padding-left: 2px; border-left: 3px;}
div.special { float: left; margin-left: 10px; padding-left: 2px; border-left: 5px;}【代码解析】如代码所示，生成的个元素在引入时使用了默认参数值，而第二个在引入时使用了指定参数值。Ionic的SASS代码里大量使用了混入结构，其中就有一个文件，路径为项目目录wwwlibionicscss_mixins.scss，文件内容为定义的所有的混入，以下为其中一小段代码片段：// Single Corner Border Radius@mixin border-top-left-radius($radius) { -webkit-border-top-left-radius: $radius; border-top-left-radius: $radius;}@mixin border-top-right-radius($radius) { -webkit-border-top-right-radius: $radius; border-top-right-radius: $radius;}@mixin border-bottom-right-radius($radius) { -webkit-border-bottom-right-radius: $radius; border-bottom-right-radius: $radius;}@mixin border-bottom-left-radius($radius) { -webkit-border-bottom-left-radius: $radius; border-bottom-left-radius: $radius;}【代码解析】这样为针对两种不同的浏览器分别定义元素的四个角的圆角半径提供了简单的方式。4.1.6 颜色计算SASS提供了一些内置的颜色函数，以便通过种子颜色生成系列颜色，这样能够节省大量的自行计算和查找调色板的时间，常见的颜色函数与使用方式如下所示。$main_color: #336699;$second_color: #993266;#page1{ //提升亮度 color: lighten($main_color, 10%); }#page2{ //降低亮度 color: darken($main_color, 10%); }#page3{ //提升饱和度 color: saturate($main_color, 10%); }#page4{ //降低饱和度 color: desaturate($main_color, 10%); }#page5{ //调整色调 color: adjust-hue($main_color, 10%); }#page6{ //取灰度颜色 color: grayscale($main_color); }#page7{ //混合两种颜色 color: mix($main_color, $second_color); }经转换后的CSS代码为：#page1 { color: #4080bf;}
#page2 { color: #264d73;}
#page3 { color: #2966a3;}
#page4 { color: #3d668f;}
#page5 { color: #335599;}
#page6 { color: #666666;}
#page7 { color: #664c80;}【代码解析】在SASS代码里的相关位置已经对使用到的函数进行过了注释，这里不再重复说明。当需要对Ionic提供的默认颜色方案进行微调或是设计自己的APP应用的颜色方案时，读者可以考虑使用这些便捷函数。4.1.7 引入文件@import@import命令，用来插入外部SASS文件。Ionic代码库中路径为项目目录wwwlibionicscssionic.scss的文件的主要内容就是用于引入其他SASS模块文件，如：@import // Ionicons引入图标 “ionicons/ionicons.scss”,
// Variables引入变量 “mixins”, “variables”,
// Base引入基础模块 “reset”, “scaffolding”, “type”,……【代码解析】请注意代码中引入文件名的区别，当SASS文件以_为前缀开头时，使用@import命令不需要写出这个_前缀和.scss的后缀。4.1.8 条件语句@if和@else条件语句是一般编程语言的基本设施，SASS有两个配套的@if和@else可以使用。Ionic代码库中路径为项目目录wwwlibionicscss_mixins.scss的文件里也有多处用到了条件语句，如以下片段：@mixin flex-wrap($value: nowrap) { -webkit-flex-wrap: $value; -moz-flex-wrap: $value; @if $value == nowrap { -ms-flex-wrap: none; } @else { -ms-flex-wrap: $value; } flex-wrap: $value;}【代码解析】由于IE浏览器的flex-wrap属性值与其他浏览器不一样，因此代码里通过条件语句进行了额外判断。4.2 lodash（可选学）lodash是一套JavaScript工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，在本书的3.6节的示例3-10已经使用了它的数组处理函数。目前每天使用 npm 安装 lodash 的数量在百万级以上，这在一定程度上证明了其代码的普世性，笔者推荐读者在自己的项目中选择使用。本书13和14章的项目实战中，也会大量运用到lodash的多个辅助函数。4.2.1 使用场景lodash库提供的辅助函数主要分为以下几类： ? Array：适用于数组类型，比如填充数据、查找元素、数组分片等操作。? Collection：适用于数组和对象类型，部分适用于字符串，比如分组、查找、过滤等操作。? Function：适用于函数类型，比如节流、延迟、缓存、设置钩子等操作。? Lang：普遍适用于各种类型，常用于执行类型判断和类型转换。? Math：适用于数值类型，常用于执行数学运算。? Number：适用于生成随机数，比较数值与数值区间的关系。? Object：适用于对象类型，常用于对象的创建、扩展、类型转换、检索、集合等操作。? Seq：常用于创建链式调用，提高执行性能（惰性计算）。? String：适用于字符串类型。? Util：提供了杂类辅助函数。由于lodash库提供的辅助函数数量众多，而本书的主旨是关于Ionic框架的开发，因此不再一一深入介绍了。笔者将会在后续第14章和第15章中的项目实战代码里解说用到的相关lodash库函数。4.2.2 引入到项目尽管lodash库在有数据处理需求的前端开发中已属标配，但Ionic框架并没有包含它。因此读者如果需要在自己的项目或产品中使用，必须自行引入。如果仅在JavaScript文件中使用，可以采用类似本书3.6节中示例3-10的简单做法，包含lodash的JavaScript文件后使用全局变量_来获取它即可。然而如果需要在HTML视图页的AngularJS表达式中使用lodash库，则有可能因为作用域对象的解析不包括全局变量而无法使用。有一个解决办法是在主应用模块的run方法代码块里设置lodash库根对象到根作用域里，这样HTML视图页里就也能使用了lodash库了，如：【示例4-1】 设置lodash库根对象到AngularJS应用的根作用域。var myapp = angular.module(‘myApp’, []).run(function ($rootScope) {$rootScope._ = window._;});【代码解析】代码里的run方法将在AngularJS应用启动时被调用，因此随后所有的作用域对象就都能通过继承链使用它了。在页面包含lodash库文件时，需要把包含代码放置在应用本身的JavaScript文件前面，可参见示例3-10的做法。4.2.3 进一步学习指南lodash库功能强劲，而且效率很好，比较适合移动开发这种前台响应要求高的场景。在此推荐读者可以到其官方网站https://lodash.com/docs多学习了解其提供的函数，以节省开发时间和减少自编代码中错误产生的几率。4.3 Gulp使用简介（可选学）在本书的2.1.3节已经介绍过Gulp的长处和安装步骤，本节将介绍Gulp的一些基本概念和常见的使用方法，帮助读者未来选用它的一些自动化处理插件和对Ionic默认生成的Gulp主文件进行定制。图4.2中展现了常用的几个Gulp插件和其对应的功能。 图4.2 常见的Gulp插件和其对应的功能4.3.1 Gulp主文件gulpfile.js的执行原理Gulp需要一个文件作为它的主文件，这个文件被强制规定名称为gulpfile.js。要使用Gulp的时候，在项目的根目录中新建一个文件名为gulpfile.js的文件即可。之后要做的就是在gulpfile.js文件中定义任务了。示例4-2是一个简单的gulpfile.js文件内容示例，它定义了一个默认的任务。【示例4-2】在gulpfile.js中定义一个默认任务。var gulp = require(‘gulp’);gulp.task(‘default’,function(){console.log(‘hello’);});【代码解析】代码引入gulp模块后使用它的task()方法定义了名为default的默认任务，该任务被调用执行时将在控制台写入字符串“hello”后退出。运行Gulp任务只需切换到存放gulpfile.js文件的目录，然后在命令行中执行gulp命令就行了。gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行名为default的默认任务。图4.3为分别使用两种方式执行示例4-2中编写的gulpfile.js运行出的结果。 图4.3 在命令行执行4-2中编写的gulpfile.js运行出的结果在介绍Gulp的其他函数之前，需要先了解gulpfile.js工作方式。在Gulp中，使用的是Node.js中的流（stream），首先获取到需要的流，然后可以通过流的pipe()方法把流依次导入到各个Gulp插件中，一般后是把流写入到文件里结束。所以可以把Gulp看作是一个流处理器工具，这样它在中间的处理环节不需要频繁地生成临时文件（比Gulp更早出现的同类工具Grunt是以临时文件方式工作的），效率要更高。这样可以推想出来，Gulp的模式一般应该是：首先获取到想要处理的文件流（通过gulp.src方法），然后把文件流依次导入到Gulp的各个插件中（通过pipe方法依次包装各个插件方法），后把经过插件处理后的流再写入到文件里（也是通过pipe方法包装gulp.dest，gulp.dest方法则把流中的内容写入到文件中）。如果省去中间各个插件环节，那么简单的一个gulpfile.js就写出来了：【示例4-3】在gulpfile.js中使用流方式执行复制文本文件的操作。var gulp = require(“gulp”);gulp.task(‘default’, function(){ gulp.src(‘*.txt’) .pipe(gulp.dest(‘test_gulp’)); });【代码解析】在【示例4-2】的结构里加入了获取gulpfile.js当前目录的所有.txt文件，随后写入到目录底下的test_gulp目录中。了解了Gulp 的工作原理和代码编写结构后，下面的内容将继续讲解Gulp 的四个基本API接口： gulp.src、gulp.task、gulp.dest和gulp.watch。4.3.2 获取流函数srcgulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象流中存储着原始文件的路径、文件名、内容等信息。其语法为：gulp.src(globs [, options]);1．globs参数globs参数是文件匹配模式（类似正则表达式），用来匹配文件路径（包括文件名），当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组：类型为String或Array。例如：gulp.src([‘js/*.js’, ‘css/*.css’, ‘*.html’]); //分别匹配各目录下的js、css和本目录下的html文件2．options参数options参数是可选参数对象，以下为常见选项参数：? options.buffer类型：Boolean 默认值：true说明：设置为false时将返回file.content的流而不缓冲整个文件的内容，处理大文件时非常有用。插件可能并不会实现对流的支持。? options.base类型：String说明：显式设置输出路径以某个路径的某个组成部分为基础向后拼接。假设在一个路径为 client/js/somedir 的目录中，有一个文件叫somefile.js ：// 匹配 ‘client/js/somedir/somefile.js’ 现在 `base` 的值为 `client/js/`gulp.src(‘client/js/**/*.js’) // 写入 ‘build/somedir/somefile.js’ 将`client/js/`替换为build.pipe(gulp.dest(‘build’)); // base 的值为 ‘client’gulp.src(‘client/js/**/*.js’, { base: ‘client’ }) // 写入 ‘build/js/somedir/somefile.js’ 将`client`替换为build.pipe(gulp.dest(‘build’)); 【代码解析】在路径中的**代表匹配路径中的0个或多个目录及其子目录。使用?options.base就能够选择保留原路径里的一些下层目录结构。4.3.3 写文件函数destgulp.dest()方法是用来写入文件或目录的，其语法为：gulp.dest(path [,options]);1．path参数path参数是写入文件或目录的路径；2．options参数options参数是可选参数对象，以下为常见选项参数：? options.cwd类型：String 默认值：process.cwd()说明：输出目录的cwd（current working directory当前工作目录）参数，只在所给的输出目录是相对路径时有效。? options.mode类型：String 默认值： 0777说明：八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。这里说明一下生成的文件路径与给gulp.dest()方法传入的路径参数之间的关系。 gulp.dest(path)生成的文件路径是传入的path参数后面再加上前面调用gulp.src()中有通配符开始出现的那部分路径。例如：var gulp = require(‘gulp’);//有通配符开始出现的那部分路径为 **/*.jsgulp.src(‘script/**/*.js’) //后生成的文件路径为 dist/**/*.js，如果 **/*.js 匹配到的文件为 jquery/jquery.js ,//则生成的文件路径为 dist/jquery/jquery.js.pipe(gulp.dest(‘dist’)); 【代码解析】通过这种在写入路径中保留通配符所匹配出的路径的方式，能保留源目录的结构。用gulp.dest()把文件流写入文件后，文件流仍然可以继续使用。在后面的4.3.6节我们可以看到Ionic的gulpfile.js利用这一特性同时生成了正常可读的和压缩优化过的CSS文件。4.3.4 监视文件变化函数watchgulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件重新压缩生成等。其语法为：gulp.watch(glob[, opts], tasks); 1．globs参数globs参数为要监视的文件匹配模式，规则和用法与4.3.2节里gulp.src()方法中的glob相同。 2．opts 参数opts 参数为一个可选的配置对象，通常不需要用到。 3．tasks 参数tasks 参数为监视到文件变化后要执行的任务名数组。例如：gulp.task(‘uglify’,function(){ //do something});gulp.task(‘reload’,function(){ //do something});gulp.watch(‘js/**/*.js’, [‘uglify’,’reload’]);【代码解析】在监测到工作目录的js子目录及以下的任何js文件有变动时，则依次调用前面定义过的uglify和reload任务。4.3.5 定义任务函数taskgulp.task()用来定义任务，在前面几个小节读者应该已经初步接触过它了。其语法为：gulp.task(name[, deps], fn)1．name参数name代表任务名。2．deps参数deps参数是当前定义的任务需要依赖的其他任务名数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数。3．fn参数fn参数是任务函数，我们把任务要执行的代码都写在里面，该参数也是可选的。前面在4.3.1节和4.3.4节已经分别了解了如何定义默认执行的任务和简单的任务，现在介绍当有多个任务时，需要知道怎么通过任务依赖来实现控制任务的执行顺序。例如想要执行one,two,three这三个任务，就可以定义一个空的任务，然后把那三个任务当作这个空的任务的依赖就行了：//只要执行default任务，就相当于把one,two,three这三个任务执行了gulp.task(‘default’,[‘one’,’two’,’three’]); 【代码解析】 如果任务[‘one’,’two’,’three’]相互之间没有依赖，任务就会按书写的顺序来执行，如果有依赖的话则会先执行依赖的任务。4.3.6 解析Ionic项目Gulp主文件了解完Gulp提供的4个基础API接口后，就可以开始通过阅读已有成熟代码学习怎么把Gulp应用到日常工作中了。从本书的主旨出发，笔者做出了一个轻松的决定：通过解析Ionic项目模板自带的Gulp主文件来讲解Gulp的API和一些插件的使用。读者可以打开在本书前面的2.1.6节生成的Hello Ionic项目目录下的gulpfile.js文件自行查看阅读或是参考示例4-4的代码与注释来学习。【示例4-4】Ionic项目模板自带的Gulp主文件gulpfile.js//引入Gulp库和用到的Gulp插件var gulp = require(‘gulp’);var gutil = require(‘gulp-util’);var bower = require(‘bower’); //引入Bower库var concat = require(‘gulp-concat’);var sass = require(‘gulp-sass’);var minifyCss = require(‘gulp-minify-css’);var rename = require(‘gulp-rename’);//引入shelljs库，用于实现 Unix shell 命令执行var sh = require(‘shelljs’);
//设置项目的SASS文件所在目录var paths = { sass: [‘./scss/**/*.scss’]};
//设置默认任务依赖于sass任务gulp.task(‘default’, [‘sass’]);
//sass任务，将Ionic应用的主SASS文件编译为CSS文件的两种格式gulp.task(‘sass’, function(done) { // 读取Ionic应用的主SASS文件 gulp.src(‘./scss/ionic.app.scss’) // 编译为CSS文件 .pipe(sass()).on(‘error’, sass.logError)//未压缩的版本写入css目录中 .pipe(gulp.dest(‘./www/css/’)) .pipe(minifyCss({ // keepSpecialComments: 0}))//压缩后的版本文件改名.pipe(rename({ extname: ‘.min.css’ })) //压缩后的版本写入css目录中.pipe(gulp.dest(‘./www/css/’)) //异步任务完成后执行done通知调用者 .on(‘end’, done); });
//设置watch任务为监控SASS文件所在目录，如有变化则启动sass任务重新生成css文件gulp.task(‘watch’, function() { gulp.watch(paths.sass, [‘sass’]);});
//install任务，调用Bower执行包安装gulp.task(‘install’, [‘git-check’], function() { return bower.commands.install() .on(‘log’, function(data) { gutil.log(‘bower’, gutil.colors.cyan(data.id), data.message); });});
// git-check任务，检查是否安装了gitgulp.task(‘git-check’, function(done) { if (!sh.which(‘git’)) { console.log( ‘ ‘ gutil.colors.red(‘Git is not installed.’), ‘n Git, the version control system, is required to download Ionic.’, ‘n Download git here:’, gutil.colors.cyan(‘http://git-scm.com/downloads’) ‘.’, ‘n Once git is installed, run ” gutil.colors.cyan(‘gulp install’) ” again.’ ); process.exit(1); } done();});【代码解析】代码里主要的是两个任务：sass和watch。sass作为主任务负责生成css文件，而watch任务将被Ionic CLI调用监控项目sass文件的变化，一旦变化则将在css文件更新后调用浏览器的远程函数重新加载应用。4.4 Ionic项目模板目录结构简介使用Ionic CLI的命令创建完一个项目并加入Android或iOS（开发机需要是OSX操作系统）运行平台的支持后，项目的目录与文件结构如图4.4所示。 图4.4 Ionic项目模板顶层目录与文件结构本节将介绍重要的目录与配置文件，了解这些对于未来的问题定位与应用定制是有助益的。4.4.1 常用工作目录 wwwwww目录将是开发人员常访问的地方，开发出的代码基本都归类放在相应的字母下。图4.5中显示了初始状态下www目录的结构。 图4.5 www目录的结构相信读者根据名称不难想到：? css、img和js目录分别放置开发人员自行开发的代码或图片资源。? index.html是默认的应用的主页面文件，由于Ionic APP应用的实质是一个SPA（Single Page Application单页面应用），因此该文件将在运行时一直加载在浏览器中，而随着代码的运行（通过第8章介绍的导航类组件）变更其局部的展现。? lib目录主要放置存放Ionic框架的源代码、图标字体文件和使用的AngularJS框架的代码。4.4.2 常用工作目录scss在项目启用了SASS后，scss目录下将会存在一个ionic.app.scss文件。开发人员可以在这个文件上更改Ionic默认设置的一些变量的值，该文件的头部已有注释文本举例该如何更改。读者可以结合在4.1节了解的SASS知识和/lib/ionic/scss目录下的Ionic原始SASS文件来定制自己的APP应用的外观。4.4.3 常用工作目录 resourcesresources目录主要用于存放APP应用在Android和iOS平台的桌面图标和应用启动闪屏使用的图片文件。使用自己的资源覆盖这些文件是定制发布APP前必须要做的界面完善工作，一般来说这些图片文件是使用Photoshop来制作生成的。本书后面的13.3.9节里用实例介绍了实战项目中如何定制APP的图标和应用启动屏图片文件。4.4.4 重要文件package.json通过文本编辑器打开package.json可以看到APP应用的相关信息、依赖的Gulp插件和其他NPM开发包都设置在里面。此外还列举出了随应用模板安装的Cordova插件集和支持的硬件平台，如图4.6所示。 图4.6 package.json的初始结构4.4.5 重要文件config.xmlconfig.xml是存放与APP应用发布相关的主要信息的配置文件。因为XML文件的自描述性，相信读者阅读每项的内容就能知道对应的配置项意义，也可以到cordova的官方网站（http://cordova.apache.org/docs/en/latest/config_ref/index.html）阅读更全面的说明。开发人员可以在发布测试时尝试调整里面的一些配置值，如SplashScreenDelay、FadeSplashScreenDuration。笔者建议调整其他开关值前在网上先搜索一下这些配置项对应的含义，以免产生意想不到的错误。4.4.6 其他目录与文件简介? hooks目录，放置安装的Cordova插件可能需要额外执行的脚本文件，Ionic CLI会负责调用。? node_modules目录，存放项目用到的Nodejs插件模块。? plugins目录，Cordova插件的安装目录，相关知识请完整参考本书第11章。? gulpfile.js文件，项目的Gulp主文件，已在本书的4.3.6节介绍过。
评论
还没有评论。