CSS Modules をもっと試す - アカベコマイリ
業務プロジェクトへ CSS Modules 導入を検討中。しかし JS/CSS ともに大きく設計変更されるため、いきなり採用するのは怖い。というわけで、そこそこの規模と複雑さを持つ examples-electron/audio-player で試してみた。このプロジェクトは Electron 製の簡易音楽プレーヤーになる。JS/CSS まわりはこんな感じ。 JavaScript AltJS は Babel と babel-preset-env、ES.next 範疇の機能と構文のみ使用、ターゲット設定は electron なので少し古い Chorome 相当になる View は React Flux は material-flux、いずれ redux か mobx あたりへ乗り換える予定 Bundler は webpack Electron の Main/Renderer プロセスともに
gulp-watchify を試す - アカベコマイリ
これまで Browserify/watchify 関連の gulp タスクは greypants/gulp-starter を参考に自前で定義していたのだが、処理の長さゆえ複数ファイルに分割せざるを得ず見通しがよくないと感じていた。 そこで Browserify/watchify 周りの機能を gulp プラグイン化した gulp-watchify を試してみる。 基本的な使い方 gulp-watchify のサンプル コードは GitHub リポジトリ内の examples ディレクトリに公開されている。 marcello3d/gulp-watchify Transform は setup 関数内で実行、Uglify は pipe 上で処理しているようだ。しかし Browserify オプションについては触れられていない。Source Maps 出力などはどうすればよいのだろう？ 高度？
watchify を試す - アカベコマイリ
Browserify による JavaScript コンパイルは便利だがファイルが増えてくると処理時間の長さがネックになる。3 秒を超えたあたりから gulp.watch で監視するにはきつくなる感じ。 スクリプト間の依存を解決しつつ *fy 系の処理もこなすのだから仕方ないともいえる。とはいえ、ひとつファイルを変更しただけで構成ファイル全体がコンパイルされるのは防ぎたい。そのためには差分コンパイルが必要だ。というわけで watchify を試してみる。 2015/5/20 補足 本記事と関連する記事として「gulp-watchify を試す」を書いた。こちらは gulp プラグインで Browserify/watchify を処理している。 watchify は Browserify をファイル監視つきで実行するためのモジュールである。コマンドライン ツール、Node モジュールとして利
gulp タスクをファイル分割する - アカベコマイリ
gulpfile.js の分割方法について。 gulp タスクが増えてくると gulpfile.js が長くなってメンテナンスしづらい。また、タスク間で共通したい設定があるとして、それを gulpfile.js 内で定義しはじめると更にファイルは伸びてゆく。この問題を解決するため、以下のプロジェクトを参考にタスクを個別ファイルとして定義してみる。 greypants/gulp-starter ディレクトリ構成 プロジェクトのディレクトリ構成は以下のようになる。 / ├ package.json ├ gulpfile.js ├ gulp/ │ ├ config.js │ ├ tasks/ │ │ └ gulp タスクごとのファイル │ └ util/ │ └ gulp タスクで利用する便利モジュール ├ bower_components │ └ アプリから利用する Bower モジュール ├
ESLint を試す - アカベコマイリ
これまで JavaScript の構文チェックに JSHint を利用していたが ES6 と React JSX に対応していること、より細かく柔軟なルール設定が可能なことから ESLint へ移行してみる。 ESLint - Pluggable JavaScript linter インストール ESLint は npm で配布されている。Sublime Text など様々なアプリから参照することになるだろうからグローバルにインストールしておく。 $ eslint -v v0.20.0 $ eslint -h eslint [options] file.js [file.js] [dir] Options: -h, --help Show help -c, --config path::String Use configuration from this file --rulesdir [
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
