GULPのまとめ

2021年8月4日GULP

実際に使っているgulpfile.jsをシェアします。

gulpfile.js

プラグイン

// common
const gulp = require('gulp');
const { series, parallel, dest } = require('gulp');
const browserSync = require('browser-sync').create();
const rename = require('gulp-rename');
const plumber = require('gulp-plumber'); //監視ストップをしないようにする

// optional
const zip = require('gulp-zip'); //zip化
const del = require('del'); //distの中身削除

// css
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require('gulp-sourcemaps');
const cssnano = require('gulp-cssnano');
const autoprefixer = require('gulp-autoprefixer');
// JS
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const babel = require('gulp-babel');
// img
const imagemin = require('gulp-imagemin');
const cache = require('gulp-cache');
// html
const kit = require('gulp-kit');
const htmlmin = require('gulp-htmlmin');

変数部分です。
それぞれインストールする必要があります。

参考記事
GULPの始め方
GULPでミニファイ化したファイルにminの接尾字をつける方法(gulp-rename)
GULPでLESSの変更を検知する方法

ファイルパス

// ファイルのパス
filesPath = {
  sass: './src/sass/**/*.scss',
  js: './src/js/**/*.js',
  images: './src/img/**/*.+(png|jpg|jpeg|gif|svg)',
  html: './html/**/*.kit',
};

パスをまとめて指定しておくと記述がスッキリします。

SASS

// SASS
function sassTask() {
  return (
    gulp
      .src([filesPath.sass, '!./src/sass/not-compile.scss'])
      .pipe(plumber()) // errorによる監視のストップ防止
      .pipe(sourcemaps.init()) //sourcemaps starts
      .pipe(sass()) //compile
      .pipe(autoprefixer()) //prefix
      .pipe(cssnano()) //minify
      .pipe(sourcemaps.write('.')) //sourcemaps ends
      .pipe(
        rename(path => {
          // mapファイルにはminをつけたくないので。
          if (!path.extname.endsWith('.map')) {
            path.basename += '.min';
          }
        })
      )
      .pipe(dest('./dist/css'))
  );
}

参考記事
GULPでautoprefixerを使う方法（エラーの対応方法）
GULPでCSSをミニファイ化する方法(gulp-cssnano)
GULP でSASSをコンパイルする方法

JavaScript

// JavaScript
function jsTask() {
  return (
    gulp
      .src(filesPath.js)
      .pipe(plumber()) // errorによる監視のストップ防止
      .pipe(
        babel({
          presets: ['@babel/env'],
        })
      )
      .pipe(concat('project.js'))
      .pipe(uglify()) //minify
      .pipe(
        rename({
          suffix: '.min',
        })
      )
      .pipe(dest('./dist/js'))
  );
}

参考記事

GULPでJavaScriptとトランスパイルする方法(gulp-babel)
GULPで複数のJavaScriptファイルをまとめる方法(gulp-concat)
GULPでJavaScriptをミニファイ化する方法(gulp-uglify)

画像の最適化

// Images optimization
function imagesTask() {
  return gulp
    .src(filesPath.images)
    .pipe(cache(imagemin())) //imageを最適化、キャッシュを利用
    .pipe(dest('./dist/img/'));
}

参考記事
GULPで画像イメージを圧縮して最適化する方法とキャッシュコントロール

HTML

// HTML kit templating
function kitTask() {
  return gulp
    .src(filesPath.html)
    .pipe(plumber()) // errorによる監視のストップ防止
    .pipe(kit()) //kitファイルをまとめる
    .pipe(
      htmlmin({//htmlをミニファイ化
        collapseWhitespace: true, //スペースを削除
      })
    )
    .pipe(dest('./'));
}

GULPでHTMLをミニファイ化（最適化）する方法(gulp-htmlmin)
GULPでkitファイルを効率よく使う方法(gulp-kit)

変更を監視

// Watch changes and browser-sync
function watch() {
  // browser-sync
  browserSync.init({
    server: {
      baseDir: './', //index.htmlをrootにおいている場合。
    },
    browser: 'google chrome',
  });
  // watch
  gulp.watch(filesPath.sass, sassTask).on('change', browserSync.reload);
  gulp.watch(filesPath.js, jsTask).on('change', browserSync.reload);
  gulp.watch(filesPath.html, kitTask).on('change', browserSync.reload);
  gulp.watch(filesPath.images, imagesTask).on('change', browserSync.reload);
}

GULPでSASSやHTMLの変更を検知してブラウザを自動でリロードさせる方法

キャッシュの削除

// キャッシュのクリア
function clearCache() {
  return cache.clearAll();
}

プロジェクトファイルのzip化

// Zip化
function zipTask() {
  return gulp
    .src(['./**/*', '!./node_modules/**/*'])
    .pipe(zip('project.zip'))
    .pipe(gulp.dest('./'));
}

distフォルダの中身の削除

// Clean 'dist' folder
function clean() {
  return del(['./dist/**/*']);
}

個々のタスクをエクスポート

// Gulp individual tasks
exports.sassTask = sassTask;
exports.jsTask = jsTask;
exports.imagesTask = imagesTask;
exports.kitTask = kitTask;
exports.watch = watch;
exports.clearCache = clearCache;
exports.zipTask = zipTask;
exports.clean = clean;

gulpコマンドで起動させる

// Gulp serve
exports.build = parallel(sassTask, jsTask, imagesTask, kitTask);

// Gulp default
exports.default = series(exports.build, watch);

それぞれのタスクはどの順番で実行されてもいいのでparallelを使います。
しかしwatchは、それぞれのタスクが一度実行された後に実行されてほしいのでparallelではなくseriesを使います。
参考記事
gulp.seriesとgulp.parallelの違い
GULPでgulpコマンドのデフォルトの設定する方法