読者です 読者をやめる 読者になる 読者になる

ぺーぺーSEのブログ

備忘録・メモ用サイト。

Yeoman入門

Yo Node.js Grunt Bower JavaScript

Yeoman触ってみた。
下記の記事を読んでインストールやプロキシ設定とかしてる前提で書く。

blog.pepese.com

blog.pepese.com

Yeoman

クライアントサイドの技術(Haml、Slim、Jade、Sass、LESS、Stylus、Coffeescript、TypeScript等)は増加の一途をたどっていて多種多様となっている。
HTML/CSSプリプロセッサやAltJS等の拡張言語はコンパイルするし、css/jsファイルはインスペクションしたり圧縮したりする。
Yeomanはアプリの雛形生成、コンパイル、テスト、インスペクション圧縮等のワークフローを提供してくる。
YeomanはYoGrunt(タスクランナー)、Bower(パッケージマネージャ)で構成されている。
ここではYoyeoman-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がある。
やばす。