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

JavaScriptファイルを圧縮する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
結合されたJavaScriptファイルをさらに圧縮して、別のフォルダに納めます。
講師:
06:28

字幕

このレッスンでは結合された JavaScript ファイルを更に圧縮して、別のフォルダに納めます。その圧縮するという場合にプラグインを使うんですがgulp のサイトからプラグインの検索ページに行って普通 minify と言うんですけれども今回使うプラグインはuglify という名前になっています。もう出てきましたね。minify小さくするという事なんですがJavaScript ファイルを小さくする圧縮するという言い方もするんですけれどもこの場合、画像ファイルの圧縮とは違ってテキストファイルです。JavaScript ファイルというのはテキストファイルです。テキストファイルという形式を変えずに余分な改行や空白スペースを取ってしまってテキストファイルのまま、サイズを小さくするというのが minify というものです。gulp-uglify というのが今回使うプラグインです。インストールはnpm install gulp-uglifyこれが最低限の指定なんですがやはり、オプションを追加した方がいいでしょう。ターミナルを開いてコマンドを作りましたけれどもnpm installこの後はオプションですね。 「--save-dev」、そしてプラグイン名の gulp-uglify です。インストール画面、退屈なので既にインストールはしてあります。package.json ファイルを見てみると確かにdevDependencies の中にgulp-uglifyプラグインが追加されています。結合して圧縮するJavaScript ファイルというのはプロジェクトのフォルダの srcというフォルダの中に入っているこの二つのJavaScript ファイルです。これを一個にしてjs というフォルダを新たに作り更に圧縮してしまうという事ですね。いわゆる minfileというやつです。gulpfile.js には既に、二つのファイルを結合して、一つにして別のフォルダにコピーするという処理が作ってあります。そのタスクは concatというタスクなんですがソースが src ですね。そしてconcat という処理はgulp-concatというプラグインで行うんですけれどもscript.js というファイルにしてjs というフォルダを新たに作ってそこに納めるというところまではできています。ちょっと確認してみましょうか。今のタスク concat をコマンドラインツールターミナルから実行してみます。 gulp-concatですね。二つのファイルですからすぐに済んでしまいます。フォルダの方を見てみましょう。プロジェクトのフォルダには、確かにjs というフォルダが新たに作られてscript.js という一つに纏まったJavaScript ファイルが作られました。これはただ二つのファイルを結合しただけです。確認してみましょう。Dreamweaver で開きますと普通の function があって、それからクラスが定義されてたりするんですけれども見て普通にわかるファイルですね。これを minify、圧縮すると余分なこういう改行とかそれからタブ、インデントですねそういったものを全て取っ払ってくれる人間の目には見にくくなるんですがその代わり、ファイルサイズが少しでも小さくなるという事です。では、gulpfile.js の方に切り替えてまずはプラグインの読み込みですね。var uglifyという風にしましょう。ここに require でプラグインを読み込みます。gulp-uglify と。綴り、あってますよね。この名前でタスクの名前も変えましょう。そうですね、uglify は分かり難いんでminjs としましょうか。 タスクの名前は minjs です。ただ、uglify のプラグインを読み込んだ変数は uglify です。これを pipe で繋げます。ソースを指定して一つに纏めた後ですね。これをコピーする前にデスティネーション、コピーする前にpipe で繋げて「;」はいりません。uglifyこれをコピーして、持ってきます。この変数に入っているオブジェクトこれを実行する訳なんですけれどもこれで保存しましょう。ターミナルから、今定義したタスクminjs を実行します。gulp minjsファイルサイズそんなに元々が小さいですから小さくならないかもしれませんですけれどももう済んでしまいました。Dreamweaver に戻ってみると先ほど開いていたscript.js一行になってしまって改行はしてますけれども一行ですね「1」となっています。見てもよくわかんないですね。変数名もかなり違ってきています。短くなってるんですね。そういうことでテキストファイルですからこの縮まった分だけ、ファイルが小さくなったという事は確認できるかと思います。このレッスンでは複数の JavaScript を一つに纏め更に minify、縮めて別のフォルダに保存するという方法についてご説明しました。 一応、おさらいをしておきましょう。処理の内容としてはプラグインは二つ使っています。concat と uglify。そして、コピー元を src で指定した上でconcat で纏めます。その後uglify で小さく縮めてその上でデスティネーション dest でコピー先の JavaScript フォルダを指定してそこに圧縮した、minify した JavaScriptファイルを保存したという事です。

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

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

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

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

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

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