ビルドツールまとめ。Gruntとかgulpとか (フロント寄り) - Qiita
はじめに そろそろ、使っていないと後ろ指をさされそうな雰囲気になってきた、ビルドツール各種ですが、業界(?)の全体像をなんとなく眺めてみたいと思います。動きとしてはRuby界隈が早く、Guardが2010年あたりから、それを参考にする形でGruntが出てくるのが2011年、gulpについてはまだ1年未満という状況ですが、特にJavaScript周りは活況です。 下記、主にGitHubの各種数値を並べています。コミュニティの盛り上がりや成熟度の判断の参考として。 名称 環境 設定ファイル 可読性 GitHub プラグイン Issues 初コミット
npm で依存もタスクも一元化する - Qiita
タスク管理 package.json にはパッケージの依存を書いて npm install するのが基本だけど、 タスクの管理をどうするかというのは、別途また考えないといけない。 自分は gulp が良いと思っているが、 grunt や jake や make を使う人もいる。 また、たくさんオプションをつければほぼ一つのタスクが実行できてしまう browserify, jsh/eslint, mocha などのコマンドを提供するツールもある。 そして、 npm にも一部それらをサポートする npm run 機能があるので、そこに Unix ワンライナーを書くこともできる。 今回は、「どのタスクツールが最良か」みたいな話ではなく、それらをどうやって実行するか、または npm との棲み分けとか構成の流儀について、最近良いと思っているやり方について書いておく。 各方針で問題点を書いていくが、
CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」
CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」 grunt-autoprefixerはベンダープリフィックスを後付けする為のGruntモジュールです。 たとえば次のようなCSSがあったとします。 .foo{ box-sizing: border-box; } ただしFirefoxなど一部のブラウザでbox-sizingを利用するにはベンダープリフィックスが必要です そういった場合にgrunt-autoprefixerを実行することで以下の様に必要なベンダープリフィックスを追加してくれます。 .foo{ -moz-box-sizing:border-box; box-sizing:border-box } さらに次のようなベンダープリフィックスを指定している場合も、 .foo{ -webkit-box-sizing:border-box; box-siz
Sassユーザー定義関数のテスト
除夜の鐘をBGMにBowerパッケージのhail2u-scss-functionsのテストを書いていた。Gruntでコンパイルして期待される結果と付き合わせるだけだけど、あるとないのとでは大違いな気がしないでもない。 パーシャル読み込んで使ってみるSCSSファイルと、それのコンパイル結果として想定されるCSSファイルを書き、Gruntのgrunt-contrib-sassプラグインでコンパイルし、CSSファイルの内容をgrunt-contrib-nodeunitプラグインのstrictEqual()を使って突き合わせるというテスト。Sassの全般的なテストを書くのは難しいけど、ユーザー定義関数やミックスインなどはこういう形で書ける。 手間がかかる割には報われないような気がするけど、世界中のミックスインとユーザー定義関数にテストがあればそれも変わるんじゃないかと思いながら書いた。変わんないか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
