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

プラグインgrunt-wiredepのインストールと設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
コンポーネントをHTMLドキュメントに差し込むプラグインgrunt-wierdepをインストールして設定します。
講師:
03:38

字幕

このレッスンでは Bower で使えるコンポーネントを html ドキュメントに 差し込んでくれるという プラグインの grunt-wiredep のインストールと 設定についてご説明をします grunt-wierdep の インストールについては Grunt の公式サイト grntjs.com の プラグインのページで Search の 所に wierdep と 入力するのが一番簡単でしょう そして スクロールをしてみますと 一番先頭に wierdep というのが載っています 他にも似た様な名前がありますけれども wierdep の単独のものが grunt-wierdep になります そしてそのページに飛ぶと インストールの仕方が例によって 下の方に書いてあります まずは NPM で このコマンドでインストールをします コピーしておきましょう コマンドラインツールとして ターミナルを開きました ここでプロジェクトのフォルダに grunt-wierdep を インストールします ですから先ずディレクトリを変更しましょう cd で プロジェクトの名前ですが gruntworkflows と s が入りますけれども ちゃんと ディレクトリが変わりましたので 先程コピーしておいた コマンドをペーストします これは --save-dev とありますので jsonfile の方に この grunt-wierdep が必要だ という事が書き込まれます エンターキーを押して インストールを行いましょう warning は気にしなくて結構です あくまで注意という事ですので インストールには特に問題ありません インストールができた様ですね プロジェクトのフォルダの中の package.jason を開けてみました そうすると この最後の方に grunt-wierdep という事で devDependencies 開発に必要だという事で 設定が加わりました 後は gruntfile.js の方に 設定を書き加えます これも先程のサイトに 設定の仕方が書いてありますので コピーしてしまいましょう grunt-wierdep のページで 画面を下にスクロールして 先程 NPM のコマンドを打ちましたので もう一つ必要なのはこれですね loafNpmTask そして プラグインの名前の grunt-wierdep です コピーしましょう Dreamweaver で gruntfile.js を開きました 設定は下の方に まとめて書いているので ここの並びですね この下に 一行加えて先程コピーしたコマンド method の呼び出しをペーストします ダブルクオテーションと シングルクオテーションは揃えた方が 綺麗なので シングルをダブルに変えておきます そして保存します これで Grunt や dep が使える様になりました このレッスンでは Grunt が依存するコンポーネントを html ドキュメントに 挿入してくれるというプラグイン grunt-wierdep の インストールと設定について ご説明しました それらは grunt-wierdep のページの まず NPM コマンドですね ここに書いてあります そして今度は gruntfile.js の方には この statement を 書き込んだという事です

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

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

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

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

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

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