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

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Bowerのコンポーネントをひとつのファイルにまとめるプラグインのgrunt-bower-concatをインストールして設定します。
講師:
03:48

字幕

このレッスンでは Bower の依存する ファイルが複数あった場合に それを一つにまとめてくれるプラグインの grunt-bower-concat の インストールと設定についてご説明します この grunt-bower-concat というのは 自動的に Bower が依存するコンポーネント JavaScript ファイルであるとか CSS ですね それを一つにまとめて 指定したパスに 保存してくれるというプラグインです grunt-bower-concat の プラグインのページは Grunt のサイト gruntjs.com で Plugins のボタンで 表示される search のフィールドに bower ワンスーペース concat と入れると良いでしょう そうすると直ぐに見つかります bower-concat の方ですね 逆の順番もあるのでご注意下さい bower-concat をクリックします そうするとインストールの仕方等が 例によって書いてあります プラグインは通常二つのステップで インストールする事になります 先ずは NPM のコマンド install で インストールすることになりますね その後今度は gruntfile.js の方に 指定をする必要があって それが loadNpmTasks の 呼び出しですね この二つを行って行きましょう 間違いの無い様に 先ずは一つ目の コマンド NPM のコマンドを コピーしておきます コマンドラインツールの ターミナルを開きましたので 先ずはディレクトリを プロジェクトのフォルダの方に移動します gruntworkflows ディレクトリが代わりました そこで先ほどコピーしておいた NPM のコマンドをペーストします この --save-dev という スイッチの場所は プラグインの前でも後でも どちらでも構いません ですからこのままエンターキーを押します warning は気にしなくても大丈夫です やらなくて良いのということを 唯注意しているだけですので プロンプトが帰ってきましたので インストールが済んだ様です 念のため package.json を開いてみると devDependencies の中に grunt-bower-concat が入っていますね ですから json ファイルへの書き出しも ちゃんと出来ています それから gruntfile の設定に 移る訳ですけれども ここも設定はコピーを使う事にしましょう この loadNpmTasks という method の呼び出しを 一つ加えてその中に grunt-bower-concat を付け加える という事になります こちらもサイトの方にある 案内をそのままコピーしてしまいましょう 選択してコピーです gruntfile.js の方に書き換えます 改行をして ペースト シングルクオテーションと ダブルクオテーションは 一応統一しておいた方が綺麗なので 統一をして そしてファイルを保存します このレッスンでは Bower が依存する js ファイル JavaScript ファイルや CSS ファイルを 一つにまとめてくれるプラグイン grunt-bower-concat の インストールと gruntfile.js への 設定だけ行いました これで grunt-bower-concat が 使える様になった訳です

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

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

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

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

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

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