Gulpの使い方

ターミナルをまず開く

カレントディレクトリーを開く
WordPressテーマの場合はテーマフォルダ

cd xxxxxxx

初期設定をする

npm init -y

Gulpとモジュールをまとめてインストールする。

npm install -D gulp gulp-sass gulp-notify gulp-plumber gulp-postcss autoprefixer

gulpfile.jsというファイルを作る

const gulp = require("gulp");
const sass = require("gulp-sass");
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');

const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");

function task() {
    return gulp.watch("scss/*.scss", function () {
        return (
            gulp.src('scss/style.scss', { sourcemaps: true })
                .pipe(plumber({
                    errorHandler: notify.onError("Error: <%= error.message %>")
                }))
                .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
                .pipe(postcss([
                    autoprefixer({
                        grid: true,
                        cascade: false
                    })
                ]))
                .pipe(notify('Sassをコンパイルしました!'))
                .pipe(gulp.dest('.', { sourcemaps: '.' }))
        );
    });
}

exports.default = task;