Browsersync+Gulpで静的サイト制作で便利な、html/css/js変更後のブラウザの自動リロード環境を作りました。ななファクトリーNa2factory|ななファクトリートップページに戻るAboutNewPostDesignHTML/CSSWordPressContactNa2factory|ななファクトリーtwitterへななファクトリーtwitterのフォローボタンNa2factory|ななファクトリーInstagramへななファクトリーInstagramのフォローボタンサイト内検索へななファクトリーサイト内検索へのボタンサイト内検索を閉じるななファクトリーサイト内検索フォームを閉じるNa2factory|ななファクトリートップページに戻るAboutNewPostDesignHTML/CSSWordPressContactNa2factory|ななファクトリーtwitterへななファクトリーtwitterのフォローボタンNa2factory|ななファクトリーInstagramへななファクトリーInstagramのフォローボタンサイト内検索へななファクトリーサイト内検索へのボタンサイト内検索を閉じるななファクトリーサイト内検索フォームを閉じるフリーランスWebデザイナー・ななふのデザイン、コーディングの勉強記録やTIPSなどHOMEHTML/CSSBrowsersync+Gulpでブラウザの自動更新。2023.01.18スポンサーリンクこんにちは。静的サイトのコーディング案件を数回こなしまして、もっと効率よく制作したいと思うようになりました。目標としてタスクランナーGulpを使い、minify等の自動化、最終的にEJSでヘッダーやフッターを共通化して制作できるようにしたいです。HPcode(えいちぴーこーど)EJS(イージェーエス)はテンプレートエンジン呼ばれるNode.jsのパッケージの1つです。JavaScriptとHTMLを混ぜた感じでHTMLサイトが作れることをイメージしてもらえたらと思います。1番のメリットとしては、ヘッダーやフッタhaniwaman.com目標達成に向けてまずはGulpを使えるようにします!↓Gulp公式サイトは以下になります。MEDIAさんの記事を参考にさせていただきました。私はSassもまだ導入していないのですが、こちらもぼちぼち取り入れていくつもりです😅(最近のcssの変化スピードが速いので、Sass導入しなくてもいいかな〜・・・と思ったりもしますが・・・。MEDIAウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。導入は簡単で、本記事の手順では5分程度でセットアップできます。ics.mediaGulpでできることで特に魅力的に見えたのが、Browsersync(ぶらうざーしんく)を使ってhtml,css,jsなどの編集を行ったら自動でブラウザがリロードできる環境!まずはこれを使えるようにしたい!静的サイト制作時は毎回ソース変更するたびにブラウザの再読み込み、変更が反映されない場合はキャッシュ削除をして、、、と、ストレスが蓄積されていました。WordPress制作なら世のスキル高い方々の情報により、再読み込みが不要になるようにphpで対処できているのですが、静的サイトの方は泥臭くやってました(汗)今回はこのBrowsersync導入で予想外に苦戦してしまったのでメモを残しておきたいと思います。MEDIAウェブサイトを閲覧するユーザーの環境は多岐に渡ります。したがって、ウェブ制作者は多くの環境の動作確認をしなければなりません。その時の手間を大きく省いてくれるBrowsersyncというツールを紹介します。Browsersyncとはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。ics.mediaまた、はにわさんの記事も参考にさせていただきました。※最初、こちらのコードを参考に進めていったのですがソース変更してもブラウザの再読み込みが自動で行われずにハマってしまいました。HPcode(えいちぴーこーど)Gulpは、いろんな作業を自動化してくれるツールです。前に作ったウェデイングのデモサイトを再利用しました。架空の結婚式場のブライダルフェアのLPを制作してます。Photoshopでデザインカンプを作成し、コーディングを行いました。na2-factory.com2021.07.26デモサイトのデータ一式をローカルフォルダに用意して、このフォルダ以下で作業していきます。※Gulp導入ではMac使用のため、ターミナルを使って作業します。Gulpの導入まずはnpmを使える様にするためにNode.jsのインストールが必要なのですが、こちらについては上記参考記事で詳細を確認できますので本記事では省略します。私の今回の環境情報です。2.27.11以下、npmコマンドを打つ手順です。installで追加していくイメージです。作業フォルダに移動してpackage.jsonファイルの作成ターミナルで作業フォルダに移動し以下コマンドを打つと、package.jsonファイルが生成されます。-yターミナルでは以下の様に表示されます。Gulpのインストール次にGulpのインストール!ターミナルで以下コマンドを打ちます。これでGulpがこのフォルダで使えるようになります。MEDIAさんの記事に以下の様に載っておりましたので、こちらに習いました。現在はローカルでのインストールが一般的とのことです。gulp-cliとグローバルにGulpを導入する手順を解説しているところもあります。現在ではそれは少数派です。Gulpはグローバルではなく、ローカルだけにインストールするのがフロントエンド界隈では一般的です。環境差異で動作しないなどトラブルのもとになるので、グローバルにインストールしないほうが望ましいでしょう。https://ics.media/entry/3290/Browsersyncをインストール続けて、Browsersync(browser-sync)を同様にインストールします。-DここまででBrowsersyncに必要な物は揃いました。Gulpの設定ファイル(gulpfile.js)を作るgulpfile.jsファイルでプラグインの読み込みとタスクの設定を行います。browserSyncFunc);なお、上記の記述は以下のBRISKさんの記事の内容を参考にさせていただきました。BRISKCMSを構築するほどでもないけれど、複数のページをさくっと作りたい。PHPが使えない・インクルードができないサーバーでもページを量産したい。いったとき、手軽にHTMLを生成できる「EJS」がとても便利です。gulpで実行ファイル保存後に、ターミナルで以下のコマンドを打つことでブラウザにindex.htmlが表示されます。gulpターミナルに以下の表示が出ます。実行後のターミナルこの状態でhtml,css,jsを変更すると、ブラウザの更新を行わなくても即座に反映されます。コマンド実行と共に立ち上がったブラウザの画面↓htmlやcssの変更をしてみよう!まずはhtmlの記述を変更してみます。中央付近の日付「2021.7.31」を適当に別の日付に変更してみます。以下動画をご覧ください。VSCODEで保存した後にブラウザの日付が変更されていますね!なお、この時のターミナルの表示は以下の様になります。./の後に、browserSyncReloadの表示が続いています。Fair」の文字色を、黄色からピンクにしてみた場合の動画です。Browsersync本来の機能としてGoogleChromでも、Safariでも、FireFoxでも同じローカルサーバーにアクセスすれば連動して動きます!ターミナルの画像で赤線で囲っているExternalのアドレスを使用します。http://xxx.xxx.x.xx:3000)手持ちのiPhoneでも連動して動いているのを確認できたので、非常に便利ですね✨これだけでももっと早く導入すれば良かったと思いました。😊さて次からは、動かなくてハマったことについて書いておきたいと思います。記述は合っていると思うのに、変更してもリロードされない最初作ったgulpfile.jsの記述。);});何回も見直して、多分記述は合っていると思うのですが、、、function()をfunction(done)にして、done();を付けたりもしましたが変わらず。3000もあとで追加したけど意味がないかも。gulpのコマンドを打って、ブラウザにindex.htmlは立ち上がるのですが、各ソース(html,css,js)の変更を行っても反応がなく、自動更新されませんでした。MEDIAさんの記事でgulp.taskを使うのは現在公式で推奨されていない、という記述がありました。コラム:task()メソッドを使う方法は非推奨?実は、2019年5月現在では、task()メソッドによるタスク定義は公式が非推奨としています(使えないわけではありません)。代わりに推奨されているのが、タスクごとに関数をつくり、CommonJSのmodule機能を用いる方法です。分からないけど、gulp.taskを使用していないBRISKさんの記事参照の書き方で作っていった方が、将来的にいいのでは、という結論に至ったのでした。次のステップへ!まずはソース変更後のブラウザ自動更新、できるようになりました。次はcssやjsのminify、画像の圧縮なんかも自動で走らせていきたいですね。環境構築はハマること多しですが、その後必ず楽になるので頑張って取り組みたいと思います。今回は以上になります。ありがとうございました。群馬県在住の40代女子です。2020年8月からWebデザインの勉強を独学でスタートし、2021年11月に開業しました。守備範囲はバナー・チラシ制作からWordPressでのサイト制作まで。自主制作物、テクニック等を紹介しています。ななファクトリーこちらもどうぞ!関連記事Demoベーカリーコルネ自主制作の記録!デザイン→コーディング→WordPress化までやってみる。2022.06.07DemoベーカリーコルネHTML/CSSWordPressDemoベーカリーコルネ自主制作の記録!デザイン→コーディング→WordPress化までやってみる。2023.04.15HTML/CSSDemoベーカリーコルネ自主制作の記録!デザイン→コーディング→WordPress化までやってみる。coverとaspect-ratioで対応コメントコメントを書き込むコメントをどうぞメールアドレスが公開されることはありません。名前メールサイト上に表示された文字を入力してください。スポンサーリンクお気軽にご相談くださいお仕事のご依頼はこちらからサイト制作のご依頼募集中です。こちらからお気軽にお問い合わせください。群馬県在住の40代女子です。2020年8月からWebデザインの勉強を独学でスタートし、2021年11月に開業しました。守備範囲はバナー・チラシ制作からWordPressでのサイト制作まで。自主制作物、テクニック等を紹介しています。文字を90度回転、親要素の両端に配置!レスポンシブ対応2021.06.152022.03.04イラレでもバナートレース30回達成!手順や手ごたえ等をまとめます2021.04.212023.03.11自主制作の記録!デザイン→コーディング→WordPress化までやってみる。記述は合っていると思うのに、変更してもリロードされないただし、こう書いたら動きました次のステップへ!スポンサーリンクWordPressオリジナルテーマ作りました!Demoサイト公開中です自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【WordPress】完成したよ!是非見てね自主制作の記録!デザイン→コーディング→WordPress化までやってみる。自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【コーディング編1】ひとまずトップページのレスポンシブ対応まで自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【デザイン編1】シンプルなベーカリーサイトお気軽にご相談くださいWordPressで更新しやすいサイトを作りますアフターフォローもお任せくださいちょっとしたカスタマイズも是非ご相談ください!人気の記事イラレでもバナートレース30回達成!手順や手ごたえ等をまとめます2021.04.212023.03.11photoshop初心者がバナートレース30本達成!躓きまくりの過程とこれからのこと2020.11.062022.08.17自主制作の記録!デザイン→コーディング→WordPress化までやってみる。イラレで作ったSVGを外部ファイルで読み込み。TOPEnvelopeCONTACT。