Bower入門(基礎編) - from scratch
Bower入門 これから Bower について書いてきます。Bowerの使い方から実際に使う上で考慮することまで含めて書きます。 長くなりそうなので単に使うだけの基礎編とモジュールを作る上で気をつけることをまとめた応用編に分けて書きます。 Bower とは Twitter社が作ったフロントエンド用のパッケージマネージャです。 Java で言う Maven、 Ruby で言う gem、 Perl で言う cpan のようなものです。 Node.jsには npm と呼ばれるパッケージマネージャがありますが、それに強く影響を受けています。 パッケージマネージャを利用することでライブラリを自分で管理する必要がなくなり、管理するファイルの数を減らすことができます。 また、パッケージマネージャを利用することでライブラリのバージョン管理をしやすくなります。 さらに自分のライブラリを Bower comp
最近あまり使ってない、流行っていた時期もあるフロントエンドもの
最近あまり使ってない、ちょっと前の流行りもの なんとなく書いてみます。Web アプリケーション開発屋さんなので、Web サイト制作屋さんとはかなり文脈ズレると思います。 jQuery ファミリー 個人的には jQuery って、協業用のツールという位置づけでした。jQuery でさえ書かれていれば、jQuery 書ける人材のほうが外からも調達しやすいため、人員の流動にも有効と考えられる頃が確かにありました。 DOM に触れてくれるな勢の台頭 ところが昨今では AngularJS や React、その他ライブラリでも DOM 操作が大いに抽象化されていることが多く、jQuery で直接 DOM を操作すること自体が相性良くないケースが散見されます。今思えば Backbone.js くらいのころが jQuery 需要の最終ピークだったように思います。 jQuery プラグイン の需要減 jQu
npm とフロントエンドのパッケージ管理の未来
JavaScript 系パッケージマネージャの重複問題 npm は言わずもがな Node.js のパッケージマネージャだが、フロントエンド開発においては Bower も利用するのが一般的になっている。この現状の問題点は、package.jon と bower.json という似たような管理ファイルを二重で管理しなければならないということだ。 現状の使い分けをおさらいをしておくと、次のような感じになる。 タスクランナー（Grunt/gulp）・モジュールシステム（browserify/webpack）・テストスイート（karma/testem）などの開発環境系の管理が npm の主なお仕事。インストールされたパッケージは node_modules 内に展開されて、CommonJS スタイルのモジュール管理から利用する。 本題につながる話としては、ブラウザで動くライブラリの一部は npm にも
Sassユーザー定義関数のテスト
除夜の鐘をBGMにBowerパッケージのhail2u-scss-functionsのテストを書いていた。Gruntでコンパイルして期待される結果と付き合わせるだけだけど、あるとないのとでは大違いな気がしないでもない。 パーシャル読み込んで使ってみるSCSSファイルと、それのコンパイル結果として想定されるCSSファイルを書き、Gruntのgrunt-contrib-sassプラグインでコンパイルし、CSSファイルの内容をgrunt-contrib-nodeunitプラグインのstrictEqual()を使って突き合わせるというテスト。Sassの全般的なテストを書くのは難しいけど、ユーザー定義関数やミックスインなどはこういう形で書ける。 手間がかかる割には報われないような気がするけど、世界中のミックスインとユーザー定義関数にテストがあればそれも変わるんじゃないかと思いながら書いた。変わんないか
Typeplate
TypeplateというCSSフレームワークを知った。必要最小限のものがうまくコンパクトにまとまっているのと、これの導入時点ではマルチ・クラスを強要しないようになっているのが良い。BootstrapやPureのような重量級のものとは違ってこれだけでOKとはならないものだけど、文書の基本的な体裁を整えるという面ではどのようなウェブサイトでもうまく動いてくれそう。 インストールにはBowerを使うのが良い。CSSでもSassでもファイルひとつなのでコピーしても良いけど。 Sassの!defaultフラグについてはSassの!defaultフラグの使い方と使われ方でもどうぞ。 Sassライブラリでは全ての変数が!defaultフラグを付けて定義されているので、簡単に上書きできる。例えばデフォルトのフォント・サイズを16px、フォントをHelvetica Neueにしたい場合は以下のように書く。
grunt bower yeoman入門記事 - lxyuma BLOG
※これは、社内の勉強会の資料の下書きです。 ここ数年で、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側で実現した物。 y
Bower化してた
Gitのsubmoduleの更新が面倒になってきたのでBowerを使うように変更した。のでnormlize.scssやscss-partialsなどのbower.jsonをちゃんと書いてBowerのレジストリに登録した。そしてそれらを使うようにhail2u.net-stylesなどを直してた。一生分bower.json書いた気分だ。 プロダクションでそのまま使われる可能性があるJavaScriptやCSSのライブラリと違って、開発中にしか使われないようなSassのパーシャルなんかではmainは指定する必要がなさそう。インストールについても--save-devオプションを使いdevDependenciesの方に追加されるようにREADME等で書いておくと良いような気がする。 $ bower install --save-dev modularized-normalize-scss 仕様ではv
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Primer