Yeoman入門
Yeoman触ってみた。
下記の記事を読んでインストールやプロキシ設定とかしてる前提で書く。
Yeoman
クライアントサイドの技術（Haml、Slim、Jade、Sass、LESS、Stylus、Coffeescript、TypeScript等）は増加の一途をたどっていて多種多様となっている。
HTML/CSSプリプロセッサやAltJS等の拡張言語はコンパイルするし、css/jsファイルはインスペクションしたり圧縮したりする。
Yeomanはアプリの雛形生成、コンパイル、テスト、インスペクション圧縮等のワークフローを提供してくる。
YeomanはYo、Grunt（タスクランナー）、Bower（パッケージマネージャ）で構成されている。
ここではYo（yeoman-generatorともいう）について書く。
インストール
> npm install -g yo
使い方
Yoはジェネレータ（yeoman-generator）という仕組みを使用して、アプリの雛形を生成する。
雛形は以下のように検索する。
> npm search yeoman-generator 〜省略〜 generator-webapp Scaffold out a front-end web app =sindresorhus… 2014-10-07 0.5.1 yeoman-generator web app front-end h5bp modernizr jquery grunt 〜省略〜
2000個強出てきた。どれ使っていいかわからん。
とりあえずオーソドックスそうな上記の「generator-webapp」を使用する。
雛形を作成するコマンドは以下。（プロジェクトディレクトリ作成コマンドも含む）
> mkdir yoSample > cd yoSample > yo webapp _-----_ | | |--(o)--| .--------------------------. `---------´ | Welcome to Yeoman, | ( _´U`_ ) | ladies and gentlemen! | /___A___\ '__________________________' | ~ | __'.___.'__ ´ ` |° ´ Y ` Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app. ? What more would you like? Bootstrap create Gruntfile.js create package.json create .gitignore create .gitattributes create bower.json create .jshintrc create .editorconfig create app\favicon.ico create app\404.html create app\robots.txt create app\.htaccess create app\styles\main.css create app\index.html create app\scripts\main.js I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself. npm WARN package.json yosample@0.0.0 No description npm WARN package.json yosample@0.0.0 No repository field. npm WARN package.json yosample@0.0.0 No README data bower cached https://github.com/twbs/bootstrap.git#3.0.3 bower validate 3.0.3 against https://github.com/twbs/bootstrap.git#~3.0.3 bower cached https://github.com/jquery/jquery.git#1.11.2 bower validate 1.11.2 against https://github.com/jquery/jquery.git#~1.11.0 bower install jquery#1.11.2 bower install bootstrap#3.0.3 \ jquery#1.11.2 bower_components\jquery bootstrap#3.0.3 bower_components\bootstrap └── jquery#1.11.2 \ > phantomjs@1.9.15 install h:\workspace\yoSample\node_modules\grunt-mocha\node_modules\grunt-lib-phantomjs\nod e_modules\phantomjs > node install.js Downloading https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.8-windows.zip Saving to [UserHome]\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip Using proxy http://xxxx:******@proxy.example.com:8080/ Receiving... [=======================================-] 97% 0.0s Received 7292K total. Extracting zip contents Removing h:\workspace\yoSample\node_modules\grunt-mocha\node_modules\grunt-lib-phantomjs\node_modules\phantomj s\lib\phantom Copying extracted folder [UserHome]\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip-extract-142 5017693714\phantomjs-1.9.8-windows -> h:\workspace\yoSample\node_modules\grunt-mocha\node_modules\grunt-lib-ph antomjs\node_modules\phantomjs\lib\phantom Writing location.js file Done. Phantomjs binary available at h:\workspace\yoSample\node_modules\grunt-mocha\node_modules\grunt-lib-phan tomjs\node_modules\phantomjs\lib\phantom\phantomjs.exe > jpegtran-bin@0.2.8 postinstall h:\workspace\yoSample\node_modules\grunt-contrib-imagemin\node_modules\image- min\node_modules\jpegtran-bin > node index.js < pre-build test failed, compiling from source... < pre-build test failed, compiling from source... × 401 √ jpegtran built successfully! × 401 √ jpegtran built successfully! > optipng-bin@0.3.11 postinstall h:\workspace\yoSample\node_modules\grunt-contrib-imagemin\node_modules\image- min\node_modules\optipng-bin > node index.js < pre-build test failed, compiling from source... × 401 √ optipng built successfully! > gifsicle@0.1.7 postinstall h:\workspace\yoSample\node_modules\grunt-contrib-imagemin\node_modules\image-min\ node_modules\gifsicle > node index.js < pre-build test failed, compiling from source... × 401 √ gifsicle built successfully! > pngquant-bin@0.1.7 postinstall h:\workspace\yoSample\node_modules\grunt-contrib-imagemin\node_modules\image- min\node_modules\pngquant-bin > node index.js ' connect ETIMEDOUT grunt-contrib-copy@0.5.0 node_modules\grunt-contrib-copy grunt-rev@0.1.0 node_modules\grunt-rev grunt-contrib-concat@0.3.0 node_modules\grunt-contrib-concat grunt-contrib-htmlmin@0.2.0 node_modules\grunt-contrib-htmlmin ├── each-async@0.1.3 ├── pretty-bytes@0.1.2 ├── html-minifier@0.5.6 └── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1) jshint-stylish@0.1.5 node_modules\jshint-stylish ├── text-table@0.2.0 └── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1) grunt-concurrent@0.5.0 node_modules\grunt-concurrent ├── pad-stdio@0.1.1 (lpad@0.2.1) └── async@0.2.10 time-grunt@0.3.2 node_modules\time-grunt ├── date-time@0.1.1 ├── pretty-ms@0.1.0 ├── text-table@0.2.0 ├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1) └── hooker@0.2.3 grunt-contrib-clean@0.5.0 node_modules\grunt-contrib-clean └── rimraf@2.2.8 grunt-newer@0.7.0 node_modules\grunt-newer ├── rimraf@2.2.6 └── async@0.2.10 grunt-contrib-cssmin@0.9.0 node_modules\grunt-contrib-cssmin ├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1) ├── clean-css@2.1.8 (commander@2.1.0) └── maxmin@0.1.0 (pretty-bytes@0.1.2, gzip-size@0.1.1) grunt-usemin@2.1.1 node_modules\grunt-usemin ├── debug@0.7.4 └── lodash@1.0.1 grunt-contrib-uglify@0.4.1 node_modules\grunt-contrib-uglify ├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1) ├── maxmin@0.1.0 (pretty-bytes@0.1.2, gzip-size@0.1.1) └── uglify-js@2.4.16 (uglify-to-browserify@1.0.2, async@0.2.10, optimist@0.3.7, source-map@0.1.34) grunt-contrib-watch@0.6.1 node_modules\grunt-contrib-watch ├── async@0.2.10 ├── tiny-lr-fork@0.0.5 (debug@0.7.4, faye-websocket@0.4.4, noptify@0.0.3, qs@0.5.6) ├── gaze@0.5.1 (globule@0.1.0) └── lodash@2.4.1 load-grunt-tasks@0.4.0 node_modules\load-grunt-tasks ├── multimatch@0.1.0 (minimatch@0.2.14, lodash@2.4.1) └── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1) grunt@0.4.5 node_modules\grunt ├── dateformat@1.0.2-1.2.3 ├── which@1.0.9 ├── eventemitter2@0.4.14 ├── getobject@0.1.0 ├── colors@0.6.2 ├── rimraf@2.2.8 ├── async@0.1.22 ├── grunt-legacy-util@0.2.0 ├── hooker@0.2.3 ├── nopt@1.0.10 (abbrev@1.0.5) ├── exit@0.1.2 ├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0) ├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3) ├── lodash@0.9.2 ├── coffee-script@1.3.3 ├── underscore.string@2.2.1 ├── iconv-lite@0.2.11 ├── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1) ├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1) └── js-yaml@2.0.5 (argparse@0.1.16, esprima@1.0.4) grunt-contrib-jshint@0.9.2 node_modules\grunt-contrib-jshint ├── hooker@0.2.3 └── jshint@2.4.4 (console-browserify@0.1.6, exit@0.1.2, minimatch@0.4.0, underscore@1.4.4, shelljs@0.1.4, c li@0.4.5, htmlparser2@3.3.0) grunt-svgmin@0.4.0 node_modules\grunt-svgmin ├── each-async@0.1.3 ├── pretty-bytes@0.1.2 ├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1) └── svgo@0.4.5 (colors@0.6.2, whet.extend@0.9.9, coa@0.4.1, sax@0.6.1, js-yaml@2.1.3) grunt-bower-install@1.4.1 node_modules\grunt-bower-install ├── wiredep@1.4.4 (chalk@0.1.1, through2@0.4.2, glob@3.2.11, lodash@1.3.1) └── bower-config@0.5.2 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1, mout@0.9.1) grunt-contrib-connect@0.7.1 node_modules\grunt-contrib-connect ├── connect-livereload@0.3.2 ├── open@0.0.4 ├── async@0.2.10 ├── portscanner@0.2.2 (async@0.1.15) └── connect@2.13.1 (uid2@0.0.3, methods@0.1.0, pause@0.0.1, cookie-signature@1.0.1, debug@0.8.1, fresh@0.2. 0, qs@0.6.6, bytes@0.2.1, buffer-crc32@0.2.1, raw-body@1.1.3, batch@0.5.0, cookie@0.1.0, compressible@1.0.0, n egotiator@0.3.0, send@0.1.4, multiparty@2.2.0) grunt-autoprefixer@0.7.6 node_modules\grunt-autoprefixer ├── diff@1.0.8 ├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1) └── autoprefixer@1.3.1 (fs-extra@0.9.1, postcss@0.3.5, caniuse-db@1.0.30000081) grunt-mocha@0.4.11 node_modules\grunt-mocha ├── lodash@2.3.0 ├── mocha@1.18.2 (diff@1.0.7, growl@1.7.0, commander@2.0.0, mkdirp@0.3.5, debug@2.1.1, glob@3.2.3, jade@0.2 6.3) └── grunt-lib-phantomjs@0.4.0 (eventemitter2@0.4.14, semver@1.0.14, temporary@0.0.8, phantomjs@1.9.15) grunt-contrib-imagemin@0.6.1 node_modules\grunt-contrib-imagemin ├── pretty-bytes@0.1.2 ├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1) ├── mkdirp@0.3.5 ├── async@0.2.10 └── image-min@0.2.3 (filesize@2.0.4, win-spawn@2.0.0, stream-combiner@0.0.4, multipipe@0.0.2, through2@0.4. 2, concat-stream@1.4.7, map-key@0.1.5, mout@0.9.1, jpegtran-bin@0.2.8, optipng-bin@0.3.11, gifsicle@0.1.7, png quant-bin@0.1.7) invoke mocha:app create test\bower.json create test\.bowerrc create test\spec\test.js create test\index.html I'm all done. Running bower install for you to install the required dependencies. If this fails, try running t he command yourself. bower not-cached https://github.com/mochajs/mocha.git#~1.14.0 bower resolve https://github.com/mochajs/mocha.git#~1.14.0 bower not-cached https://github.com/chaijs/chai.git#~1.8.0 bower resolve https://github.com/chaijs/chai.git#~1.8.0 bower download https://github.com/chaijs/chai/archive/1.8.1.tar.gz bower download https://github.com/mochajs/mocha/archive/1.14.0.tar.gz bower extract chai#~1.8.0 archive.tar.gz bower resolved https://github.com/chaijs/chai.git#1.8.1 bower extract mocha#~1.14.0 archive.tar.gz bower mismatch Version declared in the json (1.12.0) is different than the resolved one (1.14.0) bower resolved https://github.com/mochajs/mocha.git#1.14.0 bower install chai#1.8.1 bower install mocha#1.14.0 chai#1.8.1 bower_components\chai mocha#1.14.0 bower_components\mocha
「yo [generator名]」コマンドで雛形を作成する。
おっさんが出現して質問してきたから「Bootstrap」と答えた。
この状況で必要な「npm install --save-dev」および「bower install --save」が叩かれてnode_modulesおよびbower_componentsディレクトリが作成されて必要なモジュールが入ってる。
しかも、Gruntfile.jsやappディレクトリ配下にスキャフォールドっぽいhtml、css、jsがある。
やばす。
