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

Gulp.jsを使うと何ができるか

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
タスクランナーのツールGulp.jsを使うと開発の作業が自動化できます。
講師:
07:56

字幕

このレッスンでは、タスクランナーのツールGulp を使うとどの様なことができるのかということを簡単にご紹介します。Gulp は gulp.js というのが正式なファイルですけれども開発におけるコンパイルやウイルドを自動化してくれる「タスクランナー」と呼ばれるツールです。プラグインなどの文字を使ってgulpfile.js という Javascript ファイルでタスクを定義します。今、Deamweaver で開いているのがgulpfile.js の簡単なサンプルです。ここでは、細かいことはいいのでどういうことをやっているのかということだけ簡単にご理解ください。まず、Gulp を入れ込んでそれからGulp には様々なプラグインがあってそのプラグインによって色々作業を拡張することはできます。ここでは、gulp-imagemin とありますけれども画像を圧縮してくれるプラグインです。そして、Gulp で実行するものをtask と呼ぶんですけれどもこれが task の定義になります。task として task 名imagemin という名前が付いていますけれどもこの function() の中三行がやってることです。 これは画像ファイルをこの imagemin のプラグインで圧縮して別のフォルダに移すとコピーするという処理が行っています。もうちょっと細かく見るとassets というのがその画像の入っているフォルダでそこにある画像をimagemin で圧縮した上で圧縮したファイルは別の images というフォルダにコピーする保存するということになっています。こちらがサンプルのプロジェクト練習用のファイルなんですけれどもassets という中に先ほど言いましたとおり、画像があってサブフォルダの中にも画像があります。そして、先ほど見たのがこの gulpfile.js ですね。node_modulesここに、gulp を始めとするプラグインなどのモジュールがインストールされています。そして、コピーする先のimages というフォルダ、ないですね。なめれば、task が勝手に作ってくれてこの assets の中の画像を圧縮した上でコピーするという作業になります。Gulp の環境のインストールやタスクの実行というのは「コマンドラインツール」というツールで実行します。OS X の場合にはターミナルというのがそのツールに当たります。 ここで、コマンドを打ち込むというちょっと最初は「不明」けれどもここで実行しましょう。Gulp の task で先ほどimagemin という名前付けましたね。imageminそして、Enter を押すと実行されます。エラーがあれば出てくるんですがエラーがなければ、実行した結果終わりましたよということでこれで終了ですね。そして、圧縮しましたので圧縮した結果「8.1%」、少しサイズが小さくなりましたということです。もう一度練習用のプロジェクトフォルダを見てみるとimages というフォルダが作られていてそこに画像がコピーされています。フォルダを含めて三つありますが例えばこれですね「353KB」ということになっています。元はというと、ファイルの画像そのものは同じなんですけれども「390KB」ということですから圧縮されて、画像が小さくなったということが確認できるでしょう。今開いているファイルはstyle.scss.scss という拡張子は css の拡張言語先で定義されたスタイルです。color とか transformtransitionこういったものはcss のプロパティーですね。ただ、構文がちょっと css と違って様々な機能が含まれています。 ここから、普通の css ですねstylec と書き出すというのがこちらの gulpfile.js に定義されています。やはりプラグインがありましてgulp-sassこれが sass を普通の css に変換するためのプラグインです。更にoutoprefixer というのがあります。これはベンダープレフィックスを自動的につけてくれるというなかなか便利なプラグインです。そして、task はsass という名前をつけてこの絵は先ほどの画像と一緒ですね。sass というフォルダに入っているsass のファイルをgulp-sass のプラグインで普通の css に変換した上でoutoprefixerprefix をつけてcss というフォルダにコピーしなさいということになっています。コマンドラインツールで今の task を実行しましょう。gulp sassそうすると、あっという間に元の定義が小さいですからね、済んでしまいました。プロジェクトのフォルダのcss というフォルダの中にcss の形式に変換されたファイルが書き出されました。これもちょっと確認しましょう。Dreamweaver で見てみますと同じ意味の css の定義ですね。 そして、ベンダープレフィックスがちゃんと付いているということが確認できます。では、最後の例に移りましょう。gulpfile.jstask が増えましたけれども今回試すのは二つの部分です。まず、こちらが minjs という task 名が付いているんですけれどもこれは concot と ugligy という二つのプラグインを使っています。そして、src というフォルダにあるJavascript ファイルをconcot はまとめるんですね一個にしてしまいます。そして、ugligy でそれを小さく圧縮してjs というフォルダにそのまとめた一つのJavascript ファイルを保存するという task になっています。そしてそれをデフォルトに定義したんですね。デフォルトはどうしているかというとこの src にあるファイルに変更がかかったかどうか、常に監視してます。そして変更かかったらこの minjs を実行するというこういう仕組みになっているんですね。デフォルトの task は task 名なしにgulp だけで実行ができます。そして監視をしてますのでこれで監視が始まったということで何か操作が加えればこの画面に表示が出てくるんですけれどもジーといま監視しているとこです。 そして、今開いた Vector.js はjs ファイル一つなんですけれどもsrc に入っているやつですね。ここに、例えばconsole.log();このファイル名、或いはクラス名といってもいいんですが、これをコピーしてそして保存をします。そうするとさっきの watch が動くわけですね。保存と。「コマンドラインツール」の方の情報が増えていますね。デフォルトを実行しましたよっと「不明」の中で、minjs を実行しましたよっという風に出てきています。そして、プロジェクトのフォルダなんですがsrc という中にはJavascript のファイルが二つあります。それがまとめられて圧縮されてjs というフォルダにコピーされたわけですね。中身見てみましょう。見てみると、圧縮といいますが余分なスペースを全て取っちゃったんですね。一部変数なども変わっています。そして、最後にconsole.log 付いていますから今さっき書いたばかりの内容が反映されたということが分かりますね。このレッスンでは、タスクランナーのツールGulp を使うとどんなことができるのかということを簡単にご紹介しました。

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

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

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

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

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

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