lxyuma BLOG

開発関係のメモ

grunt bower yeoman入門記事

※これは、社内の勉強会の資料の下書きです。

ここ数年で、js環境が整理されてきた。

js開発するなら、これらの知識は必須。無いとめっちゃ不便。

という事で、今日は、gruntとbowerとyeomanの話。

各ツール概説

  • Yeoman
    • applicationのひな形を作る
    • アプリ構築に必要な様々な作業を任せられる
  • Grunt
    • build / preview / testに使う
  • Bower
    • 依存性の管理を行う
    • 手動でDLやscript管理する必要無

rails開発者のために

ぶっちゃけ、どれも、railsの環境にそっくり。rails知ってる人は、要するに、以下の事。

  • grunt => rails server実行時に勝手にやってくれる作業を切り離してカスタマイズできるようにしたもの(coffeeのコンパイルとか)
  • bower => ruby gem管理をjsのclient側で実現した物。
  • yeoman => rails generator/scaffold 等と発想は一緒。

逆に言うと、rails使ってる人は、あまり使う機会は無い。必要ない。(railsが全部やってくれるし)

(但し、bowerは、rails開発界隈でもjs管理ツールとして使われ始めてるので、要check!)

gruntとは

jsのtask runner

なんのために使うのか?

  • jsのミニファイ化
  • コンパイル
  • UT
  • jsLint

install

npm install -g grunt-cli
  • クライアントがこれで入る(imageは、rvmと同じ。このクライアントで、複数のversionのgruntを入れる事ができる)

設定

  • package.json
  • Gruntfile

に、設定を書く。

package.json

package.json自体は、gruntでなく、node.jsのライブラリ管理npmの話。version管理/依存性管理を行う設定file。(json形式)

  • ライブラリを追加したい時は、npm install ****** --saveすると、パッケージをinstallすると同時にpackage.jsonも追記する。

  • これを一通り作った後、 npm install すると、指定通りのライブラリをinstallできる ※rails3からのbundle installと同じ発想。

※installしたライブラリは、そこの配下のnode_modulesに入る

Gruntfile

gruntの設定ファイル。以下を書く。

  • ラッパー関数
    • ①project / task設定
    • ②Grunt pluginやtaskのロード
    • ③カスタムtask

// ラッパー関数
module.exports = function(grunt) {

  // ①Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // ②Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // ③Default task(s).
  grunt.registerTask('default', ['uglify']);

};

ラッパー関数

Gruntのコードは以下の関数内に書く

module.exports = function(grunt) {
  // Do grunt-related things in here
};

①projectとtask設定

  • grunt.initConfig メソッドを通過したオブジェクトの中で設定を定義
  • <% %> でプロパティ参照書ける。

②loading Grunt plugin

  1. package.jsonに定義
  2. npm install
  3. Gruntfile内で grunt.loadNpmTasks('grunt-contrib-uglify');

で、そのコンポーネントが使える

③カスタムタスク

  • 設定したタスクをdefaultタスクにするには、
grunt.registerTask('default', ['uglify']);

これで、 grunt で動かせる

  • grunt uglify でも grunt defaultでも動く。

pluginで提供していないタスク

以下のように関数内で定義する

  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

plugin

coffeeのコンパイル等、めっちゃいっぱいプラグインがある。

自分でgrunt作る

grunt-init使う。

  • npm install grunt-init

templateが幾つか準備されているので、選んで、installして、grunt-init する

流れ

  • 自分で作る場合。

  • grunt-init で初期設定(ちなみに、npm単体の時は、 npm init )

  • npm install ***** --save-dev でライブラリを追加
  • gruntfile内で、loadNpmTasksでロード。initConfigで設定。registerTaskでタスク登録。

こんな感じ。

参考資料


bower

Twitter社製の、フロントエンド用のパッケージ管理ライブラリ。

Git経由で行われているらしい。

install

  • 前提条件
    • node & npm
    • git

npm install -g bower

使い方

  • install
    • bower install <package>#<version>
    • 例:bower install jquery#1.9.1
    • 基本的に、bower_componentsに指定したライブラリが格納される。
  • install済みのpackage一覧

    • bower list
  • bowerに登録されたpackageを探す

    • bower search <name>
    • ホームページを見てもよい。
    • ちなみに、欲しい物が無かったら、bower install urlでinstallできる

設定

.bowerrc

  • JSONを使って設定できる
  • 入力元ファイル(bower.json)や出力先directory(bower_components)を変更する時に書く

{
  "directory": "public/components",
  "json": "bower.json"
}

bower.json

上述のcomponent.jsonのクライアント版。依存してるライブラリを保存しておける仕組み。

bower initで対話形式で作れる。

  • 後でライブラリをjsonに追加
    • bower install <package> --save

dependenciesとdevDependenciesの違い

  • dependencies ; prosuction用
  • devDependencied : 開発用

さっきのオプションの--save--save-devかで違う

流れ

  1. bower initでテンプレート作成
  2. bower install <package> --saveでライブラリ追加

こんな感じ。

参考


yeomanとは

web開発を楽にするためのベストプラクティス/ワークフローを詰めたツール環境の事。

install

npm install -g yo

これでyeoman本体は入った。

個別のパッケージの例

例えば、generator-webappを入れて使うまで

install

npm install -g generator-backbone

これで、generatorが手に入った。

後は、任意のディレクトリ上で、

yo backbone

と打つだけ。

後は、聞かれた事を答えて行けば終わり。

※このyeomanの行ってくれる作業の中で、今迄書いてきたgruntやbowerの設定fileも作ってinstall等もしてくれる(勿論、どのgeneratorを使うかで内容は全く違うが)

使い方

generatorによって違うのだが、例えば、Backboneの場合、

幾つかソースを作るgeneratorが準備されている。

yo backbone:model blog
yo backbone:collection blog
yo backbone:router blog
yo backbone:view blog

これらを使って実装していき、最後にサーバーを起動する

grunt server

大体、他もこんな感じ。

※他に、grunt testでtestするとか、gruntでビルド等。

参考


yeoman製のbackboneのgenerator

コレ使う。

メリットは?

  • 基本的な構成全部作ってくれる(ディレクトリ構成、テスト等)
  • MVCコンポーネントをgenerateできる

install

勿論、yeomanのinstallが前提。

npm install -g generator-backbone

project作成

  • dir作成
$ npm install -g backbone
$ mkdir my-project
$ cd my-project
  • yeoman実行

yo backbone

この時、以下の通り、template指定も出来る(デフォルトが確か何も入ってなかったから、以下、オススメ)

$ yo backbone --template-framework=handlebars

使い方

  • generator
$ yo backbone:model blog

$ yo backbone:view blog

$ yo backbone:router blog

こんな感じで、railsみたいに、ひな形となるコンポーネントを追加して、編集して作って行く。

サンプルソース

さっそくなので、前回のBackbone.Viewの内容を書いてみる。

mainにrouterを追加

  • app/scripts/main.js
require([
    'backbone', 'routes/blog'
], function (Backbone, BlogRouter) {
    new BlogRouter();
    Backbone.history.start();
});

routerを追加

  • app/scripts/routes/blog.js
/*global define*/

define([
    'jquery',
    'backbone',
    'models/blog',
    'views/blog'
], function ($, Backbone, Blog, BlogView) {
    'use strict';

    var BlogRouter = Backbone.Router.extend({
        routes: {
            "": "index"
        },

        index: function() {
            var blog = new Blog({name: "yamada"});
            var view = new BlogView({model: blog});
            $('body').html(view.render().$el);
        }
    });

    return BlogRouter;
});

blogViewを変更

  • app/scripts/views/blog.js
define([
    'jquery',
    'underscore',
    'backbone',
    'templates'
], function ($, _, Backbone, JST) {
    'use strict';

    var BlogView = Backbone.View.extend({
        template: JST['app/scripts/templates/blog.hbs'],
        render: function(){
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    });

    return BlogView;
});
  • app/scripts/templates/blog.hbs
name is {{name}} !

実行

grunt server

localhost:9000かな?に出てるはず。なんかが。

注意

vagrantから:

$ vi Gruntfile.js


:s/localhost/0.0.0.0/gc

=>全部 y

:wq
=>保存して終了

$ grunt server --force

おしまい

今日やった事をおさらい

  • grunt = task runner
    • testやcoffee コンパイル等の作業の自動化
  • bower = client側のライブラリ管理の仕組み
    • bower install していけば、一々、自分でDLする必要はなくなった
  • yeoman = generator
    • 上記の設定ファイルや、install作業や、コンポーネントのgenerator等として使える。

yeomanのgeneratorが今、いっぱい作られているので、やりたい事があったら、まずは、yeomanのプロジェクトに無いかチェックする所から始めると色々楽ができる。