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

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年後の自分や途中から参加したメンバーへの共有が簡単になります。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

CTOの林です。フロントエンドを専門とし、AngularJSのコミュニティをはじめ、様々な勉強会に顔を出しています。効率化マニアでGrunt,Gulpをはじめ、プロジェクト進行やサーバーサイド、インフラ周りの効率化を目指し日々活動しています。 【役職紹介 / CTO】 Web制作にかかる内容を統括しています。プロジェクトを横断的に見渡し、技術的な見地からアドバイスなどを行い、ときには実制作のヘルプを行ったりしています。新人エンジニアの育成や、体外的な活動としてLIG全体のエンジニアのブランディングのため勉強会やイベントへの登壇・開催なども行っています。 【普段やっていること】 新規サービスの設計(UI,遷移,DB,APIなど)、エンジニアの育成及び環境整備、技術選定、Web制作ユニットの統括とプロジェクト進行を円滑にするための仕組みづくり、フロントエンド周りの実装、エンジニアリングの開発効率化、勉強会の登壇・主催など

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL