シンプルなTailwind環境構築を効率的に改革 Browsery Sync

シンプルなTailwind環境構築を効率的に改革 [ Visual Studio Code Browser-Sync ]
#image_title
★★★ イベント情報 ★★★
◇【参加登録受付中】Kong Summit, Japan 2022◇
今年は12月15日に開催決定!最新情報とデモとともにKongと事例/ユースケースのご紹介などAPIエコノミーやマイクロサービスに関心のある開発者の方にとっては必見です。ぜひお申し込みください!イベントの詳細・お申込はこちら

★★★ Live配信告知 ★★★
◇11月29日開催 19:00~ 世界一わかりみの深いクラウドネイティブon Azure◇
テーマは「Web App for ContainersとKeycloakで最速OpenID Connect」です!

◇11月30日開催 17:00〜 知ってると ちょっと便利なコマンド集◇
知っていると少し効率の上がるようなコマンドをいくつかご紹介します!

今回は実際僕が、Tailwindで開発をする際に、入れているVisual Studio Codeのプラグインの紹介とBrowserSyncを使っての自動リロード(ホットリロード)での環境を構築したいと思います。

初めに

どもども平社員の龍ちゃんです。この記事は、前回の記事である「Tailwind環境構築をシンプルに」を補足した内容となっています。まだ読んでいなくて、Tailwindに興味がある方は是非ご一読ください。

さて、前回の内容を読んでいる前提で、環境におけるストレス部分を共有をします。第一の問題として、Tailwindで画面に変更を加えた際に、ブラウザをリロードしないと画面が更新されない問題ですね。Webデザインを作成中に更新するための手間は、ストレスを感じてしまいますね。第二の問題として、エディタを使っての開発ではないとストレスを感じてしまう点ですね。これは、開発者のほとんどが抱えている問題といっても過言ではありません。

今回は実際僕が、Tailwindで開発をする際に、入れているVisualStudioCodeのプラグインの紹介とBrowserSyncを使っての自動リロード(ホットリロード)での環境を構築したいと思います。

事前準備

今回は、前回の記事である「Tailwind環境構築をシンプルに」を前提としています。同じ環境を実現したい場合は、ページを参照してから戻ってきてください。環境だけ欲しい方はこちらのリポジトリからどうぞ。ちなみに、今回もBrowserSyncを使用した自動リロードとTailwindでの環境だけ欲しいという方は、こちらのリポジトリからCloneして使用してください。VisualStudioCodeのプラグイン情報だけ欲しい方は、VisualStudioCodeのプラグインまで読み飛ばしをお願いします。今回もNode.jsが必要になるのでNodeのバージョンを確認しましょう。

それでは、作業するディレクトリに移動してください。以下のコマンドを入力してください。バージョン情報が出たら問題ありません。

node -v

BrowserSync環境構築

それでは、BrowserSyncのインストールを開始しましょう。以下のコマンドを入力してください。

npm install -g browser-sync

インストールは以上です。

次に設定ファイルを作成します。画像を参考に「bs-config.js」を作成してください。

ファイルの中身は、以下のファイルを参考にしてください。

ファイル構造
#image_title
module.exports = {
files: ["./**/**/*.html", "./**/**/*.css", "./**/**/*.js"],
server: {
baseDir: "httpdocs",
},
startPath: "/public/test.html",
proxy: false,
port: 3000,
xip: false,
notify: true,
minify: true,
};

作成したファイルを保存して、以下のコマンドを実行してください。

browser-sync start --server --config=bs-config.js

ブラウザが立ち上がり、以下の画面が表示されれば成功です。

成功例
#image_title

おめでとうございます。毎回コマンドを入力するには長いので、前回同様コマンドを省略しておきましょう。「package.json」を開いて、以下のコマンドから必要な部分をコピー&ペーストしてください。

{
"name": "initializetailwind",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"tailwindcss": "^3.2.0"
},
"scripts": {
"build": "npx tailwindcss -i ./src/style.css -o ./public/style.css",
"watch": "npx tailwindcss -i ./src/style.css -o ./public/style.css --watch",
"browser": "browser-sync start --server --config=bs-config.js"
}
}

重要な部分はこちらです。

"browser": "browser-sync start --server --config=bs-config.js"

このファイルを変更したら、以下のコマンドを実行して無事起動できれば成功です。

npm run browser

試しにファイルを書き換えてみて、自動で画面が変わることを確認してください。

もし、class部分を書き換えても変更が反映されない場合は、Tailwindのコマンドを入力し忘れている可能性があるので、ターミナルを二つ開き、以下のコマンドを違うターミナルで実行してみてください。

npm run browser
npm run watch

もし解決しない場合は、あきらめて環境をCloneしましょう。楽しく、Tailwindを書きましょう。

Visual Studio Codeのプラグイン

ここからは、VisualStudioCodeのプラグインを紹介していきたいと思います。

Tailwind CSS Intellisense

Tailwindを開発する際は、必ず入れましょう。このプラグインをインストールすると、曖昧な知識でTailwindを書くことができます。書いているとそのうち覚えますので、あまりTailwindと仲良しだと思わない開発者は必ず入れましょう。

TailwindCSSIntellisense
#image_title

Tailwind Snippets

こちらも、同じ理由でインストールしましょう。具体的に役に立ったエピソードはないですが、とりあえずインストールしましょう。

TailwindSnippets
#image_title

Auto Rename Tag

こちらは、HTMLを書くときに役立ちます。無心でHTMLを書いているときに、Tagの構造を間違えるときがあります。そういったときは、Tagの属性ごと変換する場合もありますが、始まりのTagを変更すると対応するTagを自動的に合わせてくれます。

AutoRenameTag
#image_title

Auto Close Tag

こちらも、HTMLを書くときに役立ちます。HTMLのTagのはじめを書けば、対応する終了Tagを自動で作成してくれます。この辺はお好みですね。

AutoCloseTag
#image_title

Prettier

こちらは、コードを整形してくれます。これらは、設定方法などがいろいろあったりするので、どこかの記事に入信しましょう。ちなみに僕は、VisualStudioCodeの設定でファイルを保存した際に勝手にコード成型が走るようになっています。興味がある方は、楽ですので設定してみてください。僕は、こちらのサイトを見て設定しました。

Prettier
#image_title

終わりに

ここまで読んでいただき、ありがとうございます。今回は、環境構築から環境整備までの記事になっています。Tailwindを書く際には、一回整備しておくと楽になりますので是非トライしてみてください。

楽しくTailwindを書きましょう。

興味がある方はこちらのライトブログもご一読ください。





ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる