The Acorn Spirit's Journey

そういえば、と思い出して
最近ちょっと書き替えて調整したgulpfile.js。

　
一度設定しておいたら、つい、ずっとそのままで・・
最近になってようやくなんですけれど。

　

gulpfile.js

// 必要なモジュールをインポート
const { src, dest, watch, series, parallel } = require('gulp'),
sass = require('gulp-sass')(require('sass')),
autoprefixer = require('gulp-autoprefixer'),
cleanCSS = require('gulp-clean-css'),
rename = require('gulp-rename'),
//replace = require('gulp-replace'),
gcmq = require('gulp-group-css-media-queries'),
browserSync = require('browser-sync').create(),
plumber = require('gulp-plumber'),
changed = require('gulp-changed'),
notify = require('gulp-notify');

// ファイルパスの定義
const paths = {
    scss: 'src/scss/*.scss',
    css: ['src/assets/css/', 'dist/assets/css/'],
    js: { src: 'src/assets/js/*.js', dist: 'dist/assets/js/' },
    images: { src: 'src/assets/images/**/*.+(jpg|jpeg|png|gif|svg|webp)', dist: 'dist/assets/images/' },
    html: { src: 'src/**/*.html', dist: 'dist/' }
};

// SCSS → CSS のタスク
const cssTask = done => {
    src(paths.scss)
    .pipe(plumber({
        errorHandler: notify.onError({
            title: "CSSエラー",
            message: "エラー内容: <%= error.message %>"
        })
    }))
    .pipe(sass.sync({ outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gcmq())
    .pipe(dest(paths.css[0]))
    .pipe(dest(paths.css[1]))
    //.pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(cleanCSS({ compatibility: 'defaults' }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest(paths.css[0]))
    .pipe(dest(paths.css[1]))
    .pipe(notify({ title: 'CSSコンパイル完了', message: new Date() }))
    .pipe(browserSync.stream());
    done();
};

// 画像最適化のタスク
const imagesTask = () => {
    return src(paths.images.src)
    .pipe(changed(paths.images.dist))
    .pipe(dest(paths.images.dist));
};

// HTMLファイルのコピータスク
const htmlTask = () => {
  return src(paths.html.src)
  .pipe(plumber({
    errorHandler: notify.onError({
      title: "HTMLエラー",
      message: "エラー内容: <%= error.message %>"
    })
}))
.pipe(dest(paths.html.dist));
};

// JavaScriptファイルのコピータスク
const jsTask = () => {
    return src(paths.js.src)
        .pipe(plumber({
            errorHandler: notify.onError({
                title: "JSエラー",
                message: "エラー内容: <%= error.message %>"
            })
        }))
        .pipe(dest(paths.js.dist));
};

// ローカルサーバーの起動
const buildServer = done => {
    browserSync.init({
        server: {
            baseDir: 'src/'
        }
    });
    done();
};

// ブラウザの自動リロード
const browserReload = done => {
    browserSync.reload();
    done();
};

// ファイルの監視
const watchFiles = done => {
    watch(paths.scss, series(cssTask, browserReload));
    watch(paths.js.src, series(jsTask, browserReload));
    watch(paths.images.src, series(imagesTask, browserReload));
    watch(paths.html.src, series(htmlTask, browserReload));
    done();
};

// デフォルトタスクの設定
exports.default = parallel(watchFiles, buildServer);

　

小説ばかりに気を取られて、仕事がおろそかに・・・
なんてことはないです（たぶん…）

gulp-replace
は必要であれば使ったり。

pipe(cleanCSS({ compatibility: ‘ie8’ }))
この部分も、場合によっては。