開発コストを削減「ラボ開発」って?
開発コストを削減「ラボ開発」って?
2015.08.12

Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ

先生

4. Sassのコンパイル

GulpでSassのコンパイルをしてみましょう。まずは以下のSCSSファイルを作成します。

  • sass/style.scss
h1 {
  color: red;
  &:hover {
    color: blue;
  }
}

GulpでSassをコンパイルできるようにするためにプラグインをインストールします。

npm install gulp-sass --save-dev

※ gulp-sassはnode-sassを利用しているのでRubyのSassとは機能が若干異なります。Compassを使う場合はgulp-rubysassを使いましょう。その場合は別途RubyとSassのインストールが必要です。

インストールができたら、gulpfile.jsにSassをコンパイルするタスクを作っていきます。

  • gulpfile.js
var sass = require("gulp-sass");

gulp.task("sass", function() {
    gulp.src("sass/**/*scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"));
});

gulp.task(“タスク名”,function() {});でタスクの登録をおこないます。

gulp.src(“MiniMatchパターン”)で読み出したいファイルを指定します。

pipe(おこないたい処理)でsrcで取得したファイルに処理を施します

gulp.dest(“出力先”)で出力先に処理を施したファイルを出力します。

MiniMatchパターン

“sass/style.scss”
sass/style.scssだけヒット

“sass/*.scss”
sassディレクトリ直下にあるscssがヒット

“sass/**/*.scss”
sassディレクトリ以下にあるすべてのscssがヒット

[“sass/**/.scss”,"!sass/sample/**/*.scss]
sass/sample以下にあるscssを除くsassディレクトリ以下のscssがヒット

gulp.src("sass/**/*scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"));

ではこのタスクを実行してみましょう。以下のコマンドを実行します。

gulp sass

するとCSSディレクトリにstyle.cssが生成されました。

h1 {
  color: red; }
  h1:hover {
    color: blue; }

これでGulpを使ってSassをコンパイルできました。

5. CSSのベンダープレフィックス付与を自動化

CSS3のプロパティの中には-webkit-のようなベンダープレフィックスをつける必要があるものが存在します。
もはや必要なくなったものもありますが、それを覚えるのは大変な労力です。

そのため、たまにはこんな記述をしてしまいます。

E {
    -webkit-transform: translate(10px,0);
    -moz-transform: translate(10px,0);
    -o-transform: translate(10px,0);
    -ms-transform: translate(10px,0);
    transform: translate(10px,0);
}

確かに全てを記述すれば無難ですし、SassやCompassのmixinを使えば修正の手間もさほどかかりません。

しかし不要な記述が増えればCSSの容量も増えてしまいます。削ることができるものは削っていくようにしましょう。

ベンダープレフィックス付与を自動化するためにgulp-autoprefixerを使います。

npm install gulp-autoprefixer --save-dev

先ほど作ったstyle.scssを以下のように修正します。

  • sass/style.scss
h1 {
    color: red;
    transition: 200ms ease-out transform;
    &:hover {
        color: blue;
        transform: translate(10px,0);
  }
}

続いてgulpfile.jsにタスクを追加していきましょう。今回はpipeでautoprefixerを足すだけです。

こうして簡単にタスクを追加していけるのがGulpの良いところです。

  • gulpfile.js
var autoprefixer = require("gulp-autoprefixer");

gulp.task("sass", function() {
    gulp.src("sass/**/*scss")
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest("./css"));
});

では、Sassタスクをもう1度実行してみましょう。

gulp sass

さきほどのCSSが以下のようになりました。

h1 {
  color: red;
  -webkit-transition: 200ms ease-out -webkit-transform;
          transition: 200ms ease-out transform; }
  h1:hover {
    color: blue;
    -webkit-transform: translate(10px, 0);
        -ms-transform: translate(10px, 0);
            transform: translate(10px, 0); }

ベンダープレフィックスが付与されていますね。

autoprefixerはCan I useをもとにベンダープレフィックスの有無を調べて付与しています。オプションでブラウザやバージョンを指定することができるので、要件ごとにベンダープレフィックスの有無を変えることができ、柔軟性も高いのが特徴です。

ベンダープレフィックスを意識しなくて済み、タイプも減ります。

  • Can I use

6. スタイルガイド生成

CSSの保守性を高めるためにスタイルガイドを作りましょう。ジェネレータを使うことで、SassやCSSに記載されているコメントをもとにガイドを作成します。

今回はFrontNoteという手前味噌なスタイルガイドジェネレータを使いますが、StyleDoccoやKSSなど使いやすいジェネレータを使うのが良いかと思います。

・FrontNote
http://frontainer.com/frontnote/

・StyleDocco
http://jacobrask.github.io/styledocco/

・KSS
http://warpspire.com/kss/

では早速入れてみます。同じようにnpm installします。

npm install gulp-frontnote --save-dev

gulpfile.jsにタスクを追加します。今回はSassに記載したコメントをもとにガイドを作成します。

  • gulpfile.js
var frontnote = require("gulp-frontnote");

gulp.task("sass", function() {
    gulp.src("sass/**/*scss")
        .pipe(frontnote({
            css: '../css/style.css'
        }))
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest("./css"));
});

続いてstyle.scssにガイド作成用のコメントを記載します。

  • sass/style.scss
/*
#overview
Gulp入門サンプル

サンプルファイルです
*/

/*#styleguide
サンプル見出し1

サンプルの見出しスタイル
hoverすると青く2倍になる

```
<h1>見出し1</h1>
```
*/

ではさっそく実行してみましょう。

gulp sass

guideディレクトリができ、中にHTMLファイルのスタイルガイドが生成されました。

frontnote-ss

こうしておけば半年後、1年後の自分や途中から参加したメンバーへの共有が簡単になります。