Gulp.jsを使ってWeb開発を効率化しよう

browser-syncをインストールする

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザの再読み込みを自動で行うプラグインbrowser-syncをインストールします。
講師:
02:43

字幕

このレッスンでは、ブラウザーの再読み込みを自動で行うプラグインbrower-sync をインストールします。brower-syncという名前なんですけれどもgulp- が頭につきません。その理由なんですけれども今gulpのサイトを開きました。このプラグインで検索ページですねbrower-sync なんですがno results foundということでありあせん と出てきます。というのはbrower-sync というのはgulp 専用のプラグインではないからです。けれども、gulpでもちろん使えます。ではこれ検索どこからいったいいからとnpm ですね、nodepakegemanagerのページnpmjs.comこれが npm のページなんですがここにもパッケージを検索するためのボックスがあります。ここで brower-sync候補に出てきましたね。と検索してあげるとページインと見ます。ということでこの brower-sync はgulp 専用のプラグインとちょっと使え方が違いますのでそこはお気を付けください。でも、インストールの仕方は一緒ですね。npm installプラグイン名brower-sync ということでこれにはもちろんオプションを付けたほうがいいです。 brower-sync もローカルにインストールしますので先ず、プロジェクトのディレクトリに変更しておきます。3dですね。そして、プロジェクトのディレクトリフォルダ名です。先ほどコッピしましたのでペーストしますけれどもローカルにインストールしますからここで、1スペース--save-dev ということでローカルのインストールを行います。これがインストールの終了画面です。brower-sync がインストールされました。結構項目数多いですね。package.json も確認しておきましょう。devdependencies の中にbrower-sync が入りました。このレッスンでは、ブラウザーの再読み込みを自動で行うプラグインbrower-sync のインストールについてご説明しました。gulp 専用のプラグインでなくnodejs のパッケージであるということにちょっとお気を付けください。

Gulp.jsを使ってWeb開発を効率化しよう

GulpはWeb開発におけるコンパイルやビルドを自動化してくれるタスクランナーツールです。モジュールやプラグインなどを使って、ビルド用のJavaScriptファイルでタスクを定義します。このコースではGulpとプラグインのインストール、タスクの定義や画像ファイルの圧縮、JavaScriptファイルの連結やSASSによるスタイルシートの生成などを学べます。

1時間48分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年07月27日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。