您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:Ionic3开辟IOS应用实例教程,调侃前

新葡亰496net:Ionic3开辟IOS应用实例教程,调侃前

发布时间:2019-09-11 10:48编辑:新葡亰官网浏览(109)

    吐槽前端组件化的踩坑之路

    2016/05/10 · 基础技术 · 前端构建, 组件化

    本文作者: 伯乐在线 - 亚里士朱德 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    这篇文章分享的不是成功的经验,而是失败的教训~

    前端自动化构建方案#

    随着web应用的规模与日俱增,以及用户对前端界面的要求愈加严格,前端开发 “ 刀耕火种 ” 的旧石器时代已经逝去,伴随而来的,是围绕【开发效率】以及【运行性能】的工程化问题。

        最近利用空余的时间(坐公交车看教程视频),重新了解了前后端分离,前端工程化等概念学习,思考如何打造一个“逼格”的web前端项目。

    从 Angular1 到 Angular2

    全局安装是把包安装在Node安装目录下的node_modules文件夹中,一般在 Users用户名AppDataRoaming 目录下,可以使用npm root -g查看全局安装目录

    设坑

    关于为什么要研究组件化以及之前对组件化实现方式的理解都在这篇文章——《利用handlebars实现后端组件化》。本来按照之前的思路,觉得组件化应该有三种实现方式,一种是后端模板;一种是浏览器端由js实现,包括reactjs的组件、angular的指令等,不过这些对css文件无法管理(有个插件号称完美实现组件化,研究完之后再分析);最后一种就是利用构建工具实现组件化。

    如果真能找到这样一种构建工具,不依赖前后端语言、模板、框架,在构建代码的时候直接直接将组件打包是不是很完美?如果你也这么想,那么恭喜你可以跟我一其踏上一段踩坑之旅了。

    一、自动化构建

    【自动化构建】作为前端工程化中重要部分,承担着若干需要解决的环节。包括【流程管理】【版本管理】【资源管理】【组件化】【脚手架工具】等。

        

    Angular2 作为著名前端 MVVM 架构 Angular1 的继承者,从一定程度上说,引领了新一代 Web 前端开发技术的革新。从最新版的 ember.js, react.js, vue.js 中,可以看到这几种技术相互借鉴,取长补短,最终向一种技术方向演进。

    本地(局部)安装是把包安装在指定项目(要在指定的根目录下输入命令)的node_modules文件夹下(若没有,会自动创建一个node_modules文件夹)

    入坑

    目标已经明确的话开始寻找工具。理想的是有工具插件直接实现组件化,差一点的话自己稍加改造实现也可以接受。看看现在比较流行的工程化工具:

    1、流程管理

    完整的开发流程包括本地开发,mock调试,前后端联调,提测,上线等。在每个团队的基础设施当中(如cms系统,静态资源推送系统等),都会存在一定程度将前端开发流程割裂。如何运用自动化的手段,对开发流程进行改善将可以大幅降低时间成本。

        前端理论篇

    组件化技术的崛起

    具体区别,推荐博文:  全局安装和本地(局部)安装的区别

    webpack

    首先研究这个最新最火的工具,一进入官网就被那个炫酷的css3立方体吸引了,看上去很高大上的样子。官网上内容很多,虽然是英文的但是问题不大。看到菜单上有一系列教程(list of tutorials)非常欣喜,心想好软件就是不一样,教程都写得这么多。一点开傻眼了,根本就不是什么学习教程,就是各种语言凑起来的文章,完全无法引导新手很好的学习,也没有分类。照着例子使用了之后发现如其所说只是个模块打包工具,恨不能让任何页面只引用一个js一个css,对第三方依赖的处理也是狗血,要么合并成一个,要么一个一个配置,手动在html中维护,而且还是侵入式的改变源代码内容。功能很简单,实现过程很复杂,蛋疼之后更是伴随一阵心疼,遂放弃。
    如有不对之处,欢迎webpack资深玩家拍砖指点。

    2、版本管理

    web应用规模愈加复杂,迭代速度也愈加频繁。而前端界面作为一种远程部署,运行时增量下载的特殊GUI软件,如何使用自动化构建工具,对不同版本的资源文件进行管理,并让用户第一时间感知版本的回撤以及升级(尤其是在浏览器缓存以及cdn广泛使用的今天),将对企业有更好的安全保障,对用户有更佳的使用体验。

     

    Angular1 也有组件,叫另外一个名字:指令。在 Angular1 中,指令是 DOM 元素紧密结合的一段包含控制逻辑、数据管理的代码。在指令中,我们可以清楚的看到 Angular1 对于 Jquery/DOM 技术的使用,以及手动对 Angular 组件进行生命周期的管理。要知道,这些在一般的 Angular 控制器/页面模板的开发中,是不用被关心的。

     本地安装可以让每个项目拥有独立的包,不受全局包的影响,方便项目的移动、复制、打包等,保证不同版本包之间的相互依赖

    fis3

    其实从fis刚出来的时候我就在关注fis,那时候因为觉得插件不够丰富,再加上项目中使用的是grunt,所以放弃了。这次看到fis的教学视频和fis3的时候我是内心有些激动的。一方面见其生机勃勃,另一方面介绍了百度产品实现组件化的经验。
    事情真的那么完美吗?首先不得不承认fis3是一个比较成熟的构建工具,但是一上手就坑了我,release发布代码的时候不能清除目录,只能覆盖发布,号称400多个插件中也没找到可以实现的,我只能用一个字形容——囧。这种感觉就像你来到了一栋摩天大楼,但是它没有电梯,你只能自己爬上去。再细致研究发现其组件化也是依赖后端语言实现的,和后端模板集成在一起,做事情做一半,真是无语。至于Angular和Angular2这种靠前端模板的例子也不是我要找的答案。
    不过其目录划分可能还有一些借鉴意义吧。

    3、资源管理

    随着每个团队业务复杂程度的加深,对于功能模块封装的粒度必将愈加精细。衍生出来的,将会是资源数量以及依赖关系等的管理问题。以人工的方式考虑单个页面或单个功能的资源优化是片面的,并且效率低下。通过工程化的手段,在前端构建过程中自动化地以最优方式处理资源的合并以及依赖,是提升性能以及解放人力资源的重要途径。

        前端代码规范:制定前端开发代码规范文档。

    Angular2 把组件扩大化,使这种类似于指令化的开发应用到页面开发中。这样有什么好处呢?

    新葡亰496net,一、理解

    现坑

    4、组件化

    组件化方案,是以页面的小部件为单位进行开发,在系统内可复用。如何以最优化方式实现组件化(js、css、html片段,以就近原则进行文件组织,以数据绑定方式进行代码开发,业务逻辑上相对外部独立,暴露约定的接口);并且随着组件化的程度加深,如何对组件库进行管理,合并打包以及多人共同维护等,都是无法避免的问题。

                             PS:重中之中,为了下一步实现前端工程化。

    • 增加了开发人员页面开发的灵活性
    • 使用新的文件引用技术,这点我们在 Webpack 的革新中具体阐述
    • css 的分离化管理

    1、什么是项目构建?

    • 编译项目中的 js、sass、less
    • 合并js/css等文件(使用构建工具合并后,会自动生成合并后文件,这样只需引入合并文件即可,减少资源加载的次数)
    • 压缩js/css/html等资源文件(减小文件的大小,减小内存占用)
    • js语法的检查

    项目构建可以减少项目的重量,

    gulp

    gulp和grunt功能上差不多,丰富的扩展性决定了其能成为最强大的前端构建工具。gulp效率高一些,所以这里只讨论gulp。当不停地寻找合适插件的时候终于发现一个关键性的功能似乎不能实现,那就是组件的嵌套引用以及依赖资源的自动合并,如果需要实现这个功能那么要动态处理html代码识别资源然后进行整合,这个功能是不是有些熟悉,对,这就是之前写过的利用后端模板引擎做的事情。
    想到这里,这个坑就明显了:我在试图用构建工具来侵入代码来完成模板引擎该做的工作而同时它还无法像模板引擎一样填充数据。这就好比我在用羽毛球拍打乒乓球,还一直觉得是球拍品牌不够好所以打不好球。

    5、脚手架工具

    我们希望每次研发新产品不是从零开始,不同团队不同项目之间能有【可复用的模块】沉淀下来。对于前端而言,【可复用的模块】除了【组件】,另外就是【脚手架工具】。运用脚手架工具,一键安装,自动化搭建不同类型项目的完整目录结构,工程师将有更多时间专注在业务逻辑代码的编写上。

                                    编码风格有很多。团队代码规范一定要统一。便于维护web项目。

    如果了解其他的开发技术,可以发现组件化渐渐的统治了前端开发领域。从 ember.js,vue.js,到 React.js,组件化技术都被广泛应用。

    2、构建工具的作用?

    简化项目构建,自动化完成构建

    出坑

    回过头来看看构建工具的职能到底是什么?
    fis3给其定义了三大职能

    • 资源定位:获取任何开发中所使用资源的线上路径;
    • 内容嵌入:把一个文件的内容(文本)或者 base64 编码(图片)嵌入到另一个文件中;
    • 依赖声明:在一个文本文件内标记对其他资源的依赖关系;——很可惜这个任务没有完全完成
      这三大职能看似很完美,但实际上都是需要在修改源代码的基础上实现,这种耦合程度就很不友好。一方面造成代码混乱,另一方面如果要替换构建工具也变得不可能。
      再看gulp/grunt这种自动化构建工具,将压缩、编译、单元测试、lint等重复性工作自动化,不要求改变源码,我觉得这种无耦合的方式才通用更利于维护。
      总之,如果编写fis3插件来自动处理依赖声明的话,利用构建工具来实现组件化应该是可以的。只是在前后端分离、行为结构样式分离的今天来做这样一件事显然不是最佳最友好的实现方式~

    打赏支持我写出更多好文章,谢谢!

    打赏作者

    二、技术元素

    现如今前端技术元素包罗万象,在进行技术选型时,让开发者有了更多的空间。而每个元素应该在自动化构建中承担不同的角色,但职责上不耦合,当前端领域在某一环节有更优方案出现时,能以最低成本进行替代。

    【webpack】作为当前最优秀的打包工具,以模块为设计出发点,所有资源都可以作为模块自动化进行合并打包以及依赖处理。目前而言,是解决【资源管理】以及【版本管理】的最佳方案。

    【gulp】是一款优秀的构建工具,通过流式是文件管理,以及定制化的任务管理,可完美兼容任何形式的【流程管理】。

    【vue】与【avalon】作为数据驱动的 js 框架,都拥有其优秀的【组件化】方案。vue拥有其强大的技术生态,可驾驭不同复杂度的项目,在移动端上性能也尤为卓越;而avalon在兼容性方面作了最大化地努力,可兼容ie6的亮点,则让其在传统项目中拥有先天的优势。

    【yo】提供了一个强大的generator构建系统,让开发者可以搭建定制化的【脚手架工具】,快速启动任何类型的项目。

    总的而言,【gulp】是粘合剂,进行【流程管理】;【yeoman】制作【脚手架工具】;【webpack】是打包工具,负责【版本管理】和【资源管理】;【vue】及【avalon】则落实逻辑细节,实现【组件化】。

    新葡亰496net 1

        接口文档规范:制定RESTful架构接口规范文档。

    从 grunt/gulp 到 Webpack 的技术革新

    二、构建工具

    主要有三种:Grunt、Gulp、Webpack

    打赏支持我写出更多好文章,谢谢!

    任选一种支付方式

    新葡亰496net 2 新葡亰496net 3

    2 赞 1 收藏 评论

    三、支线

    前端的【自动化构建程度】,与每个团队的【基础设施】以及【项目类型】存在强关联性。“ 一刀切 ” 是鲁莽的,也将受到更多的阻力。更优的选择,是结合现有的基础设施,以及提取过往项目的共同点,为新项目提供更好的技术以及流程支持。

    自动化的构建方案,分为【三条支线】。

                             PS:果断使用用apiDoc构建API文档。美观好看,易于维护。

    Task runner, 从最早的 grunt,到 gulp,是服务于应用程序的一些控制程序。有帮助开发人员进行开发、运行单元集成测试、帮助产品发布等等一系列功能,一般我们依赖于第三方的程序来实现,例如 gulp。但是 npm 本身就有 task runner 的功能,如清单 1,scripts 中包含了可以运行的 ionic 任务。使用类似 npm run clean 就可以运行任务,不需要其他依赖。

    1、Grunt(中文网)

    关于作者:亚里士朱德

    新葡亰496net 4

    微信公众号“web学习社”;js全栈工程师,熟悉node.js、mongoDB。开发者头条top10专栏作者慕课网签约讲师个人博客:yalishizhude.github.io 个人主页 · 我的文章 · 19 ·     

    新葡亰496net 5

    支线1:【基础设施】强依赖项目

    内部高频项目一般依赖组内较多的基础设施,如cms,rms,crs,活动后台等。因为功能依赖分散并且手动管理,所以在活动开发流程中存在相当程度可避免的【效率损耗】。

    初始方案:【基础设施自动化】 【数据驱动】 【组件化】

    新葡亰496net 6

                                    还用Word或者Excel写文档,太low了。

    清单 1. Npm 配置提供 task runner 功能

    (1)介绍:

    是一套前端自动化构建工具,一个基于nodeJs的命令行工具,它是一个任务运行器, 配合其丰富强大的插件

    执行任务时是同步的,要注意任务的顺序

    支线2:移动端项目

    初始方案:【流程管理】 【版本管理】 【vue vuex应用状态驱动】 【s-ui】

    新葡亰496net 7

        前后端分离:简单理解为前端代码不影响后端代码,后端代码不影响前端代码。

    {
      //package.json
      "name": "iamsaying",
      "version": "0.0.1",
      "author": "Ionic Framework",
      "homepage": "http://ionicframework.com/",
      "private": true,  
     "scripts": {// 可运行的任务
      "clean": "ionic-app-scripts clean",
      "build": "ionic-app-scripts build",
      "lint": "ionic-app-scripts lint",
      "ionic:build": "ionic-app-scripts build",
      "ionic:serve": "ionic-app-scripts serve"
      }
      //更多
      }
    

    (2)常用功能:

    • 合并文件(js/css)
    • 压缩文件(js/css)
    • 语法检查(js)
    • less/sass预编译处理
    • 其它

    支线3:内部管理后台

    初始方案:【流程管理】 【vue数据驱动】 【element-ui】(流程图大致同上)

                          PS:个人感觉就是有点像C/S架构,web前端 == apk || ipa 。

    这就有一个问题了,为什么有 npm task runner,还要使用三方的 gulp 来完成此项功能呢?因为 npm task runner 太简单了,从字面上看,只是一条 shell 命令。但是 gulp 能做什么呢?如清单 2 是一段用 gulp 向 index.html 中注入相应的 bower_components 的任务。可以看出,gulp 任务复杂,需要写代码。

    (3)安装步骤

    • 安装grunt

    全局安装 grunt-cli:npm install -g grunt-cli

    局部安装grunt:npm install grunt --save-dev 

    • 配置文件: Gruntfile.js:

    此配置文件本质就是一个node函数类型模块
    配置编码包含3步:

    1. 初始化插件配置 2. 加载插件任务

    2. 注册构建任务基本编码:

    • 构建命令
    • 使用插件

      module.exports = function(grunt){ // 1. 初始化插件配置 grunt.initConfig({ //主要编码处 }); // 2. 加载插件任务 // grunt.loadNpmTasks('grunt-contrib-concat'); // 3. 注册构建任务 grunt.registerTask('default', []); };

    四、聊聊优秀的第三方方案

    UC的scrat,百度的fis,京东的athena,饿了么的cooking ,都是优秀的方案。

        前端工程化(模块化):简单理解为前端代码不再零散,有组织,有规范的管理起来。

    清单 2. Gulp 配置注入 index.html 相关的 js 文件

    (4)Grunt常用插件:

    1. grunt-contrib-clean——清除文件(打包处理生成的)
    2. grunt-contrib-concat——合并多个文件的代码到一个文件中
    3. grunt-contrib-uglify——压缩js文件
    4. grunt-contrib-jshint——javascript语法错误检查;
    5. grunt-contrib-cssmin——压缩/合并css文件
    6. grunt-contrib-htmlmin——压缩html文件
    7. grunt-contrib-imagemin——压缩图片文件(无损)
    8. grunt-contrib-copy——复制文件、文件夹
    9. grunt-contrib-requirejs——合并压缩requirejs管理的所有js模块文件
    10. grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行
    1、关于fis

    fis的热度应该是在13-14年开源构建工具尚没普及的年代,那时候应该fis1在业界是比较优秀的,也较好地解决了前端当时比较野蛮的开发方式。fis是个大而全的工具,为开发者制定了一套完整的开发者流程。对于小型团队,基础设施较弱,是完美的方案。从开发到部署,遵循他们的规范,一条龙服务。但是对于一些大企业,基础设施已经成型,fis也许并不是最适合的方案。无论是项目规范,亦或部署规范,都一定程度存在不兼容元素;未来需要扩展,技术上更替成本太大,绕不开fis的约束。

                          PS:个人感觉就是把后端mvc模式中v与c层都交了前端处理。

    //gulpfile.babel.js
      gulp.task('bower', function () {
      return gulp.src(paths.views.main)
      .pipe(wiredep({
      directory: yeoman.app   '/bower_components'
      }))
      .pipe(gulp.dest(yeoman.app));
      });
    

    2、Gulp(中文网)

    gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器
    能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务
    gulp更高效(异步多任务), 更易于使用, 插件高质量

    2、关于gulp

    2015年就是fis3了。同时,2015年是构建工具爆发的元年,fis1逐渐不满足业界需求,fis3是百度想挽留开发者的一步策略,但是热度也赶不上fis1了。2015年,grunt盛行。但2016年初gulp崛起,grunt被淘汰了。gulp一直盛行到今天,保持了比较稳定的发展,github也2.3w星了(插件9000 ),fis3是1.7k(插件440 ),fis1是2.7k。

       

    Webpack 代替了 grunt/gulp。为什么这么说?因为,Webpack 通过插件提供的能力,可以完成打包、扰码、开发、调试及 css 处理等任务。这块和 grunt/gulp 的功能重复了。事实上,也可以使用 gulp 来运行 Webpack,但是这种设计冗余了,gulp 的存在完全没有必要。

    (1)特点:

    • 任务化
    • 基于流(gulp有一个自己的内存,通过指定API将源文件流到内存中,完成相应的操作后再通过相应的API流出去)
    • 执行任务可以同步可以异步

    gulpfile.js-----gulp配置文件 任务执行时,会首先执行该文件

    3、自动化构建选型

    成型的企业,在前端技术选型上一般会是2个方案。(1)自造轮子,面向内部业务场景,密切配合技术选型以及基础设施,强耦合。(2)选用小而美的优秀开源方案,技术栈进行定制选型,如gulp webpack,预留可替代空间的搭配,应对不同复杂度的业务场景,并当有更优秀方案出现时,已最低的成本进行取代。

        前端代码篇 

    此外,Webpack 还有一项重要的功能,它改变了代码之间依赖的表示方法。上面的 gulp task 中 wiredep 用来在 index.html 中注入项目中所有的 bower 依赖,如清单 3。可以看出,通过浏览器的支持,js 之间可以相互引用,相互依赖。

    (2)重要API:

    1. gulp.src(filePath/pathArr) : 指向指定路径的所有文件,找到目标源文件,将数据读取到gulp的内存中
    2. gulp.dest(dirPath/pathArr):指向指定的所有文件夹,将文件输出到指定的文件夹中
    3. gulp.task(name, [deps], fn) :定义一个任务
    4. gulp.watch() :监视文件的变化

     

    4、进击的2017

    14 - 16年是前端爆发的几年,但17 - 18年 ,在业务系统框架以及构建工具2个方向上,是会相对稳定的一年。vue,react ,angular,gulp,webpack等,至少2年内应该都会是非常优秀的方案选型。其他的方向,node更多服务端职责,h5高级动画(webGL,svg ,webVR),跨端开发(谷歌的渐进式web应用以及阿里的weex),都是蓄力的阶段。

     

    清单 3. Wiredep 注入引用的 js 文件

    (3)安装步骤 (全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能)

    • 安装gulp:
    1. 全局安装gulp:新葡亰496net:Ionic3开辟IOS应用实例教程,调侃前端组件化的踩坑之路。npm install gulp -g
    2. 局部安装gulp:npm install gulp --save-dev
    • 配置编码: gulpfile.js

          //引入gulp模块
          var gulp = require('gulp');
          //注册任务*
          gulp.task('任务名', function() {
            ***// 任务的操作**
          });**

    **   ** //注册默认任务**
        gulp.task('default', ['任务名'])


    • **构建命令:
      在终端  根目录下  输入:
      gulp   **会执行gulpfile.js文件中所有的任务**

    **   gulp 任务名   **会执行gulpfile.js文件中指定的任务  

    • 使用gulp插件

        html:当然采用最新的html5标签。

    <!-- build:js(.) scripts/vendor.js -->
      <!-- bower:js -->
      <script  src="bower_components/jquery/dist/jquery.js"></script>
      <script
      src="bower_components/jquery-ui/jquery-ui.js"></script>
      <script src="bower_components/angular/angular.js"></script>
      <script  src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
      <!-- endbower -->
      <!-- endbuild -->
      <!-- build:js(app) scripts/scripts.js -->
      <!-- 3rd party packages should lay before scripts in projects-->
      <script src="build-scripts/app.js"></script>
      <script src="build-scripts/controllers/main.js"></script>
      <script
      src="build-scripts/controllers/task/management.js"></script>
      <script
      src="build-scripts/controllers/label/management.js"></script>
      <script
      src="build-scripts/controllers/system/management.js"></script>
      <!-- endbuild -->
    

    (4)相关插件 

    • gulp-concat : 合并文件(js/css)
    • gulp-uglify : 压缩js文件
    • gulp-rename : 文件重命名
    • gulp-less : 编译less 转化less语法为css
    • gulp-clean-css : 压缩css文件
    • gulp-livereload : 实时自动编译刷新

    下载插件(可一次下载安装多个,安装在项目根目录下):

    npm install gulp-concat gulp-uglify gulp-rename --save-dev

    npm install gulp-less gulp-clean-css --save-dev 

                 PS:值得一提的是,不要滥用html5的标签,比如section与div标签。

    Webpack 是怎么做的呢?如清单 4,这个代码是放在控制器中,显示的是声明依赖,这里使用了 ES6 的语法 import。相比较 wiredep 中的放在全局、使用相互引用的方式,Webpack 引用更加清晰,按需所取。这样一来,bower 管理器也没有必要存在了,因为 bower 作为服务于浏览器的包管理器,使用方式类似于 wiredep 这种互相引用方式,但是这种互相引用的方式在 Webpack 的声明依赖的模式中,并不适用。

    (5)举例:下面是一个gulpfile.js文件

    var gulp = require('gulp');//引入的gulp是一个对象
    //引入的插件  均为方法
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');
    var less = require('gulp-less');
    var cssClean = require('gulp-clean-css');
    
    //注册任务(基本语法)
    // gulp.task('任务名',function(){
    //     //任务的操作
    //
    // })
    
    //注册 合并压缩js的任务
    gulp.task('js',function(){
        return gulp.src('src/js/*.js') //找到目标源文件,将数据读取到gulp的内存中  *代表全部文件
            .pipe(concat('build.js')) //参数为 合并后 js文件的名字
            .pipe(gulp.dest('dist/js/')) //参数为 输出文件到的文件夹  只要还没有操作完说明当前的文件还在内存中
            .pipe(uglify()) //压缩文件
            .pipe(rename({suffix:".min"}))//重命名
            .pipe(gulp.dest('dist/js/'));
    });
    //注册 转换less为css的任务
    gulp.task('less',function(){
        //带上return 为异步 ;不带return 为同步;异步速度快,因为任务可以同时加载,建议用异步
        return gulp.src('src/less/*.less')
            .pipe(less()) //编译less文件为css文件
            .pipe(gulp.dest('src/css/'))
    });
    
    //注册 合并压缩css文件的任务
    gulp.task('css',['less'],function(){ //['less'] 表示 css任务的执行依赖于less任务,只有当less任务全部执行后,才会开启css任务
        return gulp.src('src/css/*.css') //找到文件
            .pipe(concat('build.css')) //合并文件
            .pipe(cssClean()) //压缩文件
            .pipe(rename({suffix: '.min'})) //重命名
            .pipe(gulp.dest('dist/css/')); //输出文件
    });
    //注册 默认任务
    gulp.task('default',['js','less','css']);
    

    终端处 在项目根目录下 输入:

    • gulp js  会自动执行该 js 任务
    • gulp css 会自动执行 该 css 任务
    • gulp less 会自动执行该less 任务
    • gulp 会自动执行所有任务

     目录结构大致如下:

         css:使用CSS Modules,让css局部模块化,保证css全局唯一性。

    清单 4. Angular2 中的 JS 相互引用

     新葡亰496net 8

    最后还有一个自动编译插件(即源码发生改变时,原先经过处理的文件会自动更新,不用再重新gulp构建一遍)

     自动编译

    下载插件:
    npm install gulp-livereload --save-dev
    
    配置编码::
    var livereload = require('gulp-livereload');
    
    //所有的任务后边 都要加上一个“管道”,来保持更新:
    .pipe(livereload());
    
    //注册 监测任务
    gulp.task('watch', ['default'], function () { 
    //开启监视:
    livereload.listen();
    //监视指定的文件, 并指定对应的处理任务
    
    gulp.watch('src/js/*.js',['js']);
    gulp.watch(['src/css/*.css','src/less/*.less'],['css'])
    
    });
    

    这样,当文件发生改变时,不用再重新gulp,编译的文件会自动发生改变

                   PS:建议配合webpack一起使用。

    import { AboutPage } from '../pages/about/about';
      import { ContactPage } from '../pages/contact/contact';
      import { HomePage } from '../pages/home/home';
      import { TabsPage } from '../pages/tabs/tabs';
    

    3、Webpack(中文网)

                   使用sass预处理,让css模块化,便于维护与管理css。

    所以,最后架构变成了什么样子? 从 npm 管理后端、控制程序依赖、bower 管理前端 JS 依赖的架构演化成 npm 来管理所有依赖、Webpack 完成打包、测试功能的架构。如图 1。

    (1)说明:

    Webpack是前端资源模块化管理和打包工具,一个模块打包器(bundler)。
    在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理
    它将根据模块的依赖关系进行静态分析,生成对应的静态资源

    Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

    与gulp和grunt相比,Webpack的处理速度更快更直接,能打包更多不同类型的文件,更主要的区别还是 webpack是一个模块化打包工具。

                   PS:我确实有点抵触css预处理,觉得没什么用,后来使用了css预处理自后,感觉真的很方便,

    图 1. 从 Angular1 到 Angular2 的技术演进

    (2)四个核心概念:

    • 入口(entry):指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
    • 输出(output):告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。
    • loader:让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理
    • 插件(plugins):使用时,require() 引入,然后把它添加到 plugins 数组中

                           我选用sass是因为很多css框架都有集成sass,便于使用而已。

    新葡亰496net 9

    (3)安装

    全局安装:

    npm install webpack webpack-cli --g
    

    ``局部安装(本地安装):

    npm install webpack webpack-cli --save-dev
    

                   使用PostCSS后处理,让css标准化,写出高质量的css。

    ES6 成为规范

    (4)举例:下面是一个 webpack.config.js文件

    const path = require('path');//path是内置的模块,用来设置路径
    const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
    const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除之前打包的文件
    
    module.exports = {
        entry: './src/js/entry.js', // 入口文件
        output: { // 输出配置
            filename: 'bundle.js', // 输出文件名
            path: path.resolve(__dirname, 'dist/js')  //输出文件路径配置  __dirname代表根目录
        },
        module: {
            rules: [ //样式 loader
                {
                    test: /.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                },
                { //图片 loader
                    test: /.(png|jpg|gif)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 8192
                            }
                        }
                    ]
                }
            ]
        },
        devServer: {//热部署
            contentBase: 'dist/js/' //若为空 webpack-dev-server默认服务于根目录下的index.html
        },
        plugins: [ //插件列表
            new HtmlWebpackPlugin({template: './index.html'}),
            new CleanWebpackPlugin(['dist']),
        ]
    };
    

    示例代码及教程

                   PS:后处理器基本是把sublime text里面的前端插件都搬过来了,完全实现前端自动化。

    js 框架的发展可谓是百花齐放,但是有一项技术在业界普遍达成共识,那就是 ES6。作为新一代的 js 语法规范,不但在浏览器端得到了广泛实现,而且应用于 Node 引擎端。

           js:使用html5新api。

    ES 对 JS 语言进行了扩充,使之更像是一门规范的面向对象语言。而 TS(typescript)在此基础之上,增加了类型定义及其检查的功能。例如清单 5 的 ionic 初始化程序段,用到了 Platform, StatusBar 的自定义数据类型。

                PS:html5 api更容易操作dom,实现一些新功能,比如拖拽。

    清单 5. Typescript 使用强类型声明变量

                使用ES6的语法。

    export class MyApp {
        rootPage:any = TabsPage;
        constructor(platform: Platform, statusBar: StatusBar, splashScreen:
        SplashScreen) {
        platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        statusBar.styleDefault();
        splashScreen.hide();
        });
        }
       }
    

                PS:js终于变成真正的javascript了,语法与java相似度更高了。

    Angular-cli

                使用jquery库。

    最后要说一下 Angular-cli 项目,现在各个框架提供者都会在框架之外提供一个 CLI 工具,包括 ember-cli, vue-cli 等等,帮助生成框架的脚手架。

                PS:  jquery永远不会过时,因为jquery有强大的插件。

    清单 6. 使用 Angular-cli 初始化项目

                使用js mvvm框架Angular.js或vue.js  

    > npm install -g @angular/cli
       > ng new project
       > cd project
       > ng serve
    

                PS:mvvm框架让web前端更易于提高web性能。当然啦,具体问题具体分析,慎用mvvm框架。

    总结

                       据个人感觉,vue.js比较适合移动端web项目,体积小,性能高。

    现在的 Web 开发技术,大多使用了组件化的模块组织结构,采用 npm/Webpack 等工具统一管理模块依赖。

                                         Angular.js比较适合PC端大型项目,功能强大。

    Ionic3 开发

        

    ionic 是移动端混合开发技术的代表技术,基于 Angular。移动混合开发技术,既使用 Web 开发技术,同时可以生成 IOS 和 Android native 的代码。通过 cordova,支持调用移动设备特有的 API,包括照相机,麦克风等等。随着 Angular 升级到 2,ionic 也支持了 Angular2 和 TS 的语法。

        前端构建工具篇

    Ionic-cli

     

    Ionic 提供的 CLI 工具,类似于 Angular-cli。我们使用它初始化一个项目。如清单 7。

        nodejs:一个从Chrome浏览器提取出来的强大的js解析器(js运行环境)。

    清单 7. 使用 Ionic-cli 初始化项目

                   PS:与java的JRE类似,一个高性能的运行环境。 

    > npm install -g ionic cordova
       > ionic start test tabs
       > cd test
       > ionic serve
    

          gulp:一个出色的前端任务构建工具。

    全局导航方式

                   PS:gulp使用js函数去编写任务流,简单明了。所以我选择gulp而不选grunt。

    这里可以看到运行 ionic start 创建脚手架的时候可以指定一个模板。如清单 7 中的 tabs。这里的模板分为两种,代表了 ionic 默认提供的两种全局导航方式,tabs 和 menu。

    webpack:一个出色的前端打包构建工具。

    tabs 布局提供了 app 下方的导航。如图 2 的 home,about 的几个选项;menu 布局提供了左边的滑动菜单,点击按钮,会出现滑动选项,如图 3。

                   PS:webpack真的是个神奇的打包工具,实现前端模块化的神器。

    图 2. 底部的 tabs 布局方式

     

    新葡亰496net 10

        补充**:现在一个前端的开发主流工具就使用脚手架(命令行工具),比如:vue的vue-cli。能迅速构架web应用项目,搭建开发环境与发布项目。**

    图 3. 侧边栏的 menu 布局方式

     

    新葡亰496net 11

         

    这里提供实现 menu 逻辑布局的代码,如清单 8,需要在控制器中注入 MenuController。

    清单 8. Menu 布局的控制器逻辑样例

    import { Component } from '@angular/core';
       import {MenuController, NavController} from 'ionic-angular';
       @Component({
        selector: 'page-home',
        templateUrl: 'home.html'
       })
       export class HomePage {
        constructor(public navCtrl: NavController, menu: MenuController) {
        menu.enable(true);
        }
       }
    

    清单 9. Menu 布局的前端显示样例

    <ion-header>
        <ion-navbar>
        <button ion-button menuToggle icon-only>
       <ion-icon name='menu'></ion-icon>
        </button>
        <ion-title>
        Menus
        </ion-title>
        </ion-navbar>
       </ion-header>
       <ion-content padding>
        <button ion-button block menuToggle>Toggle Menu</button>
       </ion-content>
       <ion-menu [content]="content">
        <ion-header>
        <ion-toolbar>
        <ion-title>Menu</ion-title>
        </ion-toolbar>
        </ion-header>
        <ion-content>
        <ion-list>
        <button ion-item (click)="openPage(homePage)">
        Home
        </button>
        <button ion-item (click)="openPage(friendsPage)">
        Friends
        </button>
        <button ion-item (click)="openPage(eventsPage)">
        Events
        </button>
        <button ion-item (click)="closeMenu()">
        Close Menu
        </button>
        </ion-list>
        </ion-content>
       </ion-menu>
       <ion-nav id="nav" #content></ion-nav>
    

    页面布局元素

    回到单个的页面布局,ionic 提供 header 和 content 两块。每块都可能包含多个元素,并且支持 grid 布局。Grid 类似于 bootstrap 前端布局的方式,它会把页面分为 12 格,可以使用 col-x 标明一个元素在页面中占格的区域。这里给出一个 List 元素在 grid 布局下的应用代码。如清单 10,采用了两个 col-6 把页面分为两列,它生成的样式如图 4。

    清单 10. List 元素在 grid 布局下的样例代码

    <ion-header>
        <ion-navbar>
        <ion-title>
        About
        </ion-title>
        </ion-navbar>
       </ion-header>
       <ion-content padding>
        <ion-grid>
        <ion-row>
        <ion-col col-6>
       <ion-list>
        <ion-list-header>
        Section I
        </ion-list-header>
        <ion-item>Terminator I</ion-item>
        <ion-item>Blade Runner</ion-item>
        <ion-item>
        <button ion-button color="danger" outline>Choose</button>
        </ion-item>
        </ion-list>
        </ion-col>
        <ion-col col-6>
        <ion-list>
        <ion-list-header>
        Section II
        </ion-list-header>
        <ion-item>Terminator II</ion-item>
        <ion-item>Blade Runner</ion-item>
        <ion-item>
        <button ion-button color="secondary"
        outline>Choose</button>
        </ion-item>
        </ion-list>
        </ion-col>
        </ion-row>
        </ion-grid>
       </ion-content>
    

    图 4. 使用 grid 分割页面布局

    新葡亰496net 12

    在一个 grid 控制的区域中,可以使用嵌套页面的方式布局元素,例如图 4 中的 list 元素。从大体上,这里的页面布局元素分为两大类。

    • 列式元素,包括 List/Card 等
    • 多页面元素,占据整个页,通过点击实现页面跳转和返回,包括 Modal/Segment/Slide 等

    其他元素

    当然,还有一些页面必须元素,例如按钮、输入框等用于页面交互的元素;另外,也有提示框,脚标等等提示元素。这块和 Web 开发很相似。

    总结

    相比于 Web 开发,ionic 同样使用了 grid 的 12 列布局模式。在整体的风格方面,受限于移动端的显示大小,提供的页面分割元素相对简单。在页面交互中,ionic 提供 List,Card,Segment 等页面控制风格,我们可以根据需求选择。

    真机测试

    最后一段,我们来说一下真机测试。运行添加 IOS 平台命令来初始化 IOS 工作区。完成后,会在项目的 platforms 文件夹下有 ios 目录,这里有生成供 Xcode 调用的代码。如清单 11。

    清单 11. Ionic 初始化 ios 和 android 平台

    > ionic cordova platform add ios
       > ionic cordova platform add android
    

    使用 xcode 打开 plaforms/ios/test.xcworkspace 工作区。在设备里面,可以选择模拟器例如 iphone6,iphone7,也可以选择连接到 Mac 的真机。由于 IOS 开发是要收费的,所以我们需要配置一个临时测试环境。

    • 打开 Xcode->Preferences->Accounts->Manage Certificates,新增一个 IOS Development 的证书。
    • 修改 Resources 目录下的.plist 文件的 Bundle identifier,给自己的项目填写一个开发组。
    • 最后,在手机上打开通用->设备管理,选择信任开发的 IOS 程序。

    如图 5,结果在真机上显示。最后,祝大家早日学会用 ionic3/Angular2 开发出自己的移动端程序。

    图 5. 真机测试

    新葡亰496net 13

    参考资源

    参考 Ionic 官方网站 ,了解更多 Ionic UI 组件

    查看 Webpack 迁移的研究 ,了解 Webpack 的具体配置方式

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

    您可能感兴趣的文章:

    • Angular 4.x Ionic3踩坑之Ionic 3.x界面传值详解
    • Angular 4.x Ionic3踩坑之Ionic3.x pop反向传值详解

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:Ionic3开辟IOS应用实例教程,调侃前

    关键词:

上一篇:没有了

下一篇:没有了