Alternative Architecture DOJO

オルターブースのクラウドネイティブ特化型ブログです。

フロントエンド開発環境のご紹介

こんにちは!
オルターブースアドベントカレンダー19日目を担当する榛葉(しんば)です!

adventar.org

今回は私が普段フロントエンド開発で利用している中でもっとも使用頻度の高いツール3つをご紹介します。

Gulp

いわゆるタスクランナーと呼ばれるツール(システム)です。
sasscsspughtml といった具合に変換するだけではなく、ファイルのコピーや削除まで対応しています。

指定したフォルダを常に監視し、変更があったら自動でGulpが走る gulp watch を利用することでストレスフリーに開発ができます。

また、それに加えて指定したポート番号のページを自動更新する browser-sync も利用できるので便利です。

バージョン

18年にGulpが3.9.1から4.0にメジャーアップデートされたのですが、コンフィグファイルの書き方が大きく変わっており、移行するのにかなりのパワーが必要です。

3と4では互換性がないので、Qiita含めドキュメント等サーチする際は注意が必要です。

http-server

webサーバーを立ち上げることができます。
こちらはプロジェクトではなくてglobalにインストールするタイプです。

http-server インストール

npm install -g http-server

コマンド起動(対象フォルダ移動に移動しておくこと)

http-server

上記コマンドを打つと、フォルダのファイル一覧(もしくはindex.html)が表示されます。

ngrok

http-server で立てたWebサーバー外部公開できるツールです。

「作っているページをチームに共有したい」
「スクショだけじゃ伝わりづらい・・・(というか画面数多くてスクショが手間)」
「ページの動きを確認してほしい」

といったときにサクッと共有ができるので重宝しています。 登録やインストールは 公式サイト へどうぞ!

matome

gulp 3 → 4 の移行を進めたいと思いつつなかなかまとまった時間が取れないので来年は頑張りたいと思います、頑張る、予定!!!