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

Gruntとプラグインをインストールする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
NPMでGruntとプラグインのcontrib-concatをインストールします。
講師:
06:15

字幕

このレッスンでは Grunt と Grunt のプラグインを一つ インストースします 先ず Grunt のインストールなんですけども Grunt のサイト トップページの get started という所を見ると Grunt のインストールの仕方が 書いてあります 下にページを辿って行って これがそうですね NPM の インストールコマンドで インストールをします そして Grunt のインストールなんですが --save-dev この説明は後でしましょう これをコピーしてしまいます Dreamweaver で package.json を開きました 今の所 四行の情報だけなんですけれども ここに Grunt が必要だということで 一つ項目が書き加わります インストールをしてから 確認をしてみましょう NPM のコマンドは コマンドラインツールから入力します そこでターミナルを開きました ではここで インストールするフォルダ ディレクトリーを指定します チェンジディレクトリーで gruntworkflow そしてエンターで gruntworkflows に 切り替えができましたので 先程 コピーしておいたコマンドを ペーストします npm install grunt これでこの gruntworkflows というディレクトリーに Grunt がインストールされます そこにオプションで --save これは package.json の方に データを書き込むということになります この Grunt が必要ですよ ということで情報を書き込みます そして -deg というのはその情報を書き込む時に この Grunt は開発用に必要です という意味になります ではこの命令 エンターキーで実行してみましょう warning が出ていますけど あくまでも注意ですので気にしなくて大丈夫です Grunt の 0.4.5 がインストールされた ということになっています では先程の package.json の ファイルを確認してみましょう Dreamweaver の警告が出ています それはこの package.json に 書き換えが行われたからです 移動としますかと言われていますので します はい としましょう そうすると 情報が書き加わりました dependencies というのは これらのツールパッケージ モジュール等が 必要ですという意味なんですけども dev が頭に付くと 開発用に必要です ということになります 開発用に必要で実際に アップロードする リードの方には必要がない ということになりますので 開発用とそうでないものが分けて 設定できる様になっています そして Grunt については 0.4.5 が必要ですよということで バージョンまできっちり書いてあります このタイトルなんですけれどもこれは メジャーバージョンは 0 なんですけれども その後もし新しいものが出たら マイナーバージョン以降ですね それを使いましょう という意味になります 次はプラグインのインストールです プラグインという項目がありますので ここに飛びます そしてキーワードでサーチできるんですけども 今回使うものは人気のあるものなので 上の方に載っています こちらの contrib-concat というものでファイルを連結してくれるという そういう機能を持ったプラグインです そして contrib というのは contribution の頭だと 思うんですけれども Grunt Team が開発しましたよと いうことになっています ですからその意味でも安心ですね ではこの情報をみましょう クリックをします これが grunt-contrib-concat の プラグインです こちらが実際に インストールする場合の 名前になりますので contrib-concat だけではなくて grunt- まで付ける様にしましょう そしてインストールの情報なんですけれども 次のページ 下ですね ここに 先程の Grunt と 殆ど同じですね grunt の後に -contrib-concat が 付いたということで 意味はもうお分りですね ではこれをコピーして NPM でインストールをしたいと思います 今コピーしておいたコマンドを ターミナルに ペーストします そしてエンターです これは軽いので直ぐ入りますね ワーニングはこれは package.json に オプションなんですけども こういう情報を書いていた方が いいんじゃないと ということで必須ではありませんので 気にしなくて大丈夫です そして contrib-concat ですね 0.5.1 がインストールされましたということです --save-dev と 入れましたので この情報をまた package.json の方に 書き込まれています 確認しておきましょう 書き換えが行われたので また警告が出ていますね はい をクリックします そうすると情報が書き換わって 今度は grunt-contrib-concat の 0.5.1 が追加されました このレッスンでは Grunt をインストールして それからプラグインですね contrib-concat というプラグインをインストールしました NPM のインストールのコマンドは キーボードから上向き矢印で 命令が出てくるんですけども NPM インストールですね そして インストールしたい モジュールやプラグインの名前 --save で package.json に書き込まれ そんな時に -dev を付けると develop 用 開発用として インストールされるということでした

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

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

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

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

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

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