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

ベンダープレフィックスをつける

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインでCSSの中の必要なプロパティに、ベンダープレフィクスをつけます。
講師:
04:41

字幕

このレッスンでは、プラグインのgulp-autoprefixer を使ってcss の中の必要なプロパティにベンダープレフィックスを付けてみたいと思います。これがプラグインですね。そして CSS は sass でs-c-s-s 形式で作ってあります。これが sass というフォルダの中にstyle.scss という形で保存されています。これはアニメーションによくあるパタンですけれどもtransition が定義されています。そして、カラーがブルーそれから、水平方向に伸縮を継ぐしておいてマウスポインターが重なったらカラーを、aqua 明るくしてですねシアンですね。それで、水平方向にはもとに戻すということでアニメーションをさせます。この中では、transformtransition このあたりがベンダープレフィックスが必要な部分ということになります。gulpfile.js はすでに用意してあっで但し、これは sass を css にコンパイルするだけですね。手順としてはプラグインとしてgulp-sass をrequire して変数に入れそして、ここはコピーですけれどもソースとして先ほどいいましたとおりsass というフォルダの中に入っているでその中の .scss のファイルをディスネーションとしてはcss というフォルダに対してコンパウンドしてコピーすると言うことになっています。 そのコンパイルの部分がこの sass に対して実行しているここですね。ですから、これにやってscss がコンパイルされてcss というフォルダの中に納られるcss の形式でですね。これにベンダープレフィックスを加えるということになるわけですが先ずはプラグインの 4 組ですね。var autoprefixerということにしましてrequire のプラグイン名は先ほどお見せした通りgulp の何度もタイプしてタイプミスは嫌なのでコピーしちゃいましょう。もう一度タイプ確認ですね。autoprefixer ということで読み込めはできました。実行するのは sass から css に変わったこの後ですね。ここで、.pipe でつなげています。そして実行するにはこの autoprefixer に対して実行ということをあげればいいでしょう。これで保存します。コマンドラインツールの「ターミナル」を開きました。そして、ディレクトリはプロジェクトのディレクトリが変更されています。ですから、ここで gulp のコマンドを打てばいいと言うことです。gulp sass という名前でタスクは作っておきました。これを実行します。 ファイルは小さいですからあっという間ですね。そして無事に済んだ様です。プロジェクトのフォルダを開いてみるとcss というフォルダの中にcssの形式でstyle という名前のファイルがコンパイルされています。一応確認しましょう。Dreamweaver で開きます。そうすると、transform やtransition ですねこのあたりについては自動的に、webkit のベンダープレフィックスがついています。と言うことでベンダープレフィックスを付けた形でsass が css に変換されたということです。このレッスンでは自動的にベンダープレフィックスを付けてくれるしかも、プロパティを選んでですねそいうプラグインであるgulp-autoprefixer を使ってsass からまず css に変換した後ここですねautoprefixer を実行してベンダープレフィックスの付いた形でcss ファイルを作るということをご説明しました。使ったのは gulp-autoprefixerというプラグインです。

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

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

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

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

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

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