おすすめパッケージ2019.07.01前回のGulp4の記事は、環境を整えるまでを書きました。今回は、普段よく使っているパッケージを紹介します。数が多いので詳細な使い方などはそれぞれ個別の記事にしていく予定です。gulp-sassSaccを自動でコンパイルしてくれるモジュール。Sassを使う場合は必須のパッケージ。cd();}gulp-sassの書き出しで圧縮(minify)することができますが、後述するgulp-clean-cssなどを使い、通常のCSSファイルとminify化したファイルの2つを作る方がお勧めです。browser-syncファイルの変更を監視して、変更があった時にブラウザを自動でリロードするように設定ができるパッケージ。cb();}browserSync.initでプロキシを使い、MAMPやDockerなどで作ったローカル環境のURLを指定することも可能です。cb();gulp-group-css-media-queries別々の場所にかかれた、同じ設定内容のメディアクエリをまとめてくれる便利なパッケージ。これは本当に便利で、開発スピードがものすごく上がります。*gulp-sassの処理の中でpipe関数を使って、処理を繋げて行います。gulp-autoprefixerCSSベンダープレフィックスを自動でつけてくれるパッケージ。ベンダープレフィックス地獄から解放されます!*こちらもgulp-sassの処理の中でpipe関数を使って、処理を繋げて行います。gulp-clean-cssスタイルシートを圧縮(minify)するパッケージです。*gulp-sassの処理の中でpipe関数を使って、処理を繋げて行います。gulp-renameファイルをminifyする際にファイル名を変更するのに使うパッケージです。'css':'./www/css/',//CSSファイルの書き出しディレクトリ。cd();}gulp-uglify-esこちらは、JavaScriptを圧縮(minify)するパッケージです。gulp-inline-sourceCSSやJavaScriptをインライン化するパッケージ。gulp-imageminとimagemin-pngquantとimagemin-mozjpeg画像を圧縮するためのモジュール群。gulp-imagemin定番の画像圧縮のパッケージimagemin-mozjpegMozillaが開発したJpegエンコーダーmozjpegのパッケージ。imagemin-pngquantTinyPNG並のPNGファイルの圧縮ができるパッケージ。gulp-changed変更があったファイルだけを移動させたりなどの処理を行うパッケージ。cb();}gulp-sass-globSassの複数のimportを、ワイルドカードなどのパターンで一括で記述ができるようになるパッケージ。LOGサイトマップエレクトリック・フルーツでは東京、多摩及び近郊からのホームーぺージ/Web制作依頼を承っております。