[自分メモ] Gulp4 構築手順

新規プロジェクトを構築する際のGulp4のインストール手順

前提ステータス

$ gulp -v

CLI version: 2.3.0
Local version: Unknown

$ node -v

v16.10.0

初期設定

とりあえずpackage.jsonを作る

npm init -y

gulpfile.js

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

//ベンダープレフィックスを付与する条件
const TARGET_BROWSERS = [
  'last 2 versions',//各ブラウザの2世代前までのバージョンを担保
  'ie >= 11'//IE11を担保
];

const compileSass = () => src("htdocs/scss/style.scss") 
.pipe(sass({ outputStyle: "compressed" }))
// ▼圧縮しないver 
// .pipe(sass({ outputStyle: "expanded" }))
.pipe(
  postcss([
      autoprefixer({
          cascade: false,
          grid: true
      })
  ])
)
.pipe(dest("htdocs/css"));

const watchSassFiles = () => watch("htdocs/scss/*/*.scss", compileSass); exports.default = watchSassFiles;

Gulpファイルはこんな感じ

Gulpをローカルインストール

npm install -D gulp

// Local version: 4.0.2になる

モジュールのインストール(今回使うもの一式)

npm install gulp sass gulp-sass gulp-postcss gulp-autoprefixer --save-dev

Gulp起動

npx gulp

[14:32:29] Starting 'default'...
[14:32:29] Starting 'compileSass'...
[14:32:30] Finished 'compileSass' after 250 ms
[14:33:24] Starting 'compileSass'...

scssファイルを保存する度にコンパイルされていればOK