akabekobeko / examples-web-app Goto Github PK

Update a npm of various projects.

gulp なしと対になるものとして gulp ありを実装する。

starter なので広範に参照されることを想定し、英語化する。

英語な苦手だが、プログラミングを初歩から学んだときの経験を思い返すに、書くことが慣れることの近道なので、下手なりになるべく英語で書いてみる。いずれ issue もそうしたい。

個人プロジェクトなのだし、下手な英語でも誰かに迷惑がかかることはないだろう。

gulp-iconfont を利用したアイコン フォントのビルド処理サンプルを作成する。

Using azu/jsdoc-to-assert. To test that the type check assert is added in the following function.

• Normal function
• Object Property (function)
• Arrow function
• ES2015 class
  • constructor
  • method
  • Setter (function)

最近の私のスタイルに則って変更。こうすると icon-XXXX 以外からもユニコード直指定せず変数として参照できる。

このプロジェクトは調査の記録をブログに書くときのサンプル置き場として運用しているので、README 側から記事をたどれるようにリンク一覧を追加する。

いつも gulp でおこなっているフロントエンドのビルドを package.json と npm のみで実現するサンプル プロジェクトを作成する。

#22 対応を反映したバージョンをリリースする。

front-end-starter-v1.0.6 をリリースする。

gulp-usemin を利用したビルドを試すためのサンプルを作成する。仕様は以下。

• パッケージ管理に npm と Bower を使用
• 開発用フォルダは src、リリースは dist とする
• HTML から参照する css と js は Bower と自作の両方を含める
• ビルドの際、css と js を concat、minify する
• dist 上の HTML は css と js の参照が concat、minify されたものへ変更する

grunt-usemin を利用したビルドを試すためのサンプルを作成する。仕様は以下。

• パッケージ管理に npm と Bower を使用
• 開発用フォルダは src、リリースは dist とする
• HTML から参照する css と js は Bower と自作の両方を含める
• ビルドの際、css と js を concat、minify する
• dist 上の HTML は css と js の参照が concat、minify されたものへ変更する

Because of the bad look and it align left.

HTML5 の IndexedDB を使用した簡単な TODO リスト - HTML5 Rocks を参考に IndexedDB のサンプルを作成する。

簡単な音楽情報を追加、更新、削除する Web アプリとして実装。UI は React.js を採用。table と form で構成されるような感じになるかな。

HTML5 の video タグによる動画再生サンプルを作成する。

• 動画の読み込みと再生は JavaScript 側で処理
• video の control 属性は利用せず、UI は自前で用意

sourcemap 出力をサポートする。

gulp でビルドする際、browserify 関数の第二引数となるオプションへ { debug:true } を指定する。npm を追加しなくてもよいらしい。sourcemap でデバッグするなら Browserify の時点で Minify などを実行して gulp-usemin は外してもよさそう ( CSS では使う )。

npm run release が npm release になっている。このコマンドは run を省略できない。

front-end-starter v1.0.4 をリリースする。

server タスクでは src ディレクトリをルートにして HTTP サーバーを起動しているため、src と同列にある bower_components 以下を参照できない。

jQuery も Bower で管理しているが、こちらは Browserify で結合した app.js を参照するため問題ない。

#19 の修正を反映する。

watch:css では watch でファイル監視しつつ CSS コンパイルしているが、Stylus には watch 機能が備わっているので、そちらに切り替える。

また #28 を試したら Source Maps が参照できなくなったので、build:css も修正が必要。

Support for the React v15.x.

Implement the preset setting by .babelrc in order to parse the ES6 code.

ビルド手順の最後に実行する gulp タスクを build や release にする。またブログ記事用にスクリーンショットを作成したので、これも添えておく。

Browserify によるビルドのサンプルを作成する。

• Bower でインストールした jQuery を require して呼び出す
• 自前 JavaScript を require して呼び出す
• Browsefy による JavaScript モジュール結合 & 単一ファイル化
• gulp によるビルド
• ビルドは開発フォルダ用
• リリースは成果物用

Util.test.js のテスト対象は Util クラスだが、describe の第一引数に App が指定されている。これが間違っていると mocha の出力や ESDoc の内容に反映されてしまい混乱する。

front-end-starter でクロスブラウザの差異吸収をおこなうため、Normalize.css を組みこむ。このプロジェクトでは AltCSS に Stylus を採用しているので bymathias/normalize.styl を利用する予定。

Stylus サンプルとして、ある程度の長さを持つ CSS がほしいので React.js サンプルを流用する。

front-end-starter v1.0.5 をリリースする。

clean と build タスクが同期実行できていない。

clean は del の第二引数にコールバック関数を受渡しているが、これではダメらしい。コールバック関数そのものをタスク内で呼ぶ必要がある。

build はストリームを返す。browserify 関数から pipe でチェインしているが、それを return すればよい。

npm を現時点の最新に更新し、ビルドなどに問題がないか確認する。

gulp なしの Web フロントエンド開発 のコメント欄にて mysticatea さんにすすめられた npm-run-all を試す。

front-end-starter の watch コマンドの連結に適用してみる。これは package.json の scripts に定義されたコマンドを結合実行するものとのこと。watch 系の場合は並列実行したいので -p オプションを利用するのがよい？

Element からセレクターを取得するサンプルを作成する。

• Use a new methods
• ES2015
• ...etc

リポジトリのコミット履歴を確認してみたら Fix: ignores killed tasks. というものがあり、watchify の中断がうまくゆかない問題が解決していそうなので試してみる。

Browserify と組み合わせてインクリメンタルな JavaScript を実現してくれるという watchify を試す。このあいだ作成した IndexedDB プロジェクトを対象とする。

ついでに IndexedDB プロジェクトの JSX を VM になる JS と V とする render のみの JSX に分けてみる。

power-assert が 1.0 になるなど、依存パッケージが更新されているので、それに追従する。

• Release electron v1.3.0
• Release electron v1.3.1

gulp タスクのディレクトリ構成を変更した影響による問題。server-static に __dirname を指定しているが、このパスがプロジェクトのルートではなく connect.js のディレクトリになっている。

example-electron の audio-player プロジェクト開発で気づいた問題。

Util.test.js にて power-assert を import しているが、参照する変数名を assert ではなく Assert にしていることが原因。

コードとユニット テストを ES6 で実装して mocha によるテストを走らせられるサンプルを作成する。

front-end-starter v1.0.3 をリリースする。

gulp-watchify は更新が止まっていて参照する Browserify/watchify も古いため、gulpfile.js から素の Browserify/watchify を実行する方法に移行する。

gulpfile.js の処理は長くなるものの、いちど書いたタスクは滅多に変更されないので、さほど問題にはならない。

gulp-plumber を利用できないので、error をハンドリングして自前でコンソール出力する必要あり。

cpx はファイルのコピーなどを提供してくれる。CLI を持ちパスを glob 形式で指定可能。

rimraf はファイルやディレクトリの削除機能を提供する。trash と異なり対象ディレクトリが存在しなくてもエラーにならない。またゴミ箱へ移動するのではなくそのまま削除する。

これらの採用によりファイル処理が簡略化されるはず。

WebKit 系ブラウザで全角・半角が混在したテキストだと justify の均等割り付けがうまく動かなかったようだが、今日ためしたら Chrome、Safari ともに問題なかった。

そこで現状確認のため、各種ブラウザで justify を検証するためのサンプルを実装する。全角・半角混在、全角のみ、半角のテキストを持ち、ボタンで justify が ON/OFF される HTML を想定。

node-webkit で簡易ファイラーを実装するための布石として、ツリー構造を Explorer 的に表示する Web アプリを作成する。UI 実装は React.js を採用。