Gulpの基本的な使い方について確認してみました

Nodeアプリの準備

『$ npm init』でpackage.jsonを作成したところから始めます。

Gulpのインストール

次のコマンドでインストールしてgulpコマンドを実行できるようにします。

$ sudo npm install gulp -g

アプリ内だけで利用する場合は次のコマンドでインストールします。

$ npm install gulp --save-dev

両方実行しておいたほうが良さそうです。

gulpfile.jsの用意

次のコマンドでファイルを作成します。

$ touch gulpfile.js

ファイル内に次のコードを記載します。

var gulp = require("gulp");

これだけでgulpを実行する準備ができるみたいです。

Sassのコンパイル

GulpをつかったSassのコンパイルについてです。次のコマンドを実行するとgulpからsassのコンパイルが可能になります。

$ npm install gulp-sass --save-dev

sassフォルダとstyle.scssファイルを用意します。

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

gulpfile.jsの内容を次のように変更します。

var gulp = require("gulp");

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

『gulp.task("sass", function() {』の部分がタスク名となるみたいです。この場合、次のように実行できるそうです。

$ gulp sass

実行するとcssフォルダにstyle.cssファイルが自動生成されました。

便利なプラグイン

ベンダープレフィックス付与を自動化できるgulp-autoprefixerを試してみました。

$ npm install gulp-autoprefixer --save-dev

『gulp-autoprefixer』を利用する場合は次のように記述します。

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

var gulp = require("gulp");

var sass = require("gulp-sass");

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