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

grunt-sasでスタイルシートをつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
grunt-sassを使ってSCSSからCSSファイルを作成します。
講師:
08:05

字幕

このレッスンでは grunt-sass を使って CSS ファイルを生成してみたいと思います プロジェクトの gruntworkflows のフォルダを開きました その中に builds というフォルダがあって 更に development この中に最終的に サーバーにアップロードする ファイルがあります index.html と それから JavaScript の 関連のファイルですね json と js ファイルが1個づつ入っています まだ CSS のフォルダがありませんけれども そのフォルダも含めて grunt-sass で作って しまいたいと思います その時に使うのが components の中の sass というフォルダの中にある CSS SCSS のファイルです アンダースコアの付いたものが六つあって そしてつかない stile.scss が 一つあるんですが 使うのは style.scss の方だけです 他の六つは このstyle.scss の中で使われます ちょっと確認してみましょう Dreamweaver で開いてみます そうしますと import という所で 先ほどのアンダースコアの付いていたものが 読み込まれています 読み込む場合にはアンダースコアが 付いていないんですが やはり六つありますよね ですから style.scss だけを grunt-sass では使います packege.jason の方は既に設定が 済んでいるんですが確認をしておきます devDependencies 開発の時に使うというモジュールの中に プラグインとして grunt-sass 1.1.0 が入っています これで grunt-sass が 使える状態ということです もう一度ディレクトリ フォルダ構成を確認しておきましょう 使うのは comportments 野中の sass の中の style.scss です そして生成した CSS ファイルは builds の中の development に CSS というフォルダを作って その中に style.css で 作りたいと思います Dreamweaver で gruntfile.js を開きましたので grunt-sass を使う準備をしましょう 先ずは grunt.loadNpmTasks そして grunt-sass を入れる訳ですから これをコピーしちゃいましょう コピーをして そしてペーストです 名前は grunt-sass エスエイエスエスですね これで良いでしょう そして 今度はタスクを加えます タスクは 前に concat というのが ありますけれども これに付け加える形になりますから カンマ区切りで 名前は sass にしましょう タスク名 sass です そして コロンの オブジェクトで指定しますので 中括弧始まり中括弧閉じです そして distribution という 意味ですが dist として ここもまた中括弧中括弧という事で 幾つか指定を加えます 先ず最初にオプションです options と 複数設定できますから複数形ですね そして 一個だけでも 指定するのは一個だけです style という指定をします これは出力のスタイルなんですけども 今回は expanded と という指定にしたいと思います 出力のスタイルというのは Sass のサイトでドキュメンテーションを 確認しておきましょう sass-lang.com です ドキュメンテーションに行って 少し下の方なんですが Output Style です そして デフォルトはこの nested という 入れ子になった形なんですが 今指定したのは expanded この下にありますけれども 一番人が見て見易い形ですね 開発中はこの形にしておいて チェックができる様にしておいて 最終的には最もファイルが ファイルサイズがお得になる この一行のスタイルですね compressed という風に してしまうと良いでしょう Dreamweaver に戻って gruntfile の設定を続けていきます options の後に 今度はどのファイルを使って どのファイルを作るか ということで files です ここもやはり中括弧始まり 中括弧閉じですが更にそれが 配列の中に入ります そしてこの中では今回は 一つだけなんですけれども 先ほど確認した通り 先ず元となる ソースですね から どこどこへ destination の略ですけど dest という事で パスを指定する事になります 先ほど確認した通り components と この中の sass の style.scss ですね これを元にして builds の development そこに css というフォルダを作って 更に style ですね css という事になります 保存をしましょう もう一つこの Sass のタスクは デフォルトの方に 入れてしまう事にしましょう registerTask デフォルトで今 concat という 一つ目のタスクだけなんですが ここに加える事の 二つ目のこの Sass ですね コピーを持って行きましょう という事で 改めて保存をします コマンドラインツールとして ターミナルを開きました 先ず チェンジディレクトリで gruntworkflows プロジェクトの フォルダに切り替えます 切り替えましたので そしてタスクはデフォルトを 入れましたから Grunt だけで実行できてしまいます 二つのタスクが実行されました concat とそれから sass ですね フォルダの方を確認してみましょう gruntworkflows の中の フォルダの中の builds の development に 新たに CSS のフォルダが出来上がって style.css が 作られました 一応開いて確認しましょう expanded を選びましたので 人が見て分かる様な形で スタイルシートが出来上がりました このレッスンでは grunt-sass を使って CSS ファイルを作成しました gruntfile.js の設定ですが先ず grunt-sass を loadNpmTasks で読み込みます そしてタスクの名前を付けて distribution ですけれども options で 出力のスタイルですね 見易い形を選びました そして files の中で どのファイルをどこどこへ src と dest の設定をすれば 後はデフォルトに入れましたので Grunt だけで 実行できてしまったという事です

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

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

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

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

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

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