SlideShare uma empresa Scribd logo
1 de 43
Baixar para ler offline
WEBアプリケーションビルド・
               テストツール YEOMAN
                         HighTech Osaka
                              2012.12.19




12年12月22日土曜日
自己紹介

               • かみやん (Twitter@kamiyam)
               • システム開発会社の一プログラマ
               • Webサービスつくってます



12年12月22日土曜日
HTTP://YEOMAN.IO

12年12月22日土曜日
YEOMENとは?

     Yeomanはツールやライブラリを
  迅速で華麗にビルドし、Web環境を構築する
        ワークフローツールです。




12年12月22日土曜日
その前に、ビルドって?




12年12月22日土曜日
ビルド【build】

    ソースコードのコンパイルやライブラリのリンクなどを行
    い、最終的な実行可能ファイルを作成すること。また、
    そのような作業によって生成されたソフトウェアの版。



                     Via.   IT用語辞典



12年12月22日土曜日
コンパイル???
               リンク???



12年12月22日土曜日
.java   .class

12年12月22日土曜日
コンパイルとは

           人様が読みやすい言葉を
      PC様がわかりやすい言葉に
                変換する


12年12月22日土曜日
リンクとは

    ライブラリなどのファイル群
               の関連付けを行うこと



12年12月22日土曜日
WEBサイトに置き換える




12年12月22日土曜日
AIファイル   JPEGファイル




12年12月22日土曜日
JADE   HTML

12年12月22日土曜日
SASS     CSS

12年12月22日土曜日
Coffee    Java
               Script   Script



12年12月22日土曜日
jQuery.js   jQuery.min.js




12年12月22日土曜日
何かしらのツールなりで
               変換させて使っている
               ※ 変換:コンパイル以外も含む




12年12月22日土曜日
面倒・・・




12年12月22日土曜日
もっと楽にサイトを作りたい




12年12月22日土曜日
HTTP://YEOMAN.IO

12年12月22日土曜日
MY FEATURES
          •     Lightning-fast scaffolding — Easily scaffold new projects with customizable templates (e.g
               HTML5 Boilerplate, Twitter Bootstrap), AMD (via RequireJS) and more.
          •     Automatically compile CoffeeScript & Compass — Our LiveReload watch process
               automatically compiles source files and refreshes your browser whenever a change is made so
               you don't have to.
          •     Automatically lint your scripts — All your scripts are automatically run against jshint to ensure
               they're following language best-practices.
          •     Built-in preview server — No more having to fire up your own HTTP Server. My built-in one can
               be fired with just one command.
          •     Awesome Image Optimization — I optimize all your images using OptiPNG and JPEGTran so
               your users can spend less time downloading assets and more time using your app.
          •     AppCache manifest generation — I generate your application cache manifests for you. Just
               build a project and boom. You'll get it for free.
          •     Killer build process — Not only do you get minification and concatenation; I also optimize all
               your image files, HTML, compile your CoffeeScript and Compass files, generate you an application
               cache manifest and, if you're using AMD, we'll pass those modules through r.js so you don't have
               to.
          •     Integrated package management — Need a dependency? It's just a keystroke away. I allow you
               to easily search for new packages via the command-line (e.g., yeoman search jquery), install them
               and keep them updated without needing to open your browser.
          •     Support for ES6 module syntax — Experiment with writing modules using the latest
               ECMAScript 6 module syntax. This is an experimental feature that transpiles back to ES5 so you
               can use the code in all modern browsers.
          •     PhantomJS Unit Testing — Easily run your unit tests in headless WebKit via PhantomJS. When
               you create a new application, I also include some test scaffolding for your app.


                                                                                    VIA. HTTP://YEOMAN.IO

12年12月22日土曜日
YEOMANインストール前チェック

                 $ curl -L get.yeoman.io | bash

               ※ yeomanの全機能を使う場合は
                      表示されているすべてインストール




12年12月22日土曜日
Yeomanの特徴

12年12月22日土曜日
強力なSCAFFOLDING

                $ yeoman init [quickstart]

               Webアプリケーションフォルダ等の
                     ひな形が生成される




12年12月22日土曜日
AUTO COMPILE

      CoffeeScriptやCompassを自動でコンパイルする




12年12月22日土曜日
サーバいらず
               Yeomanはコマンドから
         ビルトインサーバーを起動することができる




12年12月22日土曜日
構文チェック

               JSHINTを使った構文チェック




12年12月22日土曜日
画像最適化

               ビルドによって画像の最適化を行う




12年12月22日土曜日
自由なテンプレート

         フォルダ構成を自由にテンプレート化できる




12年12月22日土曜日
自動リロード
                ファイルの変更を監視し
               HTTPサーバの自動でリロード




12年12月22日土曜日
パッケージ管理
               ライブラリ/モジュールのインストールを
                    楽に管理できる




12年12月22日土曜日
ES6サポート

               ECMAScript6をサポート




12年12月22日土曜日
How to Yeoman




12年12月22日土曜日
YEOMAN最短フロー
               $ yeoman init [quickstart]
               $ yeoman test
               $ yeoman server[:dist]
               $ yeoman build




12年12月22日土曜日
YEOMANフォルダ構成

                -appフォルダ
                #編集用フォルダ

                -tempフォルダ
                #開発用フォルダ

                -distフォルダ
                #本番設置用フォルダ




12年12月22日土曜日
いろいろなジェネレータ
   # Generators for MVC/MV* Frameworks
   # Skip our questions and get a H5BP, jQuery and Modernizr base
   $ yeoman init quickstart
   # Backbone Boilerplate generator scaffold
   $ yeoman init bbb
   # Ember-Rails generator scaffold
   $ yeoman init ember
   # Backbone-Rails generator scaffold
   $ yeoman init backbone



12年12月22日土曜日
ジェネレータテンプレート
  node_modules/yeoman/node_modules/yeoman-
  generators/lib/generators/xxxxxxx/

                テンプレートとして追加すると
               「yeoman init xxxxxxx」で実行可能




12年12月22日土曜日
パッケージ管理
  $ yeoman install # Install a package from the client-side package registry
  $ yeoman uninstall # Uninstall the package
  $ yeoman update # Update a package to the latest version
  $ yeoman list    # List the packages currently installed
  $ yeoman search # Query the registry for matching package names
  $ yeoman lookup # Look up info on a particular package




12年12月22日土曜日
Yeomanで利用している
                 NPMモジュール



12年12月22日土曜日
パッケージ管理
                  TWITTER BOWER
         HTTP://TWITTER.GITHUB.COM/BOWER/

               COMPONENT.JSONでライブラリの管理を一元化




12年12月22日土曜日
自動コンパイル/ 自動リロード
                      GRUNT
                 HTTP://GRUNTJS.COM/

               GURUNT.JSでタスクを管理
               (YEOMANではGRUNTFILE.JS)


12年12月22日土曜日
まとめ

               • クライアントサイドのテスト/ビルドツール


               • bower/gruntを利用している


               • 自動リロード




12年12月22日土曜日
ご静聴ありがとうございました




12年12月22日土曜日

Mais conteúdo relacionado

Semelhante a WEBアプリケーションビルド・ テストツール YEOMAN

Sugarcubeをはじめよう
SugarcubeをはじめようSugarcubeをはじめよう
SugarcubeをはじめようEihiro Saishu
 
Sinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶSinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶHiroshi Oyamada
 
Nseg20120929
Nseg20120929Nseg20120929
Nseg20120929hiro345
 
CMS / BLOG and SnoWOman
CMS / BLOG and SnoWOmanCMS / BLOG and SnoWOman
CMS / BLOG and SnoWOmanWO Community
 
すごいぞ!Google Chrome
すごいぞ!Google Chromeすごいぞ!Google Chrome
すごいぞ!Google ChromeEigoro Yamamura
 
DevOps Platform for Agile Cloud Application - Wakame-VDC Overview
DevOps Platform for Agile Cloud Application - Wakame-VDC OverviewDevOps Platform for Agile Cloud Application - Wakame-VDC Overview
DevOps Platform for Agile Cloud Application - Wakame-VDC Overviewaxsh co., LTD.
 
WordCampOsaka2012セッション資料
WordCampOsaka2012セッション資料WordCampOsaka2012セッション資料
WordCampOsaka2012セッション資料horike37
 
はじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & LinuxはじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & LinuxKazushi Kamegawa
 
NVIDIA GPUで作るHeadless X11 Linux
NVIDIA GPUで作るHeadless X11 LinuxNVIDIA GPUで作るHeadless X11 Linux
NVIDIA GPUで作るHeadless X11 LinuxTomoki SHISHIKURA
 
MacRubyとHotCocoaでMacのアプリを作ってみた
MacRubyとHotCocoaでMacのアプリを作ってみたMacRubyとHotCocoaでMacのアプリを作ってみた
MacRubyとHotCocoaでMacのアプリを作ってみたYukimitsu Izawa
 
Google IO 2012 つまみ食い(1) ADT r20 の新機能
Google IO 2012 つまみ食い(1) ADT r20 の新機能Google IO 2012 つまみ食い(1) ADT r20 の新機能
Google IO 2012 つまみ食い(1) ADT r20 の新機能Takuya Fujimura
 
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入Yu Nobuoka
 
Dockerfileを改善するためのBest Practice 2019年版
Dockerfileを改善するためのBest Practice 2019年版Dockerfileを改善するためのBest Practice 2019年版
Dockerfileを改善するためのBest Practice 2019年版Masahito Zembutsu
 
Docker実践入門
Docker実践入門Docker実践入門
Docker実践入門hiro nemu
 
Sflt17 meteorではじめる最速ウェブアプリ開発
Sflt17 meteorではじめる最速ウェブアプリ開発Sflt17 meteorではじめる最速ウェブアプリ開発
Sflt17 meteorではじめる最速ウェブアプリ開発Hironao Sekine
 
Seminar report (Building a Linux server and AWS SDK for Ruby)
Seminar report (Building a Linux server and AWS SDK for Ruby)Seminar report (Building a Linux server and AWS SDK for Ruby)
Seminar report (Building a Linux server and AWS SDK for Ruby)Tamotsu Furuya
 
JS開発におけるTDDと自動テストツール利用の勘所
JS開発におけるTDDと自動テストツール利用の勘所JS開発におけるTDDと自動テストツール利用の勘所
JS開発におけるTDDと自動テストツール利用の勘所Koji Nakamura
 

Semelhante a WEBアプリケーションビルド・ テストツール YEOMAN (20)

Aiming study#6pdf
Aiming study#6pdfAiming study#6pdf
Aiming study#6pdf
 
Sugarcubeをはじめよう
SugarcubeをはじめようSugarcubeをはじめよう
Sugarcubeをはじめよう
 
Sinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶSinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶ
 
ドリコムJenkins勉強会資料
ドリコムJenkins勉強会資料ドリコムJenkins勉強会資料
ドリコムJenkins勉強会資料
 
Nseg20120929
Nseg20120929Nseg20120929
Nseg20120929
 
CMS / BLOG and SnoWOman
CMS / BLOG and SnoWOmanCMS / BLOG and SnoWOman
CMS / BLOG and SnoWOman
 
すごいぞ!Google Chrome
すごいぞ!Google Chromeすごいぞ!Google Chrome
すごいぞ!Google Chrome
 
DevOps Platform for Agile Cloud Application - Wakame-VDC Overview
DevOps Platform for Agile Cloud Application - Wakame-VDC OverviewDevOps Platform for Agile Cloud Application - Wakame-VDC Overview
DevOps Platform for Agile Cloud Application - Wakame-VDC Overview
 
WordCampOsaka2012セッション資料
WordCampOsaka2012セッション資料WordCampOsaka2012セッション資料
WordCampOsaka2012セッション資料
 
はじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & LinuxはじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & Linux
 
NVIDIA GPUで作るHeadless X11 Linux
NVIDIA GPUで作るHeadless X11 LinuxNVIDIA GPUで作るHeadless X11 Linux
NVIDIA GPUで作るHeadless X11 Linux
 
MacRubyとHotCocoaでMacのアプリを作ってみた
MacRubyとHotCocoaでMacのアプリを作ってみたMacRubyとHotCocoaでMacのアプリを作ってみた
MacRubyとHotCocoaでMacのアプリを作ってみた
 
Google IO 2012 つまみ食い(1) ADT r20 の新機能
Google IO 2012 つまみ食い(1) ADT r20 の新機能Google IO 2012 つまみ食い(1) ADT r20 の新機能
Google IO 2012 つまみ食い(1) ADT r20 の新機能
 
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
 
Dockerfileを改善するためのBest Practice 2019年版
Dockerfileを改善するためのBest Practice 2019年版Dockerfileを改善するためのBest Practice 2019年版
Dockerfileを改善するためのBest Practice 2019年版
 
Heroku入門
Heroku入門Heroku入門
Heroku入門
 
Docker実践入門
Docker実践入門Docker実践入門
Docker実践入門
 
Sflt17 meteorではじめる最速ウェブアプリ開発
Sflt17 meteorではじめる最速ウェブアプリ開発Sflt17 meteorではじめる最速ウェブアプリ開発
Sflt17 meteorではじめる最速ウェブアプリ開発
 
Seminar report (Building a Linux server and AWS SDK for Ruby)
Seminar report (Building a Linux server and AWS SDK for Ruby)Seminar report (Building a Linux server and AWS SDK for Ruby)
Seminar report (Building a Linux server and AWS SDK for Ruby)
 
JS開発におけるTDDと自動テストツール利用の勘所
JS開発におけるTDDと自動テストツール利用の勘所JS開発におけるTDDと自動テストツール利用の勘所
JS開発におけるTDDと自動テストツール利用の勘所
 

Mais de kamiyam .

Socket.ioとBabylonJSで作ったIoT的ななにか
Socket.ioとBabylonJSで作ったIoT的ななにかSocket.ioとBabylonJSで作ったIoT的ななにか
Socket.ioとBabylonJSで作ったIoT的ななにかkamiyam .
 
Managing multi-package repositories
Managing multi-package repositoriesManaging multi-package repositories
Managing multi-package repositorieskamiyam .
 
TypeScript + Express
TypeScript + ExpressTypeScript + Express
TypeScript + Expresskamiyam .
 
プラベワークのススメ
プラベワークのススメプラベワークのススメ
プラベワークのススメkamiyam .
 
HomeKitとNode.jsを使ってSiriでコントロールするなにか
HomeKitとNode.jsを使ってSiriでコントロールするなにかHomeKitとNode.jsを使ってSiriでコントロールするなにか
HomeKitとNode.jsを使ってSiriでコントロールするなにかkamiyam .
 
Kinectを使った インタラクティブコンテンツを作った話
Kinectを使った インタラクティブコンテンツを作った話Kinectを使った インタラクティブコンテンツを作った話
Kinectを使った インタラクティブコンテンツを作った話kamiyam .
 
Node.jsでKinectを触ろうとして色々しくじった話
Node.jsでKinectを触ろうとして色々しくじった話Node.jsでKinectを触ろうとして色々しくじった話
Node.jsでKinectを触ろうとして色々しくじった話kamiyam .
 
ヒカ☆ラボ@Osaka NodeBotsハンズオン
ヒカ☆ラボ@Osaka NodeBotsハンズオンヒカ☆ラボ@Osaka NodeBotsハンズオン
ヒカ☆ラボ@Osaka NodeBotsハンズオンkamiyam .
 
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情についてNode.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情についてkamiyam .
 
JavaScript Performance 20160723
JavaScript Performance 20160723JavaScript Performance 20160723
JavaScript Performance 20160723kamiyam .
 
JavaScriptが魅せる新たな世界
JavaScriptが魅せる新たな世界JavaScriptが魅せる新たな世界
JavaScriptが魅せる新たな世界kamiyam .
 
WordBench Osaka #48 About Calypso
WordBench Osaka #48 About CalypsoWordBench Osaka #48 About Calypso
WordBench Osaka #48 About Calypsokamiyam .
 
Async Enhancement
Async EnhancementAsync Enhancement
Async Enhancementkamiyam .
 
はじめてのVue.js
はじめてのVue.jsはじめてのVue.js
はじめてのVue.jskamiyam .
 
Node.jsで始める Modern JavaScript Framework
Node.jsで始める Modern JavaScript FrameworkNode.jsで始める Modern JavaScript Framework
Node.jsで始める Modern JavaScript Frameworkkamiyam .
 
Scalable Node.js with Redis Store
Scalable Node.js with Redis StoreScalable Node.js with Redis Store
Scalable Node.js with Redis Storekamiyam .
 
Gruntの罪と罰
Gruntの罪と罰Gruntの罪と罰
Gruntの罪と罰kamiyam .
 
Node.js勉強会 Framework Koa
Node.js勉強会 Framework KoaNode.js勉強会 Framework Koa
Node.js勉強会 Framework Koakamiyam .
 
知っているつもりで実は知らない 拾う技術捨てる技術
知っているつもりで実は知らない 拾う技術捨てる技術知っているつもりで実は知らない 拾う技術捨てる技術
知っているつもりで実は知らない 拾う技術捨てる技術kamiyam .
 

Mais de kamiyam . (20)

Socket.ioとBabylonJSで作ったIoT的ななにか
Socket.ioとBabylonJSで作ったIoT的ななにかSocket.ioとBabylonJSで作ったIoT的ななにか
Socket.ioとBabylonJSで作ったIoT的ななにか
 
Managing multi-package repositories
Managing multi-package repositoriesManaging multi-package repositories
Managing multi-package repositories
 
TypeScript + Express
TypeScript + ExpressTypeScript + Express
TypeScript + Express
 
プラベワークのススメ
プラベワークのススメプラベワークのススメ
プラベワークのススメ
 
kyoto.js13
kyoto.js13kyoto.js13
kyoto.js13
 
HomeKitとNode.jsを使ってSiriでコントロールするなにか
HomeKitとNode.jsを使ってSiriでコントロールするなにかHomeKitとNode.jsを使ってSiriでコントロールするなにか
HomeKitとNode.jsを使ってSiriでコントロールするなにか
 
Kinectを使った インタラクティブコンテンツを作った話
Kinectを使った インタラクティブコンテンツを作った話Kinectを使った インタラクティブコンテンツを作った話
Kinectを使った インタラクティブコンテンツを作った話
 
Node.jsでKinectを触ろうとして色々しくじった話
Node.jsでKinectを触ろうとして色々しくじった話Node.jsでKinectを触ろうとして色々しくじった話
Node.jsでKinectを触ろうとして色々しくじった話
 
ヒカ☆ラボ@Osaka NodeBotsハンズオン
ヒカ☆ラボ@Osaka NodeBotsハンズオンヒカ☆ラボ@Osaka NodeBotsハンズオン
ヒカ☆ラボ@Osaka NodeBotsハンズオン
 
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情についてNode.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
 
JavaScript Performance 20160723
JavaScript Performance 20160723JavaScript Performance 20160723
JavaScript Performance 20160723
 
JavaScriptが魅せる新たな世界
JavaScriptが魅せる新たな世界JavaScriptが魅せる新たな世界
JavaScriptが魅せる新たな世界
 
WordBench Osaka #48 About Calypso
WordBench Osaka #48 About CalypsoWordBench Osaka #48 About Calypso
WordBench Osaka #48 About Calypso
 
Async Enhancement
Async EnhancementAsync Enhancement
Async Enhancement
 
はじめてのVue.js
はじめてのVue.jsはじめてのVue.js
はじめてのVue.js
 
Node.jsで始める Modern JavaScript Framework
Node.jsで始める Modern JavaScript FrameworkNode.jsで始める Modern JavaScript Framework
Node.jsで始める Modern JavaScript Framework
 
Scalable Node.js with Redis Store
Scalable Node.js with Redis StoreScalable Node.js with Redis Store
Scalable Node.js with Redis Store
 
Gruntの罪と罰
Gruntの罪と罰Gruntの罪と罰
Gruntの罪と罰
 
Node.js勉強会 Framework Koa
Node.js勉強会 Framework KoaNode.js勉強会 Framework Koa
Node.js勉強会 Framework Koa
 
知っているつもりで実は知らない 拾う技術捨てる技術
知っているつもりで実は知らない 拾う技術捨てる技術知っているつもりで実は知らない 拾う技術捨てる技術
知っているつもりで実は知らない 拾う技術捨てる技術
 

Último

TokyoTechGraduateExaminationPresentation
TokyoTechGraduateExaminationPresentationTokyoTechGraduateExaminationPresentation
TokyoTechGraduateExaminationPresentationYukiTerazawa
 
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2Tokyo Institute of Technology
 
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学ssusere0a682
 
UniProject Workshop Make a Discord Bot with JavaScript
UniProject Workshop Make a Discord Bot with JavaScriptUniProject Workshop Make a Discord Bot with JavaScript
UniProject Workshop Make a Discord Bot with JavaScriptyuitoakatsukijp
 
TEAMIN Service overview for customer_20240422.pdf
TEAMIN Service overview for customer_20240422.pdfTEAMIN Service overview for customer_20240422.pdf
TEAMIN Service overview for customer_20240422.pdfyukisuga3
 
The_Five_Books_Overview_Presentation_2024
The_Five_Books_Overview_Presentation_2024The_Five_Books_Overview_Presentation_2024
The_Five_Books_Overview_Presentation_2024koheioishi1
 

Último (6)

TokyoTechGraduateExaminationPresentation
TokyoTechGraduateExaminationPresentationTokyoTechGraduateExaminationPresentation
TokyoTechGraduateExaminationPresentation
 
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
 
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
 
UniProject Workshop Make a Discord Bot with JavaScript
UniProject Workshop Make a Discord Bot with JavaScriptUniProject Workshop Make a Discord Bot with JavaScript
UniProject Workshop Make a Discord Bot with JavaScript
 
TEAMIN Service overview for customer_20240422.pdf
TEAMIN Service overview for customer_20240422.pdfTEAMIN Service overview for customer_20240422.pdf
TEAMIN Service overview for customer_20240422.pdf
 
The_Five_Books_Overview_Presentation_2024
The_Five_Books_Overview_Presentation_2024The_Five_Books_Overview_Presentation_2024
The_Five_Books_Overview_Presentation_2024
 

WEBアプリケーションビルド・ テストツール YEOMAN

  • 1. WEBアプリケーションビルド・ テストツール YEOMAN HighTech Osaka 2012.12.19 12年12月22日土曜日
  • 2. 自己紹介 • かみやん (Twitter@kamiyam) • システム開発会社の一プログラマ • Webサービスつくってます 12年12月22日土曜日
  • 4. YEOMENとは? Yeomanはツールやライブラリを 迅速で華麗にビルドし、Web環境を構築する ワークフローツールです。 12年12月22日土曜日
  • 6. ビルド【build】 ソースコードのコンパイルやライブラリのリンクなどを行 い、最終的な実行可能ファイルを作成すること。また、 そのような作業によって生成されたソフトウェアの版。 Via. IT用語辞典 12年12月22日土曜日
  • 7. コンパイル??? リンク??? 12年12月22日土曜日
  • 8. .java .class 12年12月22日土曜日
  • 9. コンパイルとは 人様が読みやすい言葉を PC様がわかりやすい言葉に 変換する 12年12月22日土曜日
  • 10. リンクとは ライブラリなどのファイル群 の関連付けを行うこと 12年12月22日土曜日
  • 12. AIファイル JPEGファイル 12年12月22日土曜日
  • 13. JADE HTML 12年12月22日土曜日
  • 14. SASS CSS 12年12月22日土曜日
  • 15. Coffee Java Script Script 12年12月22日土曜日
  • 16. jQuery.js jQuery.min.js 12年12月22日土曜日
  • 17. 何かしらのツールなりで 変換させて使っている ※ 変換:コンパイル以外も含む 12年12月22日土曜日
  • 21. MY FEATURES • Lightning-fast scaffolding — Easily scaffold new projects with customizable templates (e.g HTML5 Boilerplate, Twitter Bootstrap), AMD (via RequireJS) and more. • Automatically compile CoffeeScript & Compass — Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to. • Automatically lint your scripts — All your scripts are automatically run against jshint to ensure they're following language best-practices. • Built-in preview server — No more having to fire up your own HTTP Server. My built-in one can be fired with just one command. • Awesome Image Optimization — I optimize all your images using OptiPNG and JPEGTran so your users can spend less time downloading assets and more time using your app. • AppCache manifest generation — I generate your application cache manifests for you. Just build a project and boom. You'll get it for free. • Killer build process — Not only do you get minification and concatenation; I also optimize all your image files, HTML, compile your CoffeeScript and Compass files, generate you an application cache manifest and, if you're using AMD, we'll pass those modules through r.js so you don't have to. • Integrated package management — Need a dependency? It's just a keystroke away. I allow you to easily search for new packages via the command-line (e.g., yeoman search jquery), install them and keep them updated without needing to open your browser. • Support for ES6 module syntax — Experiment with writing modules using the latest ECMAScript 6 module syntax. This is an experimental feature that transpiles back to ES5 so you can use the code in all modern browsers. • PhantomJS Unit Testing — Easily run your unit tests in headless WebKit via PhantomJS. When you create a new application, I also include some test scaffolding for your app. VIA. HTTP://YEOMAN.IO 12年12月22日土曜日
  • 22. YEOMANインストール前チェック $ curl -L get.yeoman.io | bash ※ yeomanの全機能を使う場合は 表示されているすべてインストール 12年12月22日土曜日
  • 24. 強力なSCAFFOLDING $ yeoman init [quickstart] Webアプリケーションフォルダ等の ひな形が生成される 12年12月22日土曜日
  • 25. AUTO COMPILE CoffeeScriptやCompassを自動でコンパイルする 12年12月22日土曜日
  • 26. サーバいらず Yeomanはコマンドから ビルトインサーバーを起動することができる 12年12月22日土曜日
  • 27. 構文チェック JSHINTを使った構文チェック 12年12月22日土曜日
  • 28. 画像最適化 ビルドによって画像の最適化を行う 12年12月22日土曜日
  • 29. 自由なテンプレート フォルダ構成を自由にテンプレート化できる 12年12月22日土曜日
  • 30. 自動リロード ファイルの変更を監視し HTTPサーバの自動でリロード 12年12月22日土曜日
  • 31. パッケージ管理 ライブラリ/モジュールのインストールを 楽に管理できる 12年12月22日土曜日
  • 32. ES6サポート ECMAScript6をサポート 12年12月22日土曜日
  • 34. YEOMAN最短フロー $ yeoman init [quickstart] $ yeoman test $ yeoman server[:dist] $ yeoman build 12年12月22日土曜日
  • 35. YEOMANフォルダ構成 -appフォルダ #編集用フォルダ -tempフォルダ #開発用フォルダ -distフォルダ #本番設置用フォルダ 12年12月22日土曜日
  • 36. いろいろなジェネレータ # Generators for MVC/MV* Frameworks # Skip our questions and get a H5BP, jQuery and Modernizr base $ yeoman init quickstart # Backbone Boilerplate generator scaffold $ yeoman init bbb # Ember-Rails generator scaffold $ yeoman init ember # Backbone-Rails generator scaffold $ yeoman init backbone 12年12月22日土曜日
  • 37. ジェネレータテンプレート node_modules/yeoman/node_modules/yeoman- generators/lib/generators/xxxxxxx/ テンプレートとして追加すると 「yeoman init xxxxxxx」で実行可能 12年12月22日土曜日
  • 38. パッケージ管理 $ yeoman install # Install a package from the client-side package registry $ yeoman uninstall # Uninstall the package $ yeoman update # Update a package to the latest version $ yeoman list # List the packages currently installed $ yeoman search # Query the registry for matching package names $ yeoman lookup # Look up info on a particular package 12年12月22日土曜日
  • 39. Yeomanで利用している NPMモジュール 12年12月22日土曜日
  • 40. パッケージ管理 TWITTER BOWER HTTP://TWITTER.GITHUB.COM/BOWER/ COMPONENT.JSONでライブラリの管理を一元化 12年12月22日土曜日
  • 41. 自動コンパイル/ 自動リロード GRUNT HTTP://GRUNTJS.COM/ GURUNT.JSでタスクを管理 (YEOMANではGRUNTFILE.JS) 12年12月22日土曜日
  • 42. まとめ • クライアントサイドのテスト/ビルドツール • bower/gruntを利用している • 自動リロード 12年12月22日土曜日