windows7でNode.jsとnpmその6 gulpのプラグイン(gulp-imagemin)をインストールして使ってみる

参考にさせて頂いたページ

Node.js - Gruntの代替ビルドツール。gulpをはじめる。 - Qiita

gulp-imagemin

プラグイン gulp-imagemin をインストールする

プラグインは何でも良いんだけど、手始めにgulp-imageminを入れてみる

gulp-imagemin

を参考にしてインストールする。

npm install --save-dev gulp-imagemin

を実行すると、node_modules/gulp-imageminフォルダが作成されて、中にいろいろ入っている。

--seve-devをつけたので、package.jsonにも自動で

    "gulp-imagemin": "^2.1.0"

の1行が追記されたので、package.jsonの記述内容は下記のようになった。

{
  "name": "sample_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "gulp": "^3.8.10",
  "gulp-imagemin": "^2.1.0"
  }
}

プラグイン imagemin-pngquant をインストールする

同様にimagemin-pngquant も必要なのでインストールする

npm install --save-dev imagemin-pngquant

を実行して、package.jsonは以下の通りになった。

{
  "name": "sample_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.8.10",
    "gulp-imagemin": "^2.1.0",
    "imagemin-pngquant": "^4.0.0"
  }
}

gulpfile.jsを編集する

gulpfile.jsを編集して、記述内容は以下の通り。

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('default', function () {
  return gulp.src('src/images/*')
    .pipe(imagemin({
      progressive: true,
      svgoPlugins: [{removeViewBox: false}],
      use: [pngquant()]
    }))
    .pipe(gulp.dest('dist'));
});

png画像とフォルダを用意する

読み込み元のフォルダとファイルsample_project\src\images\hoge.pngを用意する。

出力用のフォルダsample_project\distを用意する

gulpのタスクを実行してみる

gulp default

をコマンドプロンプトを実行すると、distフォルダにサイズが削減されたhoge.pngが生成されている。

今回はここまで。