gulp

CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイル、画像の圧縮を自動でやってくれる便利なツール。
とにかく自動でバシバシやってくれます。

Nodeのインストール

node.js

ダウンロードしてインストーラーを展開すればOK

gulpインストール

コマンドラインで

[bash]npm install -g gulp[/bash]

制作しているフォルダに移動

[bash]cd xxx[/bash]

package.json生成

[bash]npm init[/bash]

すると、いろいろ出てきますが後で変更できるので、とりあえずひたすらenter

すると
package.jsonというファイルが生成されます。

ローカルにもgulpをインストール

[bash]npm install gulp –save-dev[/bash]

node_modulesが追加されました。

プラグインのインストール

[bash]npm install gulp-imagemin –save-dev[/bash]

タスク

処理はgulpfile.jsという名前のファイルを（手動）作成し記述していきます。

[js]
var gulp = require(‘gulp’);
var imagemin = require("gulp-imagemin");
gulp.task("default", function() {
gulp.src("images/*.jpg")
.pipe(imagemin())
.pipe(gulp.dest("./dist/images"));
});
[/js]

imagesフォルダの中のすべてのjpgファイルを圧縮してdistフォルダの中のimagesフォルダに格納という処理になります。

[bash]gulp[/bash]

実行

gulp-imagemin

watch機能

ファイルの変更等があった際に自動で生成してくれます。

[js]
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"));
});
});
[/js]

このように記述するとOK
※jpgだけじゃなくてpngも圧縮するように修正しています。

[bash]gulp watchTask[/bash]

監視開始

このように自動で処理してくれます。

その他

cssの圧縮：gulp-cssmin
JSの圧縮：gulp-uglify
使っていないCSSの削除：gulp-uncss
ファイルの結合：gulp-concat
ファイル名(min.xx)変更：gulp-rename

他にもたくさんプラグインがあるので、いろいろ試してみてはいかがでしょうか。
慣れてしまえば、負担は確実に軽減されます。
ぜひお試しを。