Gulp5を使ったローカルサーバー構築で効率のいい制作環境を作る【SCSS WEBデザイナー】

import gulp from 'gulp';  // gulpをインポート
const { series, src, dest, watch } = gulp; // series, src, dest, watchがそのまま使えるように

// プラグインのインポート
import plumber from 'gulp-plumber'; // エラーが発生してもタスクを停止しない
import notify from 'gulp-notify'; // エラー発生時にデスクトップ通知を行う
import browserSync from 'browser-sync'; // ローカルサーバーを起動し、ブラウザの自動リロードを行う
import gulpSass from 'gulp-sass'; // Sassファイルをコンパイルする
import sass from 'sass'; // Dart Sass
import sassGlob from 'gulp-sass-glob'; // Sassのimport文を簡潔に書くためのプラグイン
import csscomb from 'gulp-csscomb'; // CSSプロパティをソートする
import connect from 'gulp-connect-php'; // PHPサーバーを立ち上げる
import sourcemaps from 'gulp-sourcemaps'; // ソースマップを作成する
import postcss from 'gulp-postcss'; // PostCSSを利用する
import autoprefixer from 'autoprefixer'; // ベンダープレフィックスを付与する

const browser = browserSync.create();
const sassProcessor = gulpSass(sass);

// 参照元パス
const srcPath = {
  scss: 'src/scss/**/*.scss', // Sassファイルのソース
};

// 出力先パス
const destPath = {
  css: 'dist/css', // CSSファイルの出力先
};

// PHPサーバーを立ち上げ、BrowserSyncでプレビュー表示するタスク
function connectSync(done) {
  connect.server({
    port: 8080, // サーバーのポート番号
    base: 'dist/' // サーバーのベースディレクトリ
  }, function() {
    browser.init({
      proxy: 'localhost:8080', // Proxy設定をlocalhostに変更
      baseDir: 'dist/' // ベースディレクトリを設定
    });
  });
  done();
}

// ブラウザをリロードするタスク
function reload(done) {
  browser.reload(); // BrowserSyncを使ってブラウザをリロードする
  done();
}

// Sassをコンパイルし、CSSを生成するタスク
const sassTask = () => (
  src(srcPath.scss) // Sassファイルのソース
    .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) // エラー時に通知
    .pipe(sourcemaps.init()) // ソースマップを初期化
    .pipe(sassGlob()) // Sassのimport文をまとめる
    .pipe(sassProcessor().on('error', sassProcessor.logError)) // Sassをコンパイル
    .pipe(csscomb()) // CSSプロパティを整形
    .pipe(postcss([
      autoprefixer('last 2 versions'), // ベンダープレフィックスを付与
      mqpacker(), // メディアクエリをまとめる
      discardComments({ removeAll: true }), // CSSコメントを削除
      cssnano() // CSSを圧縮
    ]))
    .pipe(sourcemaps.write('.')) // ソースマップを書き出す
    .pipe(dest(destPath.css)) // 出力先
    .pipe(browser.stream()) // ブラウザをリロード
);

// ファイルの変更を監視するタスク
const watchFiles = (done) => {
  watch(srcPath.scss, sassTask); // Sassファイルが変更されたらコンパイルする
  watch(srcPath.php, reload); // PHPファイルが変更されたらリロードする
  watch(srcPath.html, reload); // HTMLファイルが変更されたらリロードする
  done();
};

// デフォルトタスク（Gulpを実行した際に動くタスク）
export default series(connectSync, watchFiles);

// 個別タスクをエクスポート
export { sassTask };

// PHPサーバーを立ち上げ、BrowserSyncでプレビュー表示するタスク
function connectSync(done) {
  connect.server({
    port: 8080, // サーバーのポート番号
    base: 'dist/' // サーバーのベースディレクトリ
  }, function() {
    browser.init({
      proxy: 'localhost:8080', // Proxy設定をlocalhostに変更
      baseDir: 'dist/' // ベースディレクトリを設定
    });
  });
  done();
}

javascriptコードをコピーするconst sassTask = () => (
  src(srcPath.scss) // Sassファイルのソース
    .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) // エラー時に通知
    .pipe(sourcemaps.init()) // ソースマップを初期化
    .pipe(sassGlob()) // Sassのimport文をまとめる
    .pipe(sassProcessor().on('error', sassProcessor.logError)) // Sassをコンパイル
    .pipe(csscomb()) // CSSプロパティを整形
    .pipe(postcss([
      autoprefixer('last 2 versions'), // ベンダープレフィックスを付与
    ]))
    .pipe(sourcemaps.write('.')) // ソースマップを書き出す
    .pipe(dest(destPath.css)) // 出力先
    .pipe(browser.stream()) // ブラウザをリロード
);

import cssnano from 'cssnano'; // CSSファイルを圧縮する
import mqpacker from 'css-mqpacker'; // メディアクエリをまとめる
import discardComments from 'postcss-discard-comments'; // CSSのコメントを削除する

    .pipe(postcss([
      autoprefixer('last 2 versions'), // ベンダープレフィックスを付与
      mqpacker(), // メディアクエリをまとめる
      discardComments({ removeAll: true }), // CSSコメントを削除
      cssnano() // CSSを圧縮
    ]))

import purgecss from 'gulp-purgecss'; // 未使用のCSSセレクタを削除する

// 参照元パス
const srcPath = {
  scss: 'src/scss/**/*.scss', // Sassファイルのソース
  js: 'src/js/**/*.js', // JSファイルのソース
  php: 'dist/**/*.php', // PHPファイルのソース
  html: 'dist/**/*.html' // HTMLファイルのソース
};

    .pipe(purgecss({ // 未使用のCSSセレクタを削除
      content: [srcPath.html, srcPath.php, srcPath.js]
    }))

// ファイルの変更を監視するタスク
const watchFiles = (done) => {
  watch(srcPath.scss, sassTask); // Sassファイルが変更されたらコンパイルする
  watch(srcPath.php, reload); // PHPファイルが変更されたらリロードする
  watch(srcPath.html, reload); // HTMLファイルが変更されたらリロードする
  done();
};

// デフォルトタスク（Gulpを実行した際に動くタスク）
export default series(connectSync, watchFiles);