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 https://www.npmjs.org/package/gulp-sass
※ 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
gulp-autoprefixer https://www.npmjs.org/package/gulp-autoprefixer
先ほど作った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

http://caniuse.com/
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
gulp-frontnote https://www.npmjs.org/package/gulp-frontnote
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ファイルのスタイルガイドが生成されました。

こうしておけば半年後、1年後の自分や途中から参加したメンバーへの共有が簡単になります。
次のページ
JavaScriptの圧縮を自動化します。
         
                         
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る