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

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

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

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

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

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

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

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

ハマリ２）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が読み込まれます。