Gulpとは人間が自堕落になるためのアプリ

Gulpとはタスクランナーアプリです。
プログラムのコンパイルとか、Sassのコンパイルとか、画像の最適化とか、Javascriptの難読化とかを自動でやらせちゃおう！　という人間が自堕落になるためのものです。

インストール方法とかは検索すればたくさんあるので割愛します。時間はそんなに無いのです。
（飛行機の時間まで微妙に空いてしまったので書いています）

ディレクトリ構成

自分の場合はWebサイトの構築に使っています。
プロジェクト（サイト）毎にこんな感じの構成になっています。
/src、/distみたいな分け方ではなく、公開フォルダの中に /.src をぶちこんで、その中で Gulpを動かしています。

/projectHoge
+- /.src
|  +- /node_modules
|  +- /sass
|  +- /.copy
|  +- /img
|  +- /diff
|  +- gulpfile.js
|  +- package.json
+- /css
+- 他htmlとかいろいろ公開用ファイル

Gulp設定ファイル

そんなわけで 2015.12.23現在の設定です。

更新のあったファイルのみを対象とする
SassはMinify~~しない~~する。ソースマップは吐き出す
Javascript は文法チェックのみ。難読化はしない
画像の最適化。ICCプロファイルは削除
画像は最適化のみ行い、各ディレクトリへ配置するのは手作業でやる
更新差分ファイルを書き出す

gulpfile.js


var path = {
    module: '/usr/local/lib/node_modules/',
    src : "", // Gulpに関わるもろもろ
    dist : "../", // 公開ファイル置き場
    copy : ".copy/", // サイトデータまるまる複製
    update : "diff/" // 変更差分ファイル置き場
};

// gulp本体
var gulp = require('gulp');
// 変更ファイルのみ抽出
var changed = require(path.module + 'gulp-changed');
// リネーム
var rename = require(path.module + 'gulp-rename');

// sassコンパイル
var sass_src = path.src + "sass/*.scss";
var sass_dist = path.dist + "css/";
var sass = require(path.module + 'gulp-sass');
var sourcemaps = require(path.module + 'gulp-sourcemaps');
gulp.task("sass", function(){
    gulp.src(sass_src)
        .pipe(sourcemaps.init()) // ソースマップ吐き出す設定
        .pipe(sass().on('error',sass.logError)) // エラーでも止めない
        .pipe(sourcemaps.write(sass_dist))
        .pipe(gulp.dest( sass_dist ));
});

// css軽量化
var cssmin_src = sass_dist + '*.css';
var cssmin_dist = sass_dist + 'min/';
var cssmin = require(path.module + 'gulp-cssmin');
gulp.task("cssmin", function(){
    gulp.src(cssmin_src)
        .pipe(cssmin())
        .pipe(rename({
          suffix: '.min'
        }))
        .pipe(gulp.dest( cssmin_dist ));
});

// js文法チェック
var js_src = path.dist + "js/*.js";
var jshint = require(path.module + 'gulp-jshint');
gulp.task("jshint", function(){
    gulp.src(js_src)
        .pipe(changed( js_src ))
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));
});

// 画像減色と軽量化
var image_src = path.src + 'img/*.{png,jpg,gif,svg}';
var image_dist = path.src + 'img/optimize/';
var image = require(path.module + 'gulp-imagemin');
gulp.task("image", function(){
    gulp.src( image_src )
    .pipe(changed( image_dist ))
    .pipe(image())
    .pipe(gulp.dest( image_dist ));
});

// 変更のあったファイルを更新用フォルダにコピー
var update_src = [path.dist+"**/*.*", '!'+path.dist+'.src/**/*.*' ];
gulp.task("update", function(){
    gulp.src( update_src )
        .pipe(changed( path.copy ))
        .pipe(gulp.dest( path.copy ))
        .pipe(gulp.dest( path.update ));
});

// 更新監視
var watch = require(path.module + 'gulp-watch');
gulp.task("default", function(){
    watch( sass_src, function(e){ gulp.start("sass") } );
    watch( cssmin_src, function(e){ gulp.start("cssmin") } );
    watch( js_src, function(e){ gulp.start("jshint") } );
    watch( image_src, function(e){ gulp.start("image") } );
    watch( update_src, function(e){ gulp.start("update") } );
});

ポイントは更新されたファイルのみを書き出す設定です。

ほとんどのサイトは自分で本番公開するのですが、クライアントによってはFTP/SFTP権限が与えられず公開ファイルのみ渡す場合があります。
その時に更新ファイルを手作業でまとめるのは大変だし、抜けが発生しやすいので、差分ファイルの書き出しを自動化しています。

Gulp使い始めて半年もたってないのでまた設定が変わるかもしれません。

ぼくのかんがえた最強じゃないGulpの設定

Gulpとは人間が自堕落になるためのアプリ

ディレクトリ構成

Gulp設定ファイル