web構築準備（Gulp）

構築用フォルダ構成（Gulp.ejs）

/public_html/
├ /src/
│　├ /assets/
│　│　├ /css/
│　│　├ /images/
│　│　└ /movie/ , /pdf/ など
│　├ /js/
│　│　└ /min/
│　├ /（各コンテンツフォルダ）/
│　├ /sass/
│　│　└style.scss など
│　├ /template-ejs/
│　└ index.ejs
└ /dist/

.ejsファイル基本型

<%
var commonData = {
  type: '###',
  title: '###',
  description: '###',
  path: ''
};
%>
<%- include('template-ejs/_head',{common:commonData}); %>
<body id="###" class="###">
  <%- include('template-ejs/_header',{common:commonData}); %>
  <main>
    <!-- メインコンテンツ -->
  </main>
  <%- include('template-ejs/_footer',{common:commonData}); %>
  <%- include('template-ejs/_script',{common:commonData}); %>
</body>
</html>

.ejs条件分岐

<% if (common.type === 'index') { %>
	<h1 class="l-header__logo">
		<a href="<%= common.path %>"><img src="<%= common.path %>assets/images/common/logo.svg" alt="###"></a>
	</h1>
<% }else{ %>
	<span class="l-header__logo">
		<a href="<%= common.path %>"><img src="<%= common.path %>assets/images/common/logo.svg" alt="###"></a>
	</span>
<% } %>

Gulpファイル基本型（gulpfile.js）

// gulpプラグインの読み込み
const gulp = require('gulp');
const ejs = require('gulp-ejs'); //ejs
const htmlhint = require("gulp-htmlhint");
const rename = require('gulp-rename'); //ファイル出力時にファイル名を変える

const sass = require('gulp-dart-sass'); //sass
const sassGlob = require('gulp-sass-glob-use-forward');
const postcss = require('gulp-postcss'); //生成されたcssを操作する
const csscomb = require('gulp-csscomb');
const autoprefixer = require('gulp-autoprefixer'); //自動でベンダープレフィックスを付与
const htmlbeautify = require("gulp-html-beautify"); //HTML生成後のコードを綺麗にする

const plumber = require("gulp-plumber"); //エラーによるタスクの強制停止を防止
const notify = require("gulp-notify"); //デスクトップ通知
const browserSync = require("browser-sync").create(); //変更を即座にブラウザへ反映

const fs = require('fs');//JSONファイル操作用
const del = require('del'); //データ削除用

const PATH  = "###/public_html/"; //作業フォルダパス

// 入出力するフォルダを指定
const srcBase = PATH + 'src';
const distBase = PATH + 'dist';

const srcPath = {
  'scss': srcBase + '/sass/**/*.scss',
  'css': srcBase + '/assets/css/**/*',
  'img': srcBase + '/assets/images/**/*',
  'js': srcBase + '/js/min/**/*.js',
  'html': srcBase + '/**/*.html',
  'ejs': srcBase + '/**/*.ejs',
  '_ejs': '!' + srcBase + '/template-ejs/**/*.ejs',
};
const distPath = {
  'css': distBase + '/assets/css',
  'html': distBase + '/**/*.html',
  'img': distBase + '/assets/images',
  'js': distBase + '/assets/js',
};

/* clean */
const clean = () => {
  return del([distPath.html], { force: true });
}

/* sass */
const cssSass = () => {
  return gulp.src(srcPath.scss, {
    sourcemaps: false
  })
    .pipe(
      //エラーが出ても処理を止めない
      plumber({
        errorHandler: notify.onError('Error:<%= error.message %>')
      }))
    .pipe(sassGlob())
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(autoprefixer())
    .pipe(csscomb())
    .pipe(gulp.dest(distPath.css)) //コンパイル先
}

/* css */
const cssFunc = () =>{
  return gulp.src(srcPath.css, {
    since: gulp.lastRun(cssFunc)
  })
    .pipe(gulp.dest(distPath.css))
}

/* html */
const htmlFunc = () => {
  return gulp.src(srcPath.html, {
    since: gulp.lastRun(htmlFunc)
  })
    .pipe(htmlhint())
    .pipe(htmlhint.reporter())
    .pipe(gulp.dest(distBase))
}

/* ejs */
const ejsFunc = () => {
  return gulp.src([srcPath.ejs, srcPath._ejs])
    .pipe(ejs())
    .pipe(rename({
      extname: '.html' //拡張子
    }))
    .pipe(gulp.dest(distBase))
}

/* image */
const imgFunc = () => {
  return gulp.src(srcPath.img, {
    since: gulp.lastRun(imgFunc)
  })
    .pipe(gulp.dest(distPath.img))
}

/* js */
const jsFunc = () => {
  return gulp.src(srcPath.js, {
    since: gulp.lastRun(jsFunc)
  })
    .pipe(gulp.dest(distPath.js))
}

/* ローカルサーバー立ち上げ */
const browserSyncFunc = () => {
  browserSync.init(browserSyncOption);
}

const browserSyncOption = {
  server: { baseDir: distBase },
  port: 7878,
  directoryListing: true
}

/* リロード */
const browserSyncReload = (done) => {
  browserSync.reload();
  done();
}

/* ファイルの変更時にbrowserSyncReloadする */
const watchFiles = () => {
  gulp.watch(srcPath.scss, gulp.series(cssSass, browserSyncReload))
  gulp.watch(srcPath.css, gulp.series(cssFunc, browserSyncReload))
  gulp.watch(srcPath.img, gulp.series(imgFunc, browserSyncReload))
  gulp.watch(srcPath.ejs, gulp.series(htmlFunc, browserSyncReload))
  gulp.watch(srcPath.ejs, gulp.series(ejsFunc, browserSyncReload))
  gulp.watch(srcPath.js, gulp.series(jsFunc, browserSyncReload))
}

exports.default = gulp.series(
  clean,
  gulp.parallel(cssSass, cssFunc, htmlFunc, ejsFunc, jsFunc),
  gulp.parallel(watchFiles, browserSyncFunc)
);

exports.build = gulp.series(
  clean,
  gulp.parallel(cssSass, cssFunc, htmlFunc, ejsFunc, imgFunc, jsFunc),
);
inserted by FC2 system