技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

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」から検索して、こんなものを発見

GitHub - websiddu/generator-bs-less-coffee-webfont: A yeoman generator with boostrap, less, coffee, web fonts(autogenerated font icons) and gh-pages deployment

手始めにこれでいいかなと。

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 以下お断りですかw

まぁ 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 っと

f:id:white-azalea:20160208221451p:plain

ファイル編集するたびに勝手にコンパイルしてくれるのは実に楽。