www.5197.com-澳门新蒲京娱乐场官网

热门关键词: www.5197.com,澳门新蒲京娱乐场官网

利用Yeoman和Polymer创造Web应用【澳门新蒲京娱乐场

npm install -g grunt-cli bower

generator-angular

安装:sudo npm install -g generator-angular

什么是Yeoman?

现代 Web App 的脚手架工具

本条新创造的Polymer元素已经命名字为post.html,在/elements目录中。

安装(yeoman,bower,grunt):

安装:npm install -g yo
查看:
yo doctor
yo --help
安装:sudo npm install -g bower
bower --help
安装:

Yeoman 的使用

安装 angular
yo angular learnangular(项目名)

yo polymer:element blog[?] Would you like to include constructor=''? No[?] Import to your index.html using HTML imports? Yes[?] Import local elements into this one? (e.g "a.html b.html" or leave blank) post.html[?] Import installed Bower elements? (e.g "polymer-ajax" or leave blank)

Yeoman是谷歌(Google卡塔尔(قطر‎的社团和外界进献者共青团和少先队同盟开拓的,他的对象是透过Grunt(叁个乐善好施付出义务自动化的命令行工具)和Bower(多少个HTML、CSS、Javascript和图片等前端财富的包微处理机)的包裹为开拓者创制一个医用的劳作流程。
Yeoman主要有三有的组成:yo(脚手架),grunt(营造筑工程具)、bower(包微处理机)。那多个工具分别独立开荒,但必要匹配使用。
Yeoman
它目的在于为开采者提供一文山会海健壮的工具、程序库和职业流,支持她们不慢营造出卓越、引人瞩目标Web应用。
它不然则叁个工具,仍旧三个工作流。它事实上不外乎了多个部分yo、grunt、bower,分别用于项目标启航、文件操作、包管理。
Yo: Yo是多少个类型伊始化学工业具,能够生成意气风发套运维某类项目必须的品种文件。
Bower: 四个客商端技巧的软件包微处理机,它可用以寻找、安装和卸载如JavaScript、HTML、CSS之类的网络能源。
GruntJS: GruntJS是基于JavaScript的下令行创设筑工程具,它能够扶持开垦者们自动化重复性的干活。
[参照他事他说加以考察网址](http://yijiebuyi.com/blog/a427ce8c25dd1339517ffa0a0b8f5896.html)

Yeoman 的作用

在 Web 项目标立项阶段,使用 Yeoman 来扭转项目标文本,代码构造。Yeoman 自动将最好实施和工具整合进来,大大加快和有助于了笔者们继续开荒。

Yeoman是Google的协会和表面进献者团队协作开垦的,他的靶子是由此Grunt(一个用于开采职责自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图表等前端能源的包微电脑)的包裹为开采者创造多个易用的专门的学业流。
Yeoman的指标不仅仅是要为新类型确立职业流,同期仍为着化解前端开辟所面对的大队人马严重难点,譬喻零散的正视关系。
Yeoman首要有三有个别组成:yo(脚手架工具)、grunt(创设筑工程具)、bower(包微型机)。那八个工具是分别独立开辟的,然而急需协作使用,来促成大家十分的快的职业流格局。

上边这幅图很形象的标识了她们三者之间的同盟关系。

澳门新蒲京娱乐场官网 1

Yeoman.png

YOMAN的特性

打雷般的初步化:项目始于阶段,能够依据现存的模版框架(举个例子:HTML5 Bolierplate、推特(Twitter卡塔尔(英语:State of Qatar) Bootstrap)进行项目初叶化的飞跃塑造。
震古烁今的创设流程:不独有囊括JS、CSS代码的裁减、合併,还是能够对图片和HTML文件进行优化,同不经常间对CoffeScript和Compass的文本实行编写翻译。
活动编写翻译CoffeScript和Compass:通过LiveReload进度能够对源文件发出的变动自动编写翻译,达成后刷新浏览器。
机关Lint代码:对于JS代码会活动进行JSLint测量试验,确认保证代码符合最棒编制程序执行。
放置的预览服务器:不再须求协调铺排服务器了,使用内置的就能够快捷预览。
震动的图样优化:通过应用OptiPNG和JPEGTran来优化图片,裁减下载损耗。
徘徊花级包管理:通过bower search jQuery,能够便捷安装和改正相关的公文,不再须求开发浏览器自个儿寻找了。
PhantomJS单元测量试验:能够丰裕有益的施用PhantomJS实行单元测验,一切在类型初步的时候都准备好了。

它包蕴:你自定义元素的模板代码,允许你在您的种类页面中采纳自定义DOM元素。template标签便于浏览器端模板渲染,并为你的自定义成分封装样式。成分注册模板和生命周期事件。管理真的的数据源我们的博客必要四个存取新文章的地点。为了演示管理真的的数据服务,我们筹算动用谷歌(Google卡塔尔(英语:State of Qatar)Apps Spreadsheets API。它同意大家轻巧读取来自谷歌(Google卡塔尔国Docs成立的别的数据表。下边是设置步骤:1. 用你的浏览器(提议采取Chrome卡塔尔国张开这几个GoogleDocs数据表,它包蕴如下小说多少样品:ID、Title、Author、Content、Date、Keywords、E-mail、Slug、link2. 点击菜单栏”文件“开关,然后接收”制作别本”来创立你和煦的数据表别本。你能够在您有空时免费编辑内容、增加或删除post。3. 再度点击菜单栏”文件“开关并选用”公布到网络”4. 点击”开首颁发”5. 在”获取已公布数据的链接“上边,有一长串链接,你要求找到URubiconL中参数Key的值对应的字符串像那样:_bIaw69jI1dHhmVkU1dnpfMHdOMXJjTDFIbnFxbmcoutput=html找出的Key是:0Ao_bIaw69jI1dHhmVkU1dnpfMHdOMXJjTDFIbnFxbmc6. 将您的Key值字符串粘贴到上面链接中替换”your-key-gose-here“:,粘贴完的链接是这么:_bIaw69jI1dHhmVkU1dnpfMHdOMXJjTDFIbnFxbmc/od6/public/values?alt=json-in-script7. 用浏览器展开这么些链接看看你博客内容的JSON数据。把UXC90L留作记录然后花点时间看风度翩翩看那一个数据,今后你须求反复的在荧屏上出示那个数量。在浏览器上输出的那几个JSON恐怕会让您看率先眼就怵头再看下来,然而别顾忌,咱只对post相关的多寡感兴趣。谷歌数据表API输出你博客数据表中每段数据域都有多少个特种前缀post.gsx$ 。譬喻: post.gsx$title.$t、post.gsx$author.$t、post.gsx$content.$t 由此及彼。当我们屡次查看输出的JSON的每大器晚成行,大家就足以因此锁定那些前缀字段来神速得到相应数额。今后您能够起来为您以前新架起的post成分绑定来自谷歌(Google卡塔尔国数据表的数量了。在这里本人要介绍一下性质post,它能够读取post的title、author、content和别的大家早先创设的数额字段。selected属性(今后会时常选取卡塔尔国用来展现客商导航到相应链接对应的post。

生成器

功用:不一样的生成器可以活动营造差别的种类,并安装供给的包。
使用:

Yeoman会询问你有个别诸如是或不是希望包括constructor或选择HTML import将post成分导入index.html的标题,今后只须要统统回答No就可以,而在第1个难点空格跳过。注意:比方你在第四个难题回复”Yes”,生成器便会导入post.html并将其包罗在index.html中。它还只怕会注明以便在页面load时渲染这一个成分。

绝大比超多人都很精通急迅的Web应用开拓有多种要。在你进行一些没有味道的类型支出时,你会因为各个令你发烧的作业而感到到顾忌、烦躁,举个例子找出项目模板、配置项目基本功结构、开拓景况、测量试验情状以致一而再三翻五次的花色优化和减少。这种平淡无奇如流水线般的事情,偶然一回辛亏,但若是生生不息的开展肖似的连串,你的脑部不会炸掉才怪!幸运的是,有一点点提高的前端工具能帮大家自动化完结那些业务,让我们隔离无味的流水生产线职业,将越来越多的生气放在主旨功用编码上边。本文少禽向你体现什么采用Yeoman和Polymer高效实现这一个任务,Yeoman用来自动化制造Web应用专门的学问流,而Polymer则是由步入Google的原Palm webOS开垦团队制作的三个前端库,其基于Shadow DOM、Custom Elements、MDV等风靡浏览器天性,使用Web Components来填充和装修Web应用。本文翻译自匈牙利(Magyarország卡塔尔语最初的小说《Building Web Apps With Yeoman And Polymer》,由于Türkiye Cumhuriyeti语原作内容超多API和方法已更新,所以彬GO在这里间翻译的还要做了异常的小幅度面退换和更新,如有错误接待指正。声明:本文涉及的一片段API到当下仍未完全标准且今后也许会略有变动。在运用那几个实验性API前请小心评估你的开采品种。注意:假诺你早前未曾通晓过Web Components,建议您先去读黄金时代读他们提供的有关Web平台湾特务性的文书档案。其会指点你哪些行使基于Custom Elements,Shadow DOM、HTML Imports等风味的的Polymer。即使你德文不太好,也得以看看那篇文章《自定义成分–为您的HTML代码定义新成分》。下文中会多次关系”成分(element卡塔尔(قطر‎”那么些词,我们看届期恐怕会与和睦概念里的因素(html标签卡塔尔(قطر‎有些冲突,因为此处涉及的轻微成分是能够独立成文件来援用的,实际那就是Polymer的眼光——一切皆组件,希望通过各样自定义成分(组件卡塔尔国来整合三个完整的Web应用,所以在下文中,假若您见到”成分”但无计可施驾驭,能够尝试将其精晓为”组件”。Yeoman的三大成员:Yo、Grunt和BowerYeoman就是特别头戴礼帽器具三大军器帮您消释开拓效能的人:yo : 为你成功项目系统框架和底工构造搭建筑工程作的”脚手架”工具,它就是用来衰亡自个儿此前提到的那个平淡无奇流水生产线职业的工具,也得以算是项目构造生成器。grunt:用来成立、预览和测量检验你的种类,这里要谢谢Yeoman团队和grunt-contrib的合营策划。bower:近似于Node.js的品类脚本正视处理,那样您就不必再手动下载和治本你项目标剧本文件了。你只有须求输入意气风发两行命令,Yeoman就会帮你消除项指标完好框架模板的搭建任务(或个别需求配备的模块卡塔尔,编写翻译你的Sass代码,压缩与统风流倜傥你的CSS、JavaScript、HTML以致图片,然后在当前项目目录帮你架设八个简单易行的Web服务以便任何时候通过浏览器访问,他竟然还是能进行单元测验或越多你意外的天职。你能够透过npm安装超越570种生成器,有很多都以开源的,在那之中最资深的生成器满含generator-angular、generator-backbone和generator-ember。假使设置过新版Node.js,在命令行输入并举办以下命令来安装yo

像大家渴求blog成分通过HTML imports导入到我们的index.html相符(那是风流浪漫种在HTML文书档案中复用某HTML文书档案的法子卡塔尔(قطر‎,我们还要核查一下它是否准确的增加到小说标签中:

上面,大家来由此上面包车型地铁授命创立三个blog成分,它会包含post集结和您博客的构造音信:

它会掌握你是或不是希望包含推特(Twitter卡塔尔(英语:State of Qatar)Bootstrap,假诺你愿意,按回车键就能够.那是由此Bower重视的新型版本Polymer为大家项目职业流架设的index.html、目录结商谈Grunt职分。今后你能够悠闲地喝杯咖啡等待应用开头化完结^_^OK,开头化实现之后,命令行执行”grunt server”,然后就可以在浏览器看见如下样子:注意:要是施行”grunt server”时有报错,请先检查是还是不是已安装compass和sass,已设置compass和sass却报错”897 permission denied”形似主题素材,可能是因为compass和sass版本问题产生,能够命令行卸载并安装较早版本就能够祛除:

npm install -g yo

劳动支持实时更新,意思正是您能够在编辑器中编码,然后浏览器会在你保存的还要活动刷新页面。那会让您实时的看来网页的浮动,而不用苦逼的不停手动刷新页面。上面,咱们来创立一个呈现博客随笔的新Polymer元素。

yo polymer:element post
npm install -g generator-webapp
npm install generator-polymer -g
yo polymer:element post[?] Would you like to include constructor=''? No[?] Import to your index.html using HTML imports? No[?] Import local elements into this one? (e.g 'a.html b.html' or leave blank) create app/elements/post.html
!doctype html head meta charset="utf-8"li
gem uninstall sassgem uninstall compassgem install compass --pregem install sass --pre
polymer-element name="polymer-post" attributes="post selected"template style @host { :scope {display: block;} } /style div  template if="{{post.gsx$slug.$t === selected}}" h2 a href="#{{post.gsx$slug.$t}}" {{post.gsx$title.$t }} /a /h2 pBy {{post.gsx$author.$t}}/p p{{post.gsx$content.$t}}/p pPublished on: {{post.gsx$date.$t}}/p smallKeywords: {{post.gsx$keywords.$t}}/small /template /div/templatescript Polymer('polymer-post', { created: function() { }, enteredView: function() { }, leftView: function() { }, attributeChanged: function(attrName, oldVal, newVal) { } });/script/polymer-element

OK,以往你的花色现已支撑Web Components了!大家刚刚安装的生成器有后生可畏对特色你可能会用到:polymer:element 用来创建新的特定的Polymer成分,如:yo polymer:element carouselpolymer:app 用来为您架设发轫index.html。Gruntfile.js包括项目开创构造。它还为你项目样式使用Sass Bootstrap提供一些装置项。起初创制叁个Polymer应用:大家要接收一些自定义Polymer成分和我们的新生成器成立多个简短的博客。 Blog 德姆o 预览 首先,在命令行成立叁个新目录并跻身这些目录:现在能够通过下边三令五申运维Polymer:

来自:彬Go

澳门新蒲京娱乐场官网 2

link rel="import" href="post.html"polymer-element name="polymer-blog" attributes=""template style @host { :scope {display: block;} } /style spanI'm bblog-element/b. This is my Shadow DOM./span post-element/post-element/templatescript Polymer('polymer-blog', { //applyAuthorStyles: true, //resetStyleInheritance: true, created: function() { }, enteredView: function() { }, leftView: function() { }, attributeChanged: function(attrName, oldVal, newVal) { } });/script/polymer-element
polymer-element name="post-element" attributes=""template style @host { :scope {display: block;} } /style spanI'm bpost-element/b. This is my Shadow DOM./span/templatescript Polymer('post-element', { //applyAuthorStyles: true, //resetStyleInheritance: true, created: function() { }, enteredView: function() { }, leftView: function() { }, attributeChanged: function(attrName, oldVal, newVal) { } });/script/polymer-element

万风流浪漫你还还没设置grunt和bower,也急需一齐安装

yo polymer

注意:只要您想打听什么行使Yeoman成立基于相像Backbone.js那类框架的Web应用,你能够看看《Building Apps With The Yeoman Workflow》Polymer生成器像自家此前提到的,Polymer正是用来为扶植Web Components的今世浏览器填充和装修的前端库。generator-polymer是能够支持你选择Yeoman架起Polymer应用的新生成器。你能够透过命令行轻松创造以致自定义Polymer成分(自定义成分卡塔尔国,还足以接纳HTML Imports导入这一个自定义成分。这种生成Web应用模板的主意会为您节省成千上万光阴。大家可以透过上面讲过的二种格局的即兴大器晚成种来设置Polymer,上边是命令行安装Polymer生成器:

就疑似此简单,现在你能够直接在命令行推行Yo、Grunt和Bower,上边是试行yo的出口:采取”Install a genarator”之后,会询问你须求设置什么生成器,倘让你愿意成立三个例行的Web应用,能够输入”generator-webapp”并回车:然后接受相应的生成器回车就能够初叶安装。还会有另生机勃勃种方式安装生成器,就在在命令行直接输入:

那时候大家利用HTML imports来将blog导入到index.html以便让它在页面中显示。在第八个选拔,大家钦点其为post.html。我们率先创设了二个新的因素文件(blog.html卡塔尔(英语:State of Qatar)并把它增加到/elements目录,将来将post.html导入并置于template标签中:

本文由www.5197.com发布于web前端,转载请注明出处:利用Yeoman和Polymer创造Web应用【澳门新蒲京娱乐场