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

簡単なタスクを実行してみる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Gulpのテスト用のタスクをJavaScriptコードで書いて、実行してみます。
講師:
03:57

字幕

このレッスンではgulp のテスト用のタスクをJavaScript コードで書いて実行してみます。今、プロジェクト用のフォルダgulp_project という中にはpackage.json とgulp のモジュールが入った node_modulesというフォルダがあるだけです。ここに JavaScript ファイルを追加します。その中で、テスト用のコードを書くという事になります。Dreamweaver CC を開きました。そしてJavaScript のファイルですからjs ファイルを選びます。早速保存してしまいましょう。「ファイル」>「保存」でgulp_projectここですね。名前は決まっています。gulpfile.jsこれで保存します。そして、コメントはここはいらないのでまずは、gulp をロードするという処理になります。それを変数入れます。分かり易い様にgulp という変数にしましょう。そして「require();」という中に読み込むモジュールを指定するんですがここはもちろん gulp です。そして、この変数 gulp に対してタスクを登録します。「.task();」とまんまですね。 この中に引数が二つ。一つ目はタスクの名前です。今回は test にしましょう。そして、引数の二つ目ここは処理内容を書く functionfunction という事で中括弧{}。この中にタスクとして実行したい事を書く訳ですが今回はテストですので「console.log();」という事で文字を、テキストを出すことにしましょう。console、c ですね。「console.log('test is done');」にしましょう。そして保存をします。今回のタスク名は test です。プロジェクトのフォルダの中にはgulpfile.js というJavaScript ファイルがあります。では、タスクの実行はコマンドラインツールから行います。ターミナルを開きましたのでまずはディレクトリを変更します。先ほどのプロジェクト用のファイルです。gulp_project と。cdchange directory ですね。正しくディレクトリが変更されました。ここでタスクを実行します。これは gulp のタスクですからここでまず gulp と入れて、タスク名文字列のクォーテーションはいりません。クォーテーションなしにtest という名前を実行します。 そうすると、実行してますよとすぐ終わってしまうんですけどもここですね、先ほどの「console.log();」に書いておいたテキストが表示されました。ですから、正しくタスクが行えたという事が分かります。このレッスンではgulp のテスト用のタスクをJavaScript コードで書いて、実行しました。JavaScript のファイル名前は gulpfile.js です。そして、処理内容はまず、モジュールを require で読み込んでそれを変数に設定しメソッドは「.task();」です。引数は二つタスク名、これは文字列です。そして、function の中にやりたいことをか行きます。コマンドラインツールとかで実行する時にはgulp、ワンスペースこのクォーテーションなしにタスク名という事でした。

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

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

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

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

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

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