YEOMANのチュートリアルでいきなりハマった人向け

ソフトウェア開発

LET’S SCAFFOLD A WEB APP WITH YEOMANというチュートリアルでいきなりハマった人向けに補足を。概ねチュートリアル通りに進めていけば良いはずなのですが、若干コケるポイントがあるようです。

本稿で使用した各コンポーネントのバージョン

  • node 0.10.28
  • npm 1.4.9
  • yeoman 1.3.3
  • generator-angular 0.9.2
  • bower 1.3.12
  • grunt-cli 0.1.13

ハマリ1)grunt serveしたら「Fatal error: Unable to find local grunt.」って言われるんですけど!

順調にチュートリアルを進めているのもつかの間、Step 5: Preview your app in the browserでいきなりハマる訳ですが、プロジェクトローカルにgruntがインストールされていないために発生します。

npm install gruntでプロジェクトローカルにgruntをインストールしましょう。すると次のハマリポイントに進むことができます。

ハマリ2)grunt serveしたら「Warning: ENOENT, no such file or directory ‘[PROJECT_ROOT]/app/bower.json’」って言われるんですけど!

[PROJECT_ROOT]の部分にはプロジェクトのディレクトリまでの絶対パスが表示されていると思います。なぜかappディレクトリ以下のbower.jsonを参照してしまっているというエラーです。本当は[PROJECT_ROOT]/bower.jsonを参照して欲しい訳です。

これはgrunt-wiredepというライブラリのバージョンによって起こる問題のようなので、Gruntfile.jsの164行目に書いてあるwiredepに関する設定を書き換えます。

    wiredep: {
      options: {
        cwd: '<%= yeoman.app %>'
      },
      app: {
        src: ['<%= yeoman.app %>/index.html'],
        ignorePath:  /\.\.\//
      },
      sass: {
        src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        ignorePath: /(\.\.\/){1,2}bower_components\//
      }
    },

以下のようにcwdの部分をコメントアウトします。

    wiredep: {
      options: {
        // cwd: '<%= yeoman.app %>'
      },
      app: {
        src: ['<%= yeoman.app %>/index.html'],
        ignorePath:  /\.\.\//
      },
      sass: {
        src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        ignorePath: /(\.\.\/){1,2}bower_components\//
      }
    },

これでgrunt serve時に適切なパスでbower.jsonが読み込まれます。

ハマリ3)grunt testしたら「Task “karma” not found」って言われるんですけど!

そもそもチュートリアル上でkarmaのセットアップをしていないことが問題です。

コマンドラインでnpm install grunt-karma --save-devと打ち込んで、karmaをgruntで動かせるようにしましょう。

それでは良きYeomanライフを!