chlonolog

web, digital gadgets, and more.

gulpでCSS/JSのminify&gzip圧縮

※この記述は古くなりました。最新の内容をどうぞ


CSSやJavaScriptをサーバへアップロードするにあたり、

  1. ファイルを編集する
  2. KoaraなりPreprosなりMinify for MacなりでファイルをMinifyする
  3. 更にファイルをgzip圧縮する

という手順が発生していました。


CSSとJSのminifyと圧縮が面倒臭い!

Minify for Macを使用すればminify処理と同時にgzip圧縮も行ってくれますので、作業短縮になります。それに、一度二度であれば大した手間とも感じません。
しかしhtmlヘッダにmin.css/jsのファイル名を書いてしまうと、元ファイルを修正するたびにこの処理をしなければならず、一気に面倒になってきます。
XXXXX.min.cssという命名規約を使わず、KoaraやPreprosで最初から圧縮したXXXXX.cssを出力するという手もあるのですが、たまに出力後の中身を確認したい時があるので却下。


gulpはじめました

ということで、「ファイル監視させられて楽に変換とかできるよ」と評判のgulpを始めてみました。
(各所から情報を仕入れてコピペして、処理をうまいこと組み合わせただけですが)

var gulp = require('gulp');
var gutil = require('gulp-util');
var gzip = require('gulp-gzip');
var rename = require('gulp-rename');
let uglify = require('gulp-uglify');
let cleanCSS = require('gulp-clean-css');

var path = '/Users/username/foo/bar/**/themes/my-theme/source';
var target_js = path + '/js/*.js';
var target_css = path + '/*.css';
var output_js = path + '/js/';
var output_css = path + '/';

//--------------------------------------------------

/**
 * ファイル監視
 */
gulp.task('watch', function() {
  var filename = '';

  gulp.watch(target_js, function(event) {
    filename = getfilename(event.path);
    if (event.type == 'add' && !/.min./.test(filename) || 
        event.type == 'changed' && !/.min./.test(filename)) {
      minify_js(event.path, filename);
      filegzip_js(event.path, filename);
    }
  });
  gulp.watch(target_css, function(event) {
    filename = getfilename(event.path);
      if (event.type == 'add' && !/.min./.test(filename) ||
        event.type == 'changed' && !/.min./.test(filename)) {
      minify_css(event.path, filename);
      filegzip_css(event.path, filename);
    }
  });
});

/**
 * 起動時処理
 */
gulp.task('default', function() {
  console.log('Run gulp.');
  gulp.run('watch');
});

//--------------------------------------------------

/**
 * minify: JS
 */
function minify_js(strpath, strfile) {
  gulp.src(strpath)
  .pipe(uglify())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest(strpath.replace(strfile, '')));
  console.log('minify_js: ' + strpath);
  return true;
}

/**
 * minify: CSS
 */
function minify_css(strpath, strfile) {
  gulp.src(strpath)
  .pipe(cleanCSS())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest(strpath.replace(strfile, '')));
  console.log('minify_css: ' + strpath);
  return true;
}

/**
 * gzip圧縮ファイル作成: CSS
 */
function filegzip_css(strpath, strfile) {
  gulp.src(strpath)
    .pipe(cleanCSS())
    .pipe(rename({suffix: '.min'}))
    .pipe(gzip())
    .pipe(gulp.dest(strpath.replace(strfile, '')));
  console.log('gzip: ' + strpath);
  return true;
}

/**
 * gzip圧縮ファイル作成: JS
 */
function filegzip_js(strpath, strfile) {
  gulp.src(strpath)
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gzip())
    .pipe(gulp.dest(strpath.replace(strfile, '')));
  console.log('gzip: ' + strpath);
  return true;
}

/**
 * パスからファイル名を取得
 */
function getfilename(path) {
  var f = path.split('/');
  f = f[f.length - 1];
  return f;
}

処理はファイル名に「.min.」の入っているものを除外しています。
本当はMinifyした後でmin.css/jsのファイル名を取得し、それに対しgzip圧縮すべきなのでしょうけれど、処理後のファイル名取得がよく分からなかったので、gzip圧縮時にも元処理に対してMinify処理を行っています。

VSCODEのターミナルでgulpしておけば、あとはファイルを直すたびに自動でMinifyして圧縮までしてくれます。なんて便利なんだ。


追記(7/25)

あれからいろいろ調べて、コード短縮できました。

/**
 * Minify & gzip圧縮ファイル作成: JS
 */
function compress_js(strpath, strfile) {
  var path = strpath.replace(strfile, '');
	gulp.src(strpath)
	.pipe(uglify())                 // Minify
	.pipe(rename({suffix: '.min'})) // .min.cssにリネーム
	.pipe(gulp.dest(strpath))       // .min.cssを保存
	.pipe(gzip())                   // gzip圧縮
	.pipe(gulp.dest(strpath));      // .min.css.gzを保存
	console.log('compress: ' + strpath + strfile);
	return true;
}

/**
 * Minify & gzip圧縮ファイル作成: CSS
 */
function compress_css(strpath, strfile) {
  var path = strpath.replace(strfile, '');
	gulp.src(strpath)
	.pipe(cleanCss())               // Minify
	.pipe(rename({suffix: '.min'})) // .min.cssにリネーム
	.pipe(gulp.dest(strpath))       // .min.cssを保存
	.pipe(gzip())                   // gzip圧縮
	.pipe(gulp.dest(strpath));      // .min.css.gzを保存
	console.log('compress: ' + strpath + strfile);
	return true;
}

これでMinifyしたファイル(*.min.css)と圧縮したファイル(*.min.css.gz)を、一度の処理で保存できますね。

コメント

© 2018 chlono