WIP: gulp4のインストールと簡単な使用例

gulpの使い方を調べる機会があったので、インストール方法と簡単な使用例についてまとめる事にする。

gulpとは？

gulpとはタスクランナーである。
ちなみに、タスクランナーとは、何かしらのタスクをプログラム処理で自動化するツールの総称だ。

実行環境の情報

環境構築が面倒だったので、paizacloudを使ってサーバ環境を用意した。

インストール前に、nodeとnpmのバージョンを確認してみる。

$ node -v
v12.14.1
$ npm -v
6.13.6

gulpをインストール

インストール自体はいたってシンプル。

$ npm i -D gulp

gulpでシンプルなタスクを定義

const gulp = require("gulp");

const helloGulp = (done) => {
    console.log("Hello Gulp!");
    done();
};

exports.default = helloGulp;

実行結果

$ npx gulp
[10:42:53] Using gulpfile ~/gulpfile.js
[10:42:53] Starting 'default'...
Hello Gulp!
[10:42:53] Finished 'default' after 8.8 ms

sassのインストール

こちらもプラグインのインストールはコマンド一つで。

$ npm i -D gulp-sass

sassの設定

scssファイルのフォルダとコンパイル済みのcssのフォルダを作成

$ mkdir scss css

サンプルのscssファイルを設置

scss/sample.scss

$fontColor: #99cc66;
h1 { color: $fontColor; }

gulpfile.jsを更新

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

const sassTask = (done) => {
    gulp.src("scss/*.css")
        .pipe(sass({
            outputStyle: "expanded"
        }))
        .pipe(gulp.dest("css"));
    done();
};
const watchSassTask = () => gulp.watch("scss", sassTask);

exports.default = watchSassTask;

実行すると、sample.scssがコンパイルされて、css/sample.cssに出力される。コンパイル結果は下記の通りとなる。

h1 {
  color: #99cc66;
}

sass()のオプション outputStyle: "expanded" をとると、出力は下記の通りとなる。

h1 {
  color: #99cc66; }

続く

雑多なブログ

音楽や語学、プログラム関連の話題について書いています