gulpで簡単画像圧縮

gulp
CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイル、画像の圧縮を自動でやってくれる便利なツール。
とにかく自動でバシバシやってくれます。
Nodeのインストール
ダウンロードしてインストーラーを展開すればOK
gulpインストール
コマンドラインで
1 |
npm install -g gulp |
制作しているフォルダに移動
1 |
cd xxx |
package.json生成
1 |
npm init |
すると、いろいろ出てきますが後で変更できるので、とりあえずひたすらenter
すると
package.jsonというファイルが生成されます。
ローカルにもgulpをインストール
1 |
npm install gulp --save-dev |
node_modulesが追加されました。
プラグインのインストール
1 |
npm install gulp-imagemin --save-dev |
タスク
処理はgulpfile.jsという名前のファイルを(手動)作成し記述していきます。
1 2 3 4 5 6 7 |
var gulp = require('gulp'); var imagemin = require("gulp-imagemin"); gulp.task("default", function() { gulp.src("images/*.jpg") .pipe(imagemin()) .pipe(gulp.dest("./dist/images")); }); |
imagesフォルダの中のすべてのjpgファイルを圧縮してdistフォルダの中のimagesフォルダに格納という処理になります。
1 |
gulp |
実行
watch機能
ファイルの変更等があった際に自動で生成してくれます。
1 2 3 4 5 6 7 8 9 |
var gulp = require('gulp'); var imagemin = require("gulp-imagemin"); gulp.task("watchTask", function() { gulp.watch("images/**", function() { gulp.src(["images/*.jpg","images/*.png"]) .pipe(imagemin()) .pipe(gulp.dest("./dist/images")); }); }); |
このように記述するとOK
※jpgだけじゃなくてpngも圧縮するように修正しています。
1 |
gulp watchTask |
監視開始
このように自動で処理してくれます。
その他
cssの圧縮:gulp-cssmin
JSの圧縮:gulp-uglify
使っていないCSSの削除:gulp-uncss
ファイルの結合:gulp-concat
ファイル名(min.xx)変更:gulp-rename
他にもたくさんプラグインがあるので、いろいろ試してみてはいかがでしょうか。
慣れてしまえば、負担は確実に軽減されます。
ぜひお試しを。