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

Bowerとパッケージのインストールと設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
BowerとパッケージのBootstrapをインストールします。
講師:
06:21

字幕

このレッスンでは Bower とそのパッケージを 一つインストールします 現在 Bower のサイト bower.io を開いています パッケージはこの Search packages というボタンで サーチをする事ができるんですが 今回インストールするのは やはり一番人気ですね bootstrap を入れたいと思います プロジェクトのフォルダ gruntworkflows を ちょっと確認しておきましょう 中にはこれだけのファイルと フォルダがありますけれども Bower に関わる様な 名前は今の所ありません Bower をインストールしますので コマンドラインツールとして ターミナルを開きました ではこのターミナルで NPM でインストールを行います NPM の インストール 全体にという事で global -g を指定します そして Bower です これで直ぐ取ることもありますけれども 権限が これではいけないという風に 言われてしまう事があります 今回はその場合なんですけれども ルートの アドミニストレーターの権限でないと いけないという事になっています 権限を変えるか このターミナルの場合には スーパーユーザーの コマンドというのがあります 今インストールしたコマンドというのは 上向け矢印でまた表示されるんですが このコマンドの前に スーパーユーザーで実行するという事で sudo という風に入力します そしてエンターです 管理権限があるのだったら パスワードを見せてみろという事なので パスワードを入力しました 少し時間が係るかもしれませんけれども 今進捗していますね プロンプトが帰ってきましたので インストールができた様です Bower の 1.6.5 がインストールされました 一旦画面をクリアしまして そして Bower の初期化のコマンドです Bower の初期設定の jsonfile を作ります ですからプロジェクトのフォルダに チェンジディレクトリですね ディレクトリを移します gruntworkflows 移れた様ですので ここで初期設定のコマンドです Bower で init これは NPM で jsonfile を作る時と同じコマンドですね init あのコマンドと同じ様に 質問に答えていけばいいです Bower のコマンドというのは NPM と結構揃えているので分かり易いです デフォルトでは gruntworkflows というフォルダが 帰ってきました これが名前ですね エンターです description 前に入れていた奴が多分 入っているんだと思いますが特に 変更する必要がありませんのでエンター 任意ファイル 指定しなくて結構です それから これは矢印キーで選択するんですけれども ここも特に選択はありませんので エンターキーで飛ばして下さい キーワードも要りません 名前は Fumio Nonaka 私の名前が入っていますので ここでご自分の名前を入れて下さい license MIT でいいでしょう デフォルトで良ければ またエンターキーです homepage も特に気にしません エンターで飛ばします 今度は yes no で答えるんですが 基本的に幾つかある質問を 全部 yes Y で結構です そうするとこんな ファイルになりますよと こんな jsonfile になりますよと 出てきますので 良さそうですのでこれも また Y でエンターキーです プロンプトが帰ってきましたので jsonfile が作られました プロジェクタのファイルの中と それからjsonfile を 確認してみましょう プロジェクトのフォルダ gruntworkflows の中には bower.json というファイルが 出来上がりました これを開いて見てみましょう Dreamweaver で bower.json のファイルを開きました 先程こういうファイルができますけど 良いですかと 聞かれた通りの内容になっていますけれども ここで package を一つ bootstrap を加えて この jsonfile にその設定も 書き加えたいと思います コマンドラインツールに切り替えました そして画面をクリアにしておきましょう クリアと jsonfile は gruntworkflows の中にありまして 現在その js という中にいますので ここで良いですね ではインストールをします Bower のコマンドでインストールですが NPM と一緒です インストールと そしてjsonfile に設定を書き加えます この時には --そして save です ここも NPM と一緒ですね モジュール package の名前は bootstrap です そしてエンタキー インストールが行われています これも少し時間が係るかもしれません インストールができた様です プロジェクトのファイルの bower.json の上に 今度は bower_components というフォルダができました この中に bootstrap のモジュールと それから bootstrap は jquery を必要とするので これもちゃんとインストールされています Dreamweaver に切り替えると bower.json のファイルが 更新されているので リロードしますかという警告が出てきますので これは はい です そうすると依存ファイルという事で bootstrap が書き加えられました このレッスンでは Bower とそのパッケージのインストールと 設定についてご説明しました まず Bower をインストールするには NPM のコマンドで npm install -g bower 場合によっては 管理者権限が求められる事がありました それから Bower のユニットこれで jsonfile を作るという事ですね そして bootstrap のインストールは MPN と似た様なコマンドで bower install そして jsonfile に書き込むんでしたら --save というスイッチを付けて bootstrap というパッケージの名前を 入れるという事でした

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

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

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

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

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

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