Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
GruntでJavaScript前作業
の自動化!
2014.01.16
CTO室 田中裕一
自己紹介
● 金融系 -> 組み込み系 -> SNS系 -> ゲーム系 -> 広告系を経てDMMへ
● 得意分野はインフラからフロントエンドまで、本業はServerSideエンジニ
ア。デザインは無理
● 大規模システムのアーキテクト、大規模デ...
本日のお品書き
1.どうして自動化するのか(10分)
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践(30分)
● Gruntの環境構築
● 最初のGrunt...
どうして自動化するのか?
1.どうして自動化するのか
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile...
DMMで困ってた事は何か?
● jsファイルのminifyを忘れてリリース失敗する
● テストを作ったけど、忙しくなって誰も流さなくなる
● チェックスタイル作ったけど形骸化する
● リリース手順とかリリースする頃には忘れる
● リリース手順書...
1.どうして自動化するのか
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile...
どこに時間を使うべきか?
● リリース・コンパイル等、繰り返し作業に人手を使わない
● ドキュメントの生成・コードチェック・テストは自動化し、
形骸化させない
● 特定の人しか出来ない作業を作らない
● 仕様書・手順書は最低限作り、設定ファイル...
どこに時間を使うべきか?
● 1日数回のリリースも可能、しかも品質は一定
● 自動なのでdocs,コードチェック,テストを意識しなくても良い
● ボタン押すだけなら誰(エンジニア以外)でも出来る
● 仕様書・手順書のメンテコストが無い
得られた...
1.どうして自動化するのか
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile...
自動化レイヤの確認
● 今回の取り組み全体感
自動化レイヤの確認
● いろんなレイヤで自動化
● 今日の取り扱い
1.どうして自動化するのか
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile...
Gruntのおさらい
● jsのminify等の繰り返し作業の自動化
● Pluginを追加して機能を拡張
● Gruntを中心としたエコシステム
uglify
copy
concat
add
add
いきなり実践
本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成...
Gruntの環境構築
npm install -g grunt-cli
mkdir hikarabo && cd hikarabo
npm init
npm install grunt --save
1. grunt-cliをインストール
2....
本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成...
最初のGruntfile.jsの作成
今回扱うディレクトリ構造
1. build : minifyしたjs等、output先
2. out : Docsの吐き出し先
3. public : リリースdir外部から参照される
4. source ...
最初のGruntfile.jsの作成
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
});
gru...
本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成...
複数のjsファイルをconcatして結合する
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
con...
本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成...
jsファイルをminifyしてファイルサイズを小さくする
module.exports = function(grunt) {
grunt.initConfig({
(略)
uglify: {
options: {
banner: '/*! <...
本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成...
jsファイルをcopyして公開準備をする
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
(略)
c...
本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成...
yuidocを使ってリリース時にDocumentを自動生成する
(略)
yuidoc: {
compile: {
name: '<% pkg.name %>',
description: '<%= pkg.description %>',
ve...
本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成...
gjslingを使ってCodeCheckを自動で行う
(略)
gjslint: {
options: {
flags: [
'--flagfile .gjslintrc'
],
reporter: {
name: 'console'
}
},
...
本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成...
jsファイルの変更時に自動で処理するようにする
(略)
watch: {
files: [
'source/*.js',
],
tasks: [
'gjslint',
'concat:hikajs',
'uglify',
'copy',
]
}...
本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か?
● どこに時間を使うべきか?
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成...
bower,bower-installer,gruntを使って外部のjsを管理する
● webAppは様々なframework,libraryで構成されている
● bowerはそれらpackageの管理をする
● Bower+gruntで外部p...
Bowerの準備とjQueryのインストール
1. npmコマンドでBowerをインストール
2. bower initを実行
3. bowerでjqueryをインストール
npm install bower -g
bower init
bow...
Bower-installerの準備と公開ディレクトリへのデプロイ
1. npmコマンドでBower-installerをインストール
2. bower.jsonにinstallセクションを追加
3. bower-installerを実行
np...
以上。
Upcoming SlideShare
Loading in …5
×

Gruntでjava script前作業の自動化!

1,693 views

Published on

ヒカラボ2015-01-16
presented by DMM

Published in: Engineering
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Gruntでjava script前作業の自動化!

  1. 1. GruntでJavaScript前作業 の自動化! 2014.01.16 CTO室 田中裕一
  2. 2. 自己紹介 ● 金融系 -> 組み込み系 -> SNS系 -> ゲーム系 -> 広告系を経てDMMへ ● 得意分野はインフラからフロントエンドまで、本業はServerSideエンジニ ア。デザインは無理 ● 大規模システムのアーキテクト、大規模データ基盤の構築周り ● DMMでは検索・リコメンド・行動解析まわりの研究開発やってます。 ● 最近はjava,hdfs,hive,python,nodejs,scala,erlang,spark,aerospike周りを良 く触ってます。
  3. 3. 本日のお品書き 1.どうして自動化するのか(10分) ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践(30分) ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  4. 4. どうして自動化するのか?
  5. 5. 1.どうして自動化するのか 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  6. 6. DMMで困ってた事は何か? ● jsファイルのminifyを忘れてリリース失敗する ● テストを作ったけど、忙しくなって誰も流さなくなる ● チェックスタイル作ったけど形骸化する ● リリース手順とかリリースする頃には忘れる ● リリース手順書が古くリリース手順通りにやったらリリース失敗する ● バグの修正5分で終わるのにリリースに1時間かかる リリースがリスキーで面倒!
  7. 7. 1.どうして自動化するのか 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  8. 8. どこに時間を使うべきか? ● リリース・コンパイル等、繰り返し作業に人手を使わない ● ドキュメントの生成・コードチェック・テストは自動化し、 形骸化させない ● 特定の人しか出来ない作業を作らない ● 仕様書・手順書は最低限作り、設定ファイルをベースにす る 気をつける(た)所
  9. 9. どこに時間を使うべきか? ● 1日数回のリリースも可能、しかも品質は一定 ● 自動なのでdocs,コードチェック,テストを意識しなくても良い ● ボタン押すだけなら誰(エンジニア以外)でも出来る ● 仕様書・手順書のメンテコストが無い 得られたメリットは何か? 機能開発・研究開発というエンジニアの本来の業務時間を作る
  10. 10. 1.どうして自動化するのか 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  11. 11. 自動化レイヤの確認 ● 今回の取り組み全体感
  12. 12. 自動化レイヤの確認 ● いろんなレイヤで自動化 ● 今日の取り扱い
  13. 13. 1.どうして自動化するのか 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  14. 14. Gruntのおさらい ● jsのminify等の繰り返し作業の自動化 ● Pluginを追加して機能を拡張 ● Gruntを中心としたエコシステム uglify copy concat add add
  15. 15. いきなり実践
  16. 16. 本日のお品書き 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  17. 17. Gruntの環境構築 npm install -g grunt-cli mkdir hikarabo && cd hikarabo npm init npm install grunt --save 1. grunt-cliをインストール 2. プロジェクトディレクトリを作って 3. npm initコマンドでpackage.jsonを作成し ています。 4. npmコマンドでgruntをインストール ※Node.jsのインストールは割愛します。 ● 出来上がったpackage.json
  18. 18. 本日のお品書き 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  19. 19. 最初のGruntfile.jsの作成 今回扱うディレクトリ構造 1. build : minifyしたjs等、output先 2. out : Docsの吐き出し先 3. public : リリースdir外部から参照される 4. source : 大本になるjsファイル置き場
  20. 20. 最初のGruntfile.jsの作成 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), }); grunt.registerTask('default','show logs',function(){ grunt.log.write('console log?').ok(); }); }; 1. Gruntfile.jsの名前で保存 2. gruntコマンドで実行
  21. 21. 本日のお品書き 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  22. 22. 複数のjsファイルをconcatして結合する module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat:{ hikajs: { src: [ 'source/main.sample.js', 'source/main2.sample.js', ], dest: 'build/concat.hikarabo.js' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default',['concat:hikajs']); grunt.registerTask('default:concat', ['concat:hikajs']); 1. npmコマンドでpluginをインストール 2. Gruntfile.jsを編集 3. grunt又はgrunt concatで実行 npm install grunt-contrib-concat --save
  23. 23. 本日のお品書き 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  24. 24. jsファイルをminifyしてファイルサイズを小さくする module.exports = function(grunt) { grunt.initConfig({ (略) uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */¥n' }, build: { src: 'build/concat.hikarabo.js', dest: 'build/<%= pkg.name %>.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default',['concat:hikajs','uglify']); grunt.registerTask('default:concat', ['concat:hikajs']); 1. npmコマンドでpluginをインストール 2. Gruntfile.jsを編集 3. gruntで実行 npm install grunt-contrib-uglify --save 省略無しバージョン
  25. 25. 本日のお品書き 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  26. 26. jsファイルをcopyして公開準備をする module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), (略) copy:{ main: { src:'build/*.min.js', dest: 'public/js/' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.registerTask('default',['concat:hikajs','uglify','copy']); grunt.registerTask('default:concat', ['concat:hikajs']); }; 1. npmコマンドでpluginをインストール 2. Gruntfile.jsを編集 3. gruntで実行 npm install grunt-contrib-copy --save 省略無しバージョン
  27. 27. 本日のお品書き 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  28. 28. yuidocを使ってリリース時にDocumentを自動生成する (略) yuidoc: { compile: { name: '<% pkg.name %>', description: '<%= pkg.description %>', version: '<%= pkg.version %>', url: '<%= pkg.homepage %>', options: { paths: [ 'source/' ], outdir: 'out/' } (略) grunt.loadNpmTasks('grunt-contrib-yuidoc'); (略) grunt.registerTask('build', ['yuidoc']); }; 1. npmコマンドでyuidocをインストール 2. npmコマンドでpluginをインストール 3. Gruntfile.jsを編集 4. grunt buildで実行 npm install yuidocjs -g npm install grunt-contrib-yuidoc --save 省略無しバージョン
  29. 29. 本日のお品書き 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  30. 30. gjslingを使ってCodeCheckを自動で行う (略) gjslint: { options: { flags: [ '--flagfile .gjslintrc' ], reporter: { name: 'console' } }, lib: { src: [ 'source/*.js' ] } } (略) grunt.loadNpmTasks('grunt-gjslint'); grunt.registerTask('default',['gjslint','concat:hikajs','uglify','copy']); }; 1. npmコマンドでpluginをインストール 2. Gruntfile.jsを編集 3. .gjslintrcを作成 4. gruntで実行 npm install grunt-gjslint --save 省略無しバージョン 失敗時 成功時 .gjslintrc
  31. 31. 本日のお品書き 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  32. 32. jsファイルの変更時に自動で処理するようにする (略) watch: { files: [ 'source/*.js', ], tasks: [ 'gjslint', 'concat:hikajs', 'uglify', 'copy', ] }, (略) grunt.loadNpmTasks('grunt-contrib-watch'); }; 1. npmコマンドでpluginをインストール 2. Gruntfile.jsを編集 3. grunt watchを実行 npm install grunt-contrib-watch --save 省略無しバージョン
  33. 33. 本日のお品書き 1.どうして自動化するのか ● DMMで困っていた事は何か? ● どこに時間を使うべきか? ● 自動化のレイヤの確認 ● Gruntのおさらい 2.いきなり実践 ● Gruntの環境構築 ● 最初のGruntfile.jsの作成 ● 複数のjsファイルをconcatで結合する ● jsファイルをminifyしてファイルサイズを小さくする ● jsファイルをコピーして公開準備をする ● yuidocを使ってリリース時にDocumentを自動生成する ● gjslintを使ってCodeCheckを自動で行う ● jsファイルの変更時に自動で処理するようにする ● bower、bower-installer、Gruntを使って外部のjsを管理する
  34. 34. bower,bower-installer,gruntを使って外部のjsを管理する ● webAppは様々なframework,libraryで構成されている ● bowerはそれらpackageの管理をする ● Bower+gruntで外部packageの管理も自動化
  35. 35. Bowerの準備とjQueryのインストール 1. npmコマンドでBowerをインストール 2. bower initを実行 3. bowerでjqueryをインストール npm install bower -g bower init bower install jqeury --save { "name": "hikarabo", "version": "0.0.0", "authors": [ "tanaka-yuichi <tanaka-yuichi@dmm.com>" ], (略) 出来上がったbower.json
  36. 36. Bower-installerの準備と公開ディレクトリへのデプロイ 1. npmコマンドでBower-installerをインストール 2. bower.jsonにinstallセクションを追加 3. bower-installerを実行 npm install bower-installer -g (略) "dependencies": { "jquery": "~2.1.3" }, "install":{ "path":{ "js":"public/js" }, "sources":{ "jquery":"bower_components/jquery/dist/jquery.min.js" } } } jqueryのデプロイを追加したbower.json
  37. 37. 以上。

×