タグ別アーカイブ: build環境

昨今のWebフロントエンド開発環境を調べてみた(2014年ごろ)


メモっていたのを、、忘れてしまうので公開します。

参考

資料

Javascript周り

Grunt

タスクランナー(Rakeのようなもの)
JavaScriptの連結や圧縮、SCSSなどのコンパイルをするときに使う。それだけじゃなくファイル更新をトリガに一連のタスクを自動実行するなどにも使える.

glup.jsというのもある

gulp.js チートシート – Qiita
【Gulp.js入門】新鋭フロンエンド・タスクランナーツール を試してみました。 | Developers.IO

bower + require.js

bower.jsonに利用するライブラリを書いてbower installすると.bowerrcに書かれたライブラリを一括ダウンロードできる。
インストールしたライブラリを<script src=“”>で読み込むものを一個ずつ指定するのは面倒なときにrequire.jsを利用する

mocha + expect.js

BDDスタイルテストフレームワークであるmocha、マッチャーを提供するアサーションライブラリのexpect.js

sinon.js

mockやstubなどテストダブル(ダミーオブジェクト)を利用するときに使用する。
「Spy」「Stub」「Mock」「Fake Timer」「Fake XHR」

karma

testの自動実行(遠隔実行)ライブラリ。テストの更新を検知して複数のブラウザでテストを自動実行してくれたりする。
Karma(元Testacular)を使って簡単にテストを実行しよう

testemというのもある

phantom.js

WebブラウザなしでJavascriptの実行などが行える。コマンドラインから扱えることが便利。ただwebkitエンジンのみ
JavaScriptの自動テスト <=だけどphantom.jsのことが書かれている

backbone.js + underscore.js

backbone.jsとその依存ライブラリのunderscore.js。
使ったこと無いから以下を参考にしよう。

jquery

いつものですね。

jquery-template or ejs

テンプレートエンジン

foreman

プロセスを管理。Gruntとアプリサーバなどを同時に管理したいときなど


CSS周り

sass + compass

sassですね。sassの拡張compassですね

twitter bootstrapなどのCSSフレームワークはいろいろある。

http://liginc.co.jp/web/html-css/html/21108

Font Awesome

http://fortawesome.github.io/Font-Awesome/examples/
フォントのアイコンライブラリ


特記

Middleman

上に書いたようなGruntとかを使った環境のオールインワンパッケージ
http://hokaccha.github.io/slides/middleman_frontend_dev/

pub / sub のメッセージングモデルの考え方について


関連記事

実装編

require.jsを利用した場合のディレクトリ構成

/
├── sources/
│     ├── css/
│     │   ├── lib/
│     │   └── sass/
│     ├── js/
│     │   ├── lib/
│     │   ├── src/
│     │   │    └── require.config.js
│     │   └── test/
│     │        └── require.config.js
│     ├── node_modules/
│     ├── Gruntfile.coffee
│     ├── config.rb
│     ├── karma.conf.js
│     └── package.json
│     
└── public/
      ├── api_stub/
      │   └── recent_sites.json
      ├── css/
      │   ├── common/
      │   ├── lib/
      │   └── 各種CSSファイルやディレクトリ
      ├── js/
      │   ├── common/
      │   ├── lib/
      │   ├── 各種JSファイルやディレクトリ
      │   └── require.config.js
      └──img/
          ├── common/
          └── 各種画像ファイルやディレクトリ

require.jsの実践編

以下の通りhtmlでrequire.js関連ファイルを読込む

<script src="/js/require.config.js"></script>
<script src="/js/lib/require.js" data-main="/js/users/index.js"></script>

上記のタグで読み込んでいる箇所は require.js を読み込んだあとに data-main のjsファイルを読み込むことができる。

ここでは /js/require.config.js では実際に require メソッドを使ってconfigを実行していなくて、設定のハッシュだけを作成している状態。

data-mainで指定している各ディレクトリのjsの中で require メソッドで実行して、require.config.js 内のハッシュ設定部分を実行させている。

npm Tips

以下のコマンドにてnpmインストールしすつつpackage.jsonを更新できる。

# package.jsonのdevDependenciesに追加される
npm install hogehoge --save-dev
# package.jsonのdependenciesに追加される
npm install hogehoge --save

gulpとかnpmのこととか by A Memorandum <=ここにもnpmの使い方。 –save-devの説明が簡単に載っている

gulp

# globalに入れる
npm install -g gulp

# 各プロジェクト配下に入れる
npm install --save-dev gulp
npm install --save-dev gulp-concat

Browserify

Browserify: それはrequire()を使うための魔法の杖 – Qiita
JavaScript – BrowserifyでBackbone.jsを使うときのjQueryの解決 – Qiita