Gulpとは？Web制作における使い方のきほん

npm i -g gulp-cli

npm i -D gulp

function myFirstTask(cb) {
  console.log("Hello, Gulp!");
  cb();
}

exports.default = myFirstTask;

❯ gulp
[00:00:00] Using gulpfile ~/path/to/gulpfile.js
[00:00:00] Starting 'default'...
Hello, Gulp!
[00:00:00] Finished 'default' after

function defaultTask(cb) {
  console.log("defaultに入れた関数は`gulp`コマンドだけで実行される。");
  cb();
}

function namedTask(cb) {
  console.log("任意のキー名に入れた関数は`gulp タスク名`で実行される。");
  cb();
}

exports.default = defaultTask;
exports.namedTask = namedTask;

const { series, parallel } = require("gulp");

async function pugToHtml() {
  await new Promise((resolve) => setTimeout(resolve, 500));
  console.log("PugからHTMLへトランスパイルする処理");
}

function sassToCss(cb) {
  console.log("SASSからCSSへトランスパイルする処理");
  cb();
}

function tsToJs(cb) {
  console.log("TSからJSへトランスパイルする処理");
  cb();
}

function minify(cb) {
  console.log("圧縮処理");
  cb();
}

exports.build = series(parallel(pugToHtml, sassToCss, tsToJs), minify);

[14:20:38] Starting 'build'...
[14:20:38] Starting 'pugToHtml'...
[14:20:38] Starting 'sassToCss'...
[14:20:38] Starting 'tsToJs'...
SASSからCSSへトランスパイルする処理
[14:20:38] Finished 'sassToCss' after 1 ms
TSからJSへトランスパイルする処理
[14:20:38] Finished 'tsToJs' after 1 ms
PugからHTMLへトランスパイルする処理
[14:20:38] Finished 'pugToHtml' after 507 ms
[14:20:38] Starting 'minify'...
圧縮処理
[14:20:38] Finished 'minify' after 2 ms
[14:20:38] Finished 'build' after 511 ms

const gulp = require("gulp");

function copyStaticAssets() {
  return gulp.src("src/assets/**/*").pipe(gulp.dest("dist/assets"));
}

exports.copyStaticAssets = copyStaticAssets;

{
	ingnoreinitial:true,  //起動時のスキャンでタスクを実行する
  delay:200,            //検知からタスク実行までのラグ
  queue:true,           //別タスクの実行中にファイル変更を検知したらそのタスクをキューへ入れる
  events:['add, change', 'unlink'],//タスクを実行するイベント（一覧は後述）
  persistent:true,      //プロセスを実行し続けるか。基本true
  ignore:'',            //無視するglob
  followSymlinks:true,  //シンボリックリンクの変更でイベントをトリガーする
  cwd:'',               //相対パスとくっつけて絶対パスを作るためのパス
  disableGlobbing:false,//globをただの文字列として扱う
  usePolling:false,     //fs.watch()の代わりにfs.watchFile()を使う
  interval:100,         //usePollingがtrueの時の、ファイルシステムのポーリングの間隔
  binaryInterval:300,   //usePollingがtrueの時の、バイナリファイルのポーリングの間隔
  useFsEvents:true,     //fseventsが利用可能な場合、それを監視に使用する
  alwaysStat:false,     //変更されたファイルに対して常にfs.stat()を呼び出す
  //depth:,             監視するディレクトリのネスト数
  awaitWriteFinish:false,//使わない。代わりにdelayを使う
  ignorePermissionErrors:false,//読み取り権限のないファイルを監視する
  atomic:100//謎。
}

const { watch, src, dest } = require("gulp");
const ts = require("gulp-typescript"); //このプラグインについては後述。

function tsToJs(path) {
  return src(path).pipe(ts()).pipe(dest("dist/"));
}

exports.default = function () {
  watch("src/ts/*.ts").on("change", (path) => tsToJs(path));
};

npm i -D gulp-pug pug

const { src, dest, watch } = require("gulp");
const pug = require("gulp-pug");

function pugToHtml(path) {
  return src(path).pipe(pug()).pipe(dest("dist/"));
}

exports.default = function () {
  watch("src/pug/*.pug").on("change", (path) => pugToHtml(path));
};

npm i -D gulp-sass sass

const { watch, src, dest } = require("gulp");
const sass = require("gulp-sass")(require("sass"));

function sassToCss(path) {
  return src(path).pipe(sass()).pipe(dest("dist/"));
}

exports.default = function () {
  watch("src/sass/*.scss").on("change", (path) => sassToCss(path));
};

npm i -D gulp-typescript typescript

const { watch, src, dest } = require("gulp");
const ts = require("gulp-typescript");

function tsToJs(path) {
  return src(path).pipe(ts()).pipe(dest("dist/"));
}

exports.default = function () {
  watch("src/ts/*.ts").on("change", (path) => tsToJs(path));
};

npm i -D browser-sync

const { watch } = require("gulp");
const browserSync = require("browser-sync").create();

function reloadBrowser(cb) {
  browserSync.reload();
  cb();
}

exports.default = function () {
  browserSync.init({
    server: "./public",
  });
  watch("dist/", reloadBrowser);
};