Grunt.jsを使ったWeb制作のワークフロー

grunt-contrib-connectをインストールする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ローカルにサーバーを設定して自動的にロードし直せるプラグインgrunt-contrib-connectをインストールします。
講師:
04:03

字幕

このレッスンでは ローカルにサーバーを設定して 自動的に ロードも し直しもできるプラグイン grunt-contrib-connect というプラグインの インストールと設定についてご説明します grunt-contrib-connect のページは Grunt の gruntjs.com で プラグインのサイトに行って サーチをしなくても 比較的人気があるので ページの下の方を見てみますと ここにありました contrib-connect これが先程のプラグインです ただクリックするとページの途中に 飛んでしまいますので トップの方を表示します grunt-contrib-connect この設定には 通常のプラグインと同じ様に二つ ステップがあるんですが その二つのステップは ちゃんとコピーペーストできる様に 表示されています ですからこの二つを 順番に行っていきましょう 先ず NPM のコマンドで 実行するインストールです インストールの grunt-contrib-connect そして jsonfile の方に 設定を書き込みますので --save-dev というオプションを加えます jsonfile の package.json を予め確認しておきましょう この devDpendencies に 加えたい訳なんですが grunt-contrib は concat とwatch しかありません ここに connect を 加えようという事です ではプラグインのページで 先程の NPM の コマンドを コピーしておきます そしてコマンドラインツールの ターミナルで 先ずディレクトリを切り替えます gruntworkflows が プロジェクトの名前ですので そのディレクトリに 切り替わりました そうしたら先程 コピーしておいたコマンドを ペーストします npm istall grunt-contrib-connect そして save と dev の オプションを加えました エンターキーです warning は気にしなくて構いません あくまでも注意です インストールがちゃんと出来た様ですね Dreamweaver に切り替えると package.json の 書き換えが行われたので ダイアログが出てきますから リロードしますかは はい です そうすると 一行加わりました grunt-contrib-connect これで package.json の方の 準備はできました 二つ目のステップはまた プラグインのページに戻りまして 今度は gruntfile.js の方に書き込む ステートメントです これをコピーしましょう gruntfile.js を Dreamweaver で開きました そして Grunt に対して loadNpmTasks を 行っている一連の ステートメントの下に 先程コピーした ステートメントをペーストします クオテーションをちょっと 揃えた方が見た目が良いので シングルクオテーションは ダブルクオテーションに直します そしてファイルを保存します これで grunt-contrib-connect の タスクを加える事が できる様になりました このレッスンでは ローカルにサーバーを設定して 自動的にリロードも出来るプラグイン grunt-contrib-connect の インストールと設定について ご説明をしました とても簡単でしたね コマンドがもう書いてありますので 二つのステップ NPM のインストールと それから こちらは gruntfile.js の方で loadNpmTasks という事で プラグインの名前を 指定するという事です

Grunt.jsを使ったWeb制作のワークフロー

Gruntは開発におけるコンパイルやビルドを自動化するツールです。これを使えば煩わしい作業の繰り返しから解放されます。このコースではGruntのインストールや定義ファイルの作り方、JavaScriptファイルの連結やSASSによるスタイルシートの生成などを実際に使いながら説明します。またフロントエンド用のパッケージマネージャBowerについても紹介します。

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

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

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

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