VITAL UI KIT

LAURA GSS-FED

/,

,

/ /

Ai, Sketch, Ps JS, CSSGulp, NPM, Bower, Angular, Cordova,

Ionic

UI UX RWDCross-Browser

CRUDCross-Platform

VS

—

—

— Rasmus Lerdorf PHP

”

“

• UI -> •

• ( )

•

•

+ 50%

Html 5%

CSS 20%

JS 25%

• Install (by NPM, Bower) • Developing (by Gulp)

• sass->css, jade->html, live reload

•

• • Production / Build

js dirtify, code/ , ... • // (Deploy) APP

INSTALL

• NodeJS - JavaScript runtime built on Chrome's V8 JavaScript engine

• NodeJS •

NodeJS NPM (Node Package Management NodeJS )

gulp (Task runner) JS Framework (Cordova, Angular…)

Bower ( )

DEVELOPING

• , live reload

•

• -

• -

GULP

TASK RUNNER

PRODUCTION

• js, image ,

• html , (spacing) ,

• css , , style ( , )

node_module (config file: package.json) ,

(devDependencies), eslint, sass

bower_components (config file: bower.json) , package.json

src, library (dependencies), ionic, JQuery

gulp (config file: config.js) tasks/ task util/ task index.js gulp config.js task

src

www src src

GITHUB

• • README, Document, Issues

(?)

—

...

”

“

README

• https://github.com/GSS-FED/gulp-starter-kit • Dependencies

• Development

• Install

• Usage

• File Structure, Project Management, Project Development…

• Monday Workshop • 6pm-7pm 801 ( ) • Slack “monday-workshop” chanel (

) •

• • https://hackpad.com/Monday-Workshop-XRVCqoisJVI

REFERENCE

• Gulp, Grunt, Bower npm http://blog.darkthread.net/post-2014-09-25-gulp-grunt-bower-npm.aspx

• Gulp https://kejyuntw.gitbooks.io/gulp-learning-notes/content/

• 11 http://hk.thenewslens.com/post/305094/

THANKS FOR LISTENING