tyoshikawa1106のブログ

- Force.com Developer Blog -

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

Gulpのことをよくわかっていないので基本的な使い方について次のサイトを参考に確認してみました。前提としてNode.jsの準備ができている必要があるみたいです。

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");

f:id:tyoshikawa1106:20160330181424p:plain


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

Sassのコンパイル

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

$ npm install gulp-sass --save-dev


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

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

f:id:tyoshikawa1106:20160330182412p:plain


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"));
});

f:id:tyoshikawa1106:20160330181634p:plain


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

$ gulp sass


実行するとcssフォルダにstyle.cssファイルが自動生成されました。
f:id:tyoshikawa1106:20160330182507p:plain

便利なプラグイン

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

$ npm install gulp-autoprefixer --save-dev


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

style.scss
h1 {
    color: red;
    transition: 200ms ease-out transform;
    &:hover {
        color: blue;
        transform: translate(10px,0);
  }
}
gulpfile.js
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"));
});


style.cssが次のようになります。
f:id:tyoshikawa1106:20160330183002p:plain


基本的な使い方はこんな感じでした。今回参考にさせて頂いたサイトでは他にも『JavaScriptの圧縮を自動化』や『スタイルガイドの自動生成』についても紹介されていました。このあたりについてもまた今度試してみたいと思います。


動作確認につかったコードはこちらです。