gulpへ記載するコード

const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssSorter = require("css-declaration-sorter");
const mmq = require("gulp-merge-media-queries");
const browserSync = require("browser-sync").create();
const cleanCss = require("gulp-clean-css");
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");
const htmlBeautify = require("gulp-html-beautify");

// Sassファイルをコンパイルし、autoprefixerとcssSorterを適用、minifyして出力
function compileSass() {
    return gulp.src("./src/assets/sass/**/*.scss")
        .pipe(sass().on("error", sass.logError)) // Sassコンパイル時にエラーがあればログ出力
        .pipe(postcss([autoprefixer(), cssSorter()])) // autoprefixerとcssSorterを適用
        .pipe(mmq()) // メディアクエリをマージ
        .pipe(gulp.dest("../css/")) // CSSを出力
        .pipe(cleanCss()) // CSSをminify
        .pipe(rename({ suffix: ".min" })) // ファイル名に.minを付加
        .pipe(gulp.dest("../css/")); // minified CSSを出力
}

// JavaScriptファイルを圧縮して出力
function minJS() {
    return gulp.src("./src/assets/js/**/*.js")
        .pipe(gulp.dest("../js/"))
        .pipe(uglify())
        .pipe(rename({ suffix: ".min" }))
        .pipe(gulp.dest("../js/"));
}

// 画像ファイルをコピー
function copyImage() {
    return gulp.src("./src/assets/img/**/*")
        .pipe(gulp.dest("../img/"));
}

// HTMLファイルを整形して出力
function formatHTML() {
    return gulp.src("./src/**/*.html")
        .pipe(htmlBeautify({
            indent_size: 2,
            indent_with_tabs: true,
        }))
        .pipe(gulp.dest("./public"));
}

// Sassファイルの変更を監視し、適切なタスクを実行
function watch() {
    gulp.watch("./src/assets/sass/**/*.scss", gulp.series(compileSass, browserReload));
    gulp.watch("./src/assets/js/**/*.js", gulp.series(minJS, browserReload));
    gulp.watch("./src/assets/img/**/*", gulp.series(copyImage, browserReload));
    gulp.watch("../**/*.php", browserReload);
}

// ブラウザを起動するためのタスク
function browserInit(done) {
    browserSync.init({
        proxy: "http://◯◯◯◯.local" // ローカル開発用サーバーをプロキシ
    });
    done();
}

// ブラウザをリロードするタスク
function browserReload(done) {
    browserSync.reload();
    done();
}

// タスクのエクスポート
exports.default = gulp.series(browserInit, watch);
exports.compileSass = compileSass;
exports.browserInit = browserInit;
exports.dev = gulp.parallel(browserInit, watch);
exports.minJS = minJS;
exports.formatHTML = formatHTML;
exports.build = gulp.parallel(minJS, compileSass, copyImage);
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次