Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
14
Help us understand the problem. What is going on with this article?
@mzzzk

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

More than 3 years have passed since last update.

この記事は 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/'));
});

:bangbang:注意
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だけいればいいってことか...
なんという事実:mask:

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

14
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mzzzk
cinra
CINRA.NETを初めとする自社メディアを運営するCINRAのエンジニアユニット

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
14
Help us understand the problem. What is going on with this article?