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

JavaScriptファイルを結合する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
複数のJavaScriptファイルを結合して、別のフォルダに納めます。
講師:
05:12

字幕

このレッスンでは複数の JavaScript ファイルを結合して別のフォルダに納めます。その場合、ファイルを結合するのにプラグインを使います。プラグインの名前はgulp-concat です。プラグインをこの gulp のページで探しましょう。concat綴りはこうですね。繋げるという意味の英語です。このプラグインを使います。プラグイン名 gulp-concatという事になっています。インストールは一番基本的には、この様にinstall gulp-concatでいいんですけれでもオプションを設定した方がいいでしょうね。ターミナルを開きましたけれどもまずは、プロジェクトのフォルダにディレクトリを入れ替えておきます。その上で、インストールの後オプションですね。「--save-dev」、そのあとプラグイン名gulp-concat という事になります。インストールの画面、見ていても退屈ですのでインストールは済ませました。インストールに「--save-dev」を付けましたのでpackage.json でdevDependencies の中にgulp-concat のバージョンも指定されて入りました。 ですから、インストールは済んであるという事ですね。プロジェクトのフォルダを開きました。結合する JavaScriptファイルなんですがsrc、ソースの意味ですけれどもここに、とりあえず二つ入っています。この二つを結合して別のフォルダjs としたいと思うんですがその中に一個のファイル、ファイル名はscript.js でいいでしょうかね。その様にして、二つを結合して一つのファイルにして、コピーをするというそんな段取りになります。コピーをするタスクは既に作ってあります。copy というタスク名なんですがgulp を読み込んで変数に入れるとそれに対して、タスク設定copy という名前ですがそこで、この function の中で処理を指定していますけれどもまず、gulp に対して「.src」、ソースでsrc という中にあるファイル名は任意、「*」ですね。「.js」、拡張子が「.js」のものそれを全て pipe で繋いで今度はコピー先ですね。gulp に対して「.dest」、デスティネーションjs というフォルダを作ってそこに単純にコピーする。ですから二つファイルがあればその二つのファイルをコピーするという形になっています。 これを一つに纏めて、という処理を先ほどのプラグインで加えたいと思います。まず、プラグインの読み込みをしますね。変数名は concat にしましょう。require と。そしてプラグイン名gulp-concatですから、ここは名前を変えましょう。concat とタスク名を変更します。コピーを持ってきます。そしてまずソースを指定した後そこにpipe で繋げてこの concat という変数に入ったこれをコピーします。オブジェクトに対して実行処理丸括弧二つですね。この時引数がいります。引数は、一つに纏めてそうするとファイル名はどうするのと話になりますよね。ですからファイル名をこの中に入れます。script.js としましょう。これで保存します。コマンドラインツール、ターミナルでタスクを実行しましょう。gulp ってタスクなのでタスク名concat にしましたね。concat という事で実行します。そうするとすぐに済んでしまいましたね。finished という事になっていますのでフォルダを確認しましょう。先ほどまでなかったjs というフォルダができています。そしてその中に先ほど指定した名前ですねscript.js という名前でこの二つのファイル、js ファイルが一つに纏まってコピーされた、という事になります。 このレッスンでは複数の JavaScript ファイルを結合して別のフォルダに納める方法についてご説明しました。コピーの部分はgulp に対して、ソースを指定しそれからデスティネーションを指定して普通にコピーをすると。その間にプラグインgulp-concat ですね。そのオブジェクトを読み込んでそれに対して、実行を行うと。その時に複合したファイル名ですね、一個にしたファイル名を指定するという事でした。

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

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

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

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

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

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