Front-end package managers
?
12 likes?4,989 views
2014/09/16 21cafeにて佩われたJSオジサンでのLTY創です。 Front-endで試喘できるパッケ`ジマネ`ジャ`仝bower々仝Browserify々仝Duo々仝WebPack々をざっくりB初しました。 お櫃鉾襪蠅Browserifyです。Duoには書瘁も廣朕していきます。
Front-end package managers
- 1. 1 Front-end Package Managers
- 2. 2 @frontainer Front-end Engineer 爽 匯 2014/4 LIG秘芙 フロントエンドエンジニア 書定に秘ってちょこちょこ翌で試咾靴討い泙 鞠のご卆mは岷俊ごBjください Gulp秘T - コ`ディングを10蔚堀くする http://www.slideshare.net/frontainer/gulp-10 鞭_kでのAngularJS - 及1指AngularJS 茶氏 at LIG http://www.slideshare.net/frontainer/angularjs-1angularjs-lig CSS Living StyleGuide http://www.slideshare.net/frontainer/css-living-styleguide https://github.com/frontainer
- 4. 4
- 5. 5 01 Bower みんなが寄挫きなTwitterが恬ってます http://bower.io/
- 6. 6 インスト`ル npm install bower -g ライブラリのインスト`ル bower install jquery <script src=/slideshow/front-end-package-managers/39140542/"bower_components/jquery/dest/jquery.min.js"></script> 聞うときはjsをscriptタグで歌孚する、がLい。 GulpやGruntとセットで聞うとスマ`トになるgrunt-bower-task,gulp-bowerなど
- 7. とにかくg 秘Tにはおすすめ 7 パッケ`ジ砿尖參翌は採もしてくれない {瞳rに音勣ファイルが謹くて是る -> GruntやGulpなどの麿ツ`ルを聞ってiみzんだり屁尖したりする
- 8. 8 02 Browserify 恷除グイグイ栖てる徴隈の嬌 http://browserify.org/
- 9. 9 インスト`ル npm install bower -g ライブラリのインスト`ル npm install jquery --save 柵び竃すときはrequire()を聞って柵び竃す var $ = require('jquery'); コマンドで１つのJSファイルにまとめられる browserify main.js main.concat.js
- 10. シンプルでオススメ コマンドで１つにまとめてくれるので、ojが富ない 10 GulpやGruntプラグインもあるので徭啝がすぐできる (gulp-browserify,grunt-browserify) CommonJSなき圭をきちんと尖盾しなければならない
- 11. 11 03 Duo 恷除竃てきた碧しにくいcomponentの@覚宀 http://duojs.org/
- 12. 12 インスト`ル npm install duo -g ライブラリのインスト`ル 聞いたいライブラリとかがあったらrequire()する var _ = require('jashkenas/underscore'); コマンドで１つのJSにまとめられる duo main.js > main.concat.js
- 13. requireにくだけで砿尖鵑箸靴討れる require(｀jquery/jquery¨)はエラ`で秘れられず ★require(｀jquery/jquery@1.11.1:dist/jquery.js¨);とバ`ジョンとmain.jsに あたる何蛍を峺協してあげると秘れられた 13 githubのアカウントとト`クンキ`を勣箔されるなど 兜豚O協にちょっと返gがかかる CSSも@importをてY栽してくれる
- 14. 14 04 WebPack あまり岑られていないけど喘來が互い http://webpack.github.io/
- 15. 15 インスト`ル npm install webpack -g ライブラリのインスト`ル npm install jquery --save 柵び竃すときはrequire()を聞って柵び竃す var _ = require('jquery'); コマンドで１つのJSにまとめられる webpack main.js main.concat.js
- 16. Browserifyと揖じように聞える 翌何jsonを柵ぶのにe余loaderが駅勣 16 loaderが割gしていていろんなことができる loaderでしないと喪晒Browserify 晩云Z秤鵑富ない
- 17. 17 まとめ
- 18. とりあえず秘なら返Xなbower Tれてきたらbrowserifyがオススメ 18 DuoはこれからがSしみな贋壓。兜豚O協の兼肖がさがればﾚまると房う 挫きならWebPackBrowserifyもtransform聞えばできる
- 19. 19 ご賠ありがとうございました