WindowsでYeaomanしてみる
表題の通り。
環境は Winows10 …つってもあんま意味ないな。
まずは Node.js から。
といっても Windows はインストーラあるから楽勝だね。
v4.2.6 をインストール。面倒なので PATH もひいてもらう。
C:\test>node -v v4.2.6
次、Git for Windows 。
バージョンに特にこだわりはない。
ダウンロードであったのが 2.7.1 なので、それをそのまま使う。
GUI？いらんでしょ。Consoleで動くようにだけしておく。
改行コードは lf だよね。
C:\test>git --version git version 2.7.1.windows.1
さて
Yeoman, Bower, Grunt 突っ込む
コマンドで
npm install yo bower grunt-cli -g
すると
―――中略 Yeoman Doctor Running sanity checks on your system √ Global configuration file is valid √ NODE_PATH matches the npm root √ Node.js version √ No .bowerrc file in home directory √ No .yo-rc.json file in home directory × npm version Your npm version is outdated. Upgrade to the latest version by running: npm install -g npm
ゴフゥ…。黙って npm install -g npm して再度インストールをかけて成功。
Let's Yo
シンプルに Bootstrap-Coffee-Less のパッケージでも落とすか。
このへん「Generators | Yeoman」から検索して、こんなものを発見
手始めにこれでいいかなと。
D:\sources>mkdir web_templates D:\sources>cd web_templates D:\sources\web_templates>mkdir example_yeaoman D:\sources\web_templates>cd example_yeaoman D:\sources\web_templates\example_yeaoman> npm install -g generator-bs-less-coffee-webfont 中略 | | +-- run-async@0.1.0 | | +-- shelljs@0.3.0 | | +-- text-table@0.2.0 | | `-- underscore.string@2.4.0 | `-- yosay@1.1.0 | +-- ansi-regex@2.0.0 | +-- pad-component@0.0.1 | +-- repeating@2.0.0 | | `-- is-finite@1.0.1 | +-- string-width@1.0.1 | | +-- code-point-at@1.0.0 | | | `-- number-is-nan@1.0.0 | | `-- is-fullwidth-code-point@1.0.0 | +-- taketalk@1.0.0 | | `-- get-stdin@4.0.1 | `-- word-wrap@1.1.0 `-- UNMET PEER DEPENDENCY generator-karma@>=0.9.0 npm WARN generator-bs-less-coffee-webfont@0.0.6 requires a peer of generator-karma@>=0.9.0 but none was installed. D:\sources\web_templates\example_yeaoman>
さっくりできたっぽい。
後はなにも考えず
D:\sources\web_templates\example_yeaoman>yo bs-less-coffee-webfont
_-----_
| | .--------------------------.
|--(o)--| | Superpower is with you |
`---------´ | when Yeoman is with you! |
( _´U`_ ) '--------------------------'
/___A___\
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What more would you like?
>(*) Bootstrap Javascript files
( ) respond.js (mediaquery polyfill for ie6-8)
素敵なおっさんの問いかけに答える。
? What more would you like? Bootstrap Javascript files ? Do you want to deploy your project to Github Pages? This requires an empty Gi thub repository. No create Gruntfile.js create package.json create .gitignore create .gitattributes create .bowerrc 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.less create app\styles\pages\index.less create app\styles\utils\icons.less create app\index.html create app\scripts\hello.coffee create app\scripts\main.js Error bs-less-coffee-webfont You don't seem to have a generator with the name mocha installed. You can see available generators with npm search yeoman-generator and then install them with npm install [name]. To see the 1 registered generators run yo with the `--help` option. D:\sources\web_templates\example_yeaoman>
とテンプレが出来上がる。
npm と bower の読み込み
node_modules はデフォルト空。
これは、package.json に書いてある、依存モジュールをインストールすれば埋まる。
D:\sources\web_templates\example_yeaoman>npm install
npm WARN deprecated lodash@0.9.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0
npm WARN deprecated lodash@2.4.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0
loadDep:pause -> fetch \ |#################--------
----中略
+-- parse-ms@1.0.0
`-- plur@1.0.0
npm WARN example-yeaoman@0.0.0 No description
npm WARN example-yeaoman@0.0.0 No repository field.
npm WARN example-yeaoman@0.0.0 No license field.
D:\sources\web_templates\example_yeaoman>
途中 Python ねえよとか見た気がしないではないが、先に進む。
名前の通り構成なら Python 何に使うんだろうか…。
まぁ Bower も入れる。
D:\sources\web_templates\example_yeaoman>bower install bower not-cached git://github.com/twbs/bootstrap.git#>=3.0.0 bower resolve git://github.com/twbs/bootstrap.git#>=3.0.0 bower not-cached git://github.com/Modernizr/Modernizr.git#>=2.6.2 bower resolve git://github.com/Modernizr/Modernizr.git#>=2.6.2 bower not-cached git: --- 中略 jquery#2.2.0 app\bower_components\jquery modernizr#3.3.1 app\bower_components\modernizr bootstrap#3.3.6 app\bower_components\bootstrap └── jquery#2.2.0 D:\sources\web_templates\example_yeaoman>
ほう、IE9 以下お断りですかｗ
まぁ grunt serve
D:\sources\web_templates\example_yeaoman> grunt serve Running "serve" task Warning: Task "coffee" not found. Use --force to continue. Aborted due to warnings. Execution Time (2016-02-08 13:01:47 UTC) loading tasks 24ms ████████████████████████████████████ 75% serve 7ms ███████████ 22% Total 32ms
What's !?
coffee なんてタスクねーよと怒られてる。
gruntfile 覗くと、
// 中略
coffee: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/scripts',
src: '{,*/}*.coffee',
dest: '<%= yeoman.app %>/scripts',
ext: '.js'
}]
}
},
書かれてるね。で、どこでモジュールロードしてるのかなと思ったら、先頭近くに
// load all grunt tasks
require('load-grunt-tasks')(grunt);
これっぽいな。
node_modules の中漁って、index.js 読むと
'use strict';
var path = require('path');
var pkgUp = require('pkg-up');
var multimatch = require('multimatch');
var arrify = require('arrify');
var resolvePkg = require('resolve-pkg');
module.exports = function (grunt, opts) {
opts = opts || {};
var pattern = arrify(opts.pattern || ['grunt-*', '@*/grunt-*']);
var config = opts.config || pkgUp.sync();
// 以下略
node_modules 内から、grunt- で始まるタスクを全部読み込む仕様のようで、改めて探してみると「grunt-contlib-coffee」が無い。
お前が犯人か。
D:\sources\web_templates\example_yeaoman>npm install grunt-contrib-coffee --save-dev
で grunt serve っと
ファイル編集するたびに勝手にコンパイルしてくれるのは実に楽。
