Gulp.jsを使ってWeb開発を効率化しよう

SASSをコンパイルする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインでSASSからCSSファイルをつくって、別のフォルダに書き出します。
講師:
04:14

字幕

このレッスンではプラグイン gulp-sass を使ってSass から CSS ファイルを作って別のフォルダに書き出してみます。今、project のフォルダが開いているんですけれどもこの sass というフォルダの中に拡張子 scss というSass のファイルが入っています。css はないので、ここから作り出してcss というフォルダに作られた style の css ファイルを書き出したいと思います。gulpfile.js はあるんですけれどもSass の処理まではまだ作り込んでいません。sass のファイルの中身も簡単に確かめておきましょう。これをDreamweaver で開きます。Sass はこんな感じの書き方ですね。変数が指定できたりあるいは、入れ子にしてしまうということが出来るわけですね。ここからCSS の本来のスタイルのファイルを書き出そうということです。ではgulpfile.js の内容は今のところコピーをするだけのタスクになっています。ですから、タスク名も copy なんですがここはまずsass に替えておきましょう。そして、そのコピーの処理の内容ですけれどもソース src でsass というフォルダの中の拡張子 scss のファイルを単純にコピーですね。 デスティネーション dest でcss というフォルダを必要であれば作ってそこにコピーするということになっています。この前にSass の処理を入れるということですね。Sass から CSS に変換するという或いは Sass から CSS を作り出すと言ってもよいでしょう。コンパイルということがよく言われます。その処理を加えますのでまず、プラグインの読み込みですね変数名は sass にしましょう。そしてrequire のプラグイン名これは gulp-sass です。この、srcそれから dest コピー先ですね。これはよいので、ここに pipe でsass の処理を加えます。そしてここは単純に sass とこの変数に入れたオブジェクトに対して実行をかけるということだけです。では、一旦保存しましょう。「コマンドラインツール」の「ターミナル」を開きました。そして、プロジェクトのディレクトリですね。gulp_project に既に変更してあります。変更は、cd チェンジディレクトリですねもう済んでいるのでgulp の処理が加えられます。gulp のタスク名はsass にしましたね。実行します。そうするとファイルが小さいのもありますけれどもすぐに処理が終わってしましました。 プロジェクトのフォルダを見るとcss というフォルダが出来上がっています。そして、拡張子 CSS のファイルが出来上がりました。どんな内容になったか一応、確認しておきましょう。Dreamweaver でこれも開きます。そうすると、Sass で書かれたものがこのような形でこれはお馴染みの CSS の書き方ですね。それに変換されています。このレッスンではプラグインのgulp-sass というものを使ってSass から CSS ファイルを作って別のフォルダ css というフォルダにCSS の形式のファイルとして書き出しをしました。その場合、処理としてはまずは、プラグインの読み込みですね。require で gulp-sassその上で、元はコピーの処理はできていたのでそのコピー先にコピーする前にこの sass に対して実行をかければよいということでした。

Gulp.jsを使ってWeb開発を効率化しよう

GulpはWeb開発におけるコンパイルやビルドを自動化してくれるタスクランナーツールです。モジュールやプラグインなどを使って、ビルド用のJavaScriptファイルでタスクを定義します。このコースではGulpとプラグインのインストール、タスクの定義や画像ファイルの圧縮、JavaScriptファイルの連結やSASSによるスタイルシートの生成などを学べます。

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

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

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

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