こんにちは!
オルターブースアドベントカレンダー19日目を担当する榛葉(しんば)です!
今回は私が普段フロントエンド開発で利用している中でもっとも使用頻度の高いツール3つをご紹介します。
Gulp
いわゆるタスクランナーと呼ばれるツール(システム)です。
sass
を css
、 pug
を html
といった具合に変換するだけではなく、ファイルのコピーや削除まで対応しています。
指定したフォルダを常に監視し、変更があったら自動で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 の移行を進めたいと思いつつなかなかまとまった時間が取れないので来年は頑張りたいと思います、頑張る、予定!!!