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
- package.jsonに定義
- npm install
- 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 する
- 例：commonjs
- https://github.com/gruntjs/grunt-init-commonjs
- こんなのが幾つか準備されている。
流れ
自分で作る場合。
grunt-initで初期設定(ちなみに、npm単体の時は、npm init)npm install ***** --save-devでライブラリを追加- gruntfile内で、loadNpmTasksでロード。initConfigで設定。registerTaskでタスク登録。
こんな感じ。
参考資料
和訳公式Page
jscafeでの須郷さんの資料
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かで違う
流れ
bower initでテンプレート作成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
コレ使う。
メリットは？
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のプロジェクトに無いかチェックする所から始めると色々楽ができる。
