gulp、おまえのことがすきだ #CSS

この記事は J2complexed Advent Calendar 2016 の9日目の記事です。

何書こう、とおもってどしよっておもって、はやくも二回目にして個人情報を晒していきます。

gulp好きですか。好きですね。
シンプルに直感的に書けるし、やりたいことは大抵受け止めてくれる寛大さとか愛せるもんね。
gulp不要論とかあるけど、まだ私、gulpと一緒にいたい。

gulp、お前のこんなとこがすきだ

非同期処理だ
アイコンが凶暴じゃない
タスクの記述がシンプルだ
かゆいところに大体手が届く

かゆいところに手を届かせてくれるプラグインのこともあいしてる。

こんなgulpプラグインがすきだ

gulp-combine-media-queries

複数のsassファイル内にばらばらに書いたメディアクエリーの記述を、コンパイル時にまとめてくれる。
例。

_button.scss

_button.scss

.button {
    width: 100%;
}
@media screen and (min-width: 768px) {
  .button {
    width: 300px;
  }
}

...（略）

@media screen and (min-width: 768px) {
  .button_secondary {
    background: #8c8;
    font-size: 16px;
  }
}
.button_secondary {
    background: #000;
}

_heading.scss

_heading.scss

.heading_primary {
    font-size: 30px
}
@media screen and (min-width: 768px) {
  .heading_primary {
    font-size: 50px;
  }
}

普通にコンパイルするとこんなかんじ？
style.css

style.css

.button {
    width: 100%;
}
@media screen and (min-width: 768px) {
  .button {
    width: 300px;
  }
}
@media screen and (min-width: 768px) {
  .button_secondary {
    background: #8c8;
    font-size: 16px;
  }
}
.button_secondary {
    background: #000;
}
.heading_primary {
    font-size: 30px
}
@media screen and (min-width: 768px) {
  .heading_primary {
    font-size: 50px;
  }
}

これをgulp-combine-media-queriesを噛ませてコンパイルするとこんな感じ。

style.css

style.css

.button {
    width: 100%;
}
.button_secondary {
    background: #000;
}
.heading_primary {
    font-size: 30px
}
@media screen and (min-width: 768px) {
  .button {
    width: 300px;
  }
  .button_secondary {
    background: #8c8;
    font-size: 16px;
  }
  .heading_primary {
    font-size: 50px;
  }
}

まとまることでcssの容量も軽くなるし、
sass書いているときに書く場所を気にせずがしがし書けるので、めちゃ便利。
使い方も、sassのコンパイル時にタスク入れてあげるだけなので楽チンです。

gulpfile.js

gulpfile.js

var cmq = require('gulp-combine-media-queries');

gulp.task('sass',function(){
    gulp.src([paths.srcDir + 'sass/**/*.scss'])
    .pipe(sass())
    .pipe(cmq())
    .pipe(gulp.dest(paths.dstDir + 'css/'));
});

注意
sassがなんのエラーも出さずに静かにコンパイルできなくなったら大抵はこのプラグインのせい。
gulp-combine-media-queries/index.jsの152行目がエラーを起こすので、ひとまずコメントアウトすればおっけー。
file.contents = new Buffer(cssJson);
（issueに上がってるのになかなか修正されないけど、便利だから許してあげてほしい）

minimist

二個目にしてgulp専用のプラグインではないけれど、minimist。
コマンドの引数をタスク側に渡してくれるプラグイン。
コンパイルをデバッグ時と納品時で分けたい時とかに、gulpのコマンドにオプションつけて切り分けられたらよいなーっていう時にたすかるやつです。

gulpfile.js

gulpfile.js

var minimist = require("minimist");

var env = minimist(process.argv.slice(2));
//minimistでコマンドからの引数をパースするおまじない。

// 引数が「production」だったら、/wwww/html/assets/以下に吐き出す
if(env.production) {
    paths.dstDir = "/www/html/assets/"
} else {
    paths.dstDir = "/src/dist/assets/"
}
gulp.task('sass',function(){
    gulp.src([paths.srcDir + 'sass/**/*.scss'])
    .pipe(sass())
    .pipe(cmq())
    .pipe(gulp.dest(paths.dstDir + 'css/'));
});

$ gulp sass
→ /src/dist/assets/に吐き出し

$ gulp sass --production
→ /www/html/assets/に吐き出し

引数が渡せると、できることが広がるので、例以外にもいろいろできるはず。べんりー。

gulp-pleeease

みんな大好き、pleeease！も好きです。
eが何個かわかんなくなっちゃうところも含めて愛せる。愛せるぞ。
sassのコンパイルがひゃくばい便利になるプラグイン。
オプションもできることも豊富。

ベンダープレフィックスの付与
対応ブラウザの指定（これの指定によって、ベンダープレフィックスの指定も適切につけてくれる）
メディアクエリのパッキング（！）
とかとか

と、改めて見ていたら、一番最初に挙げたプラグインでやっていたメディアクエリをいい感じにまとめてくれることをpleeeaseでもできると知ったので、もうpleeeaseだけいればいいってことか...
なんという事実

秘伝のタレ化するまえにgulpfileを見直そうと思ったよる。
みなさまもよいgulpライフを！