LINEで送る

gulp

gulp

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

Nodeのインストール

nodejs-dark

node.js

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

gulpインストール

コマンドラインで

1
npm install -g gulp

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

1
cd xxx

package.json生成

1
npm init

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

スクリーンショット 2015-12-17 12.16.39

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

スクリーンショット 2015-12-17 12.19.26
ローカルにもgulpをインストール

1
npm install gulp --save-dev

スクリーンショット 2015-12-17 12.22.01
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

実行

スクリーンショット 2015-12-17 12.33.06

gulp-imagemin

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

監視開始

スクリーンショット 2015-12-17 13.36.22
このように自動で処理してくれます。

その他

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

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

こちらの記事もどうぞ