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

grunt-sassをインストールする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
SASSを扱うプラグインのgrut-sassをインストールします。
講師:
04:38

字幕

このレッスンでは Grunt の Sass のモジュールをインストールします Sass というのは CSS を拡張する スクリプト言語です Grunt では この Sass を扱うモジュールもあります Grunt のプラグインを見てみましょう そして Sass で 検索をしてみます そうすると幾つかあるんですが 星の付いている 人気のあるものもあるんですが 二番目は少し古いです それから最初の方のは ルビーもインストールしなければなりません 簡単に扱えるのはこの三番目の Sass なので これを使おうと思います grunt-sass というのが プラグインを指定する時の名前です この Sass のサイトの URL は sass-lang.com です ここでちょっとドキュメンテーションを 確認しておきましょう Grunt で Sass を扱う時に 指定できるオプションで 一つご紹介しておきます 出力のスタイルなんですが アウトプットスタイルという事で Grunt で Sass から CSS の ファイルを作るんですがその時に どんなスタイルで出しましょうかという事で デフォルトは この nested と入れ子になった状態ですね それに対して expanded というのもあります これはおそらく人が見て一番見易い 標準的に書かれる書き方ですね コンパクトというと セレクター一つに対して 一行使ってしまうので 小スペースではありますけれども 人が見た時にちょっと 見にくいかもしれません そして更に compressed 全部を一行に書きます 見にくい代わりに サイズが小さくなりますので 最終的にサイトにアップする時には この形にするとお得でしょう Dreamweaver で packaged.json を開きました これからインストールする grunt-sass は この devDependencies の中に 加える形にしたいと思います grunt-sass のインストールは コマンドラインツールで行いますので ターミナルを開きました 先ずはインストールする ディレクトリに移ります チェンジディレクトリの プロジェクト名が gruntworkflows という風になっていますので 横に切り替えます そして grunt-sass をインストールする前に node-sass をインストールして おかなければなりません NPM のコマンドで インストールします install node-sass です 少し時間がかかるかもしれません warning はあくまでも注意です 気にしなくて構いませんオプションの 設定はされていませんよ という事ですから オプションを設定しなくても 問題はありません 少し時間がかかりますね プロンプトが出ましたので インストールが済んだ様です ではこの後に grunt-sass を インストールします NPM の インストール そしてこれは package.json に付け加えますので --save そして 開発用という事ですので -dev を加えます そして gtunt-sass と また同じ注意が出ましたけれども 気にしなくて構いません プロンプトが出ましたから インストールは済みました Dreamweaver に切り替えると package.json が 書き換えられたので これを更新しますかという風に 問われるので更新します grunt-sass が インストールされたという情報が 付け加えられています それが devDpendencies に 入ったという事ですね このレッスンでは Sass を扱うための Grunt のモジュール grunt-sass のインストールについて ご説明しました インストールする時には コマンドラインツール 今回はターミナルを使っていますけれど そこで NPM のコマンドで まず npm install で node-sass を入れておきます その後に続けて npm install grunt-sass なんですが package.json に付け加える時には この --save-dev というのが必要になります

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

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

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

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

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

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