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

gulp-autoprefixerをインストールする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSのプロパティに自動的にベンダープレフィクスがつけられるプラグインをインストールします。
講師:
02:22

字幕

このレッスンではCSS の必要なプロパティに、自動的にベンダープレフィックスを付けられるプラグイン、gulp-autoprefixer のインストールをご説明します。特に CSS3 の新しいプロパティを使うようになると対応するブラウザによってはいちいち、ベンダープレフィックスを付けなければなりません。その作業も面倒くさいですしもし、一か所修正であってもそのプレフィックスの数だけ修正箇所が何か所にも増えるということがあります。こういう時に便利なのが自動的にベンタープレフィックスを付けてくれるプラグインのgulp-autoprefixer です。gulp のサイトでPlugins の検索ページ、ここでprefix と入れれば表示されます。これが、今回使うgulp-autoprefixer です。ページに飛ぶと、例によって基本的な説明、使い方などがありますしインストールはnpm のコマンドで installそして、オプションとして--save-dev を付けてpackage.json の方にも記載をします。これをコピーしておきましょう。そして、「コマンドラインツール」に切り替えたらプロジェクトのフォルダにディレクトリを変更します。 cd ですね。すでに、ディレクトリが変更されていますのでここに、先ほどコピーしておいたコマンドをペーストします。そして、実行します。実行後の画面がこちらでgulp-autoprefixer がインストールされました。package.json を確かめると先ほど申し上げたとおりdevDependencies の中にgulp-autoprefixer が入りました。このレッスンではCSS の必要なプロパティに自動的にベンタープレフィックスを付けてくれるプラグインのgulp-autoprefixer のインストールについてご説明しました。この gulp-autoprefixerのページでインストールはこれをコピー&ペーストすればいいということですね。但し、ディレクトリをプロジェクトのディレクトリに変更しておくことを忘れないでください。

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

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

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

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

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

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