gulp.jsを利用する

開発環境はWindows10 Professional + node v10.15.0 + npm 6.4.1 + npx 6.4.1。

gulpは、画像を圧縮したり、SASS→CSSに変換したり、TypeScript→JavaScriptに変換したり、ファイルが更新されたら、ブラウザを自動的に、リロードしたり、いろんなタスクを自動化するためのツールです。

とりあえず、公式サイトのQUICK STARTに書いていることをやってみます。
Quick Start | gulp.js

npm install --global gulp-cli

cd c:\
npm mkdirp my-project

c:\にmy-projectディレクトリが作成されます。

カレントディレクトリをmy-projectにします。

cd my-project

package.jsonを作成します。Enterキーを押し続けて、Is this OK?はyを入力してEnterキーを押します。

npm init

my-projectディレクトリ内に、gulpモジュールをインストールします。実行後に、node-modulesディレクトリが作成されます。--save-devの部分は、省略形の-Dと書いても良いです。

npm install --save-dev gulp

以下のコードをエディタに書いて、gulpfile.jsの名前で保存します。

function defaultTask(cb){
	cb();
}

exports.default = defaultTask

gulpを実行します。

gulp

以下が実行結果です。

SASSをCSSに変換する

gulp-sassモジュールをインストールするため、以下のコマンドを実行

npm install -D gulp-sass

cssディレクトリを作成する。

mkdir css

cssディレクトリ化にstyle.scssファイルを作成します。

$bcolor: #cfcfcf;
$bwidth: 300px;
$bheight: 180px;

.block{
  background-color: $bcolor;
  width: $bwidth;
  height: $bheight;
}

gulpfile.jsを書き換える。

const gulp = require("gulp");

const sass = require("gulp-sass")

gulp.task("default", function(){
	return(
		gulp
		.src("css/style.scss")
		.pipe(sass({outputStyle: "expanded"}))
		.pipe(gulp.dest("css"))
	);
});

gulpを実行

gulp

CSSディレクトリ内に、style.cssが作成されています。中身を見ると、

.block {
  background-color: #cfcfcf;
  width: 300px;
  height: 180px; 
}

きちんと動作してます。

■参考リンク
gulp.js
絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順 - ICS MEDIA
現場で使えるgulp入門 - gulpとは何か | CodeGrid
GulpではじめるVue.js（最小構成） - Qiita