added gulpfiles.

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+trim_trailing_whitespace = true
+
+[*.{md,pug}]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+node_modules
+ignore
+dst/**/*
+build/**/*
+.sass-cache
+npm-debug.log

gulp/conf.js

@@ -0,0 +1,172 @@
+// 設定ファイル
+// 対象パスやオプションを指定
+
+const DOMAIN = module.exports.DOMAIN = 'https://ykob.github.io';
+const DIR = module.exports.DIR =  {
+   // 語尾にスラッシュはつけない
+  PATH: '/fullscreen-slider',
+  SRC: 'src',
+  DEST: 'dst',
+  BUILD: 'docs'
+};
+
+module.exports.serve = {
+  dest: {
+    notify: false,
+    startPath: `${DIR.PATH}/`,
+    ghostMode: false,
+    server: {
+      baseDir: DIR.DEST,
+      index: 'index.html',
+      routes: {
+        [DIR.PATH]: `${DIR.DEST}${DIR.PATH}/`
+      }
+    }
+  },
+  build: {
+    notify: false,
+    startPath: DIR.PATH,
+    ghostMode: false,
+    server: {
+      baseDir: DIR.BUILD,
+      index: 'index.html',
+      routes: {
+        [DIR.PATH]: `${DIR.BUILD}/`
+      }
+    }
+  }
+};
+
+module.exports.scripts = {
+  src: [
+    `./${DIR.SRC}/**/*.js`,
+  ],
+  dest: {
+    development: `./${DIR.DEST}${DIR.PATH}/js`,
+    production: `./${DIR.BUILD}/js`,
+  },
+  webpack: {
+    entry: `./${DIR.SRC}/js/main.js`,
+    output: {
+      filename: `main.js`
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env']
+            }
+          },
+        }
+      ]
+    }
+  },
+};
+
+module.exports.pug = {
+  src: [
+    `${DIR.SRC}/**/*.pug`,
+    `!${DIR.SRC}/**/_**/*.pug`,
+    `!${DIR.SRC}/**/_*.pug`
+  ],
+  dest: `${DIR.DEST}${DIR.PATH}`,
+  opts: {
+    pretty: true
+  },
+  json: `${DIR.SRC}/data.json`,
+};
+
+module.exports.sass = {
+  src: [
+    `${DIR.SRC}/**/*.{sass,scss}`,
+    `!${DIR.SRC}/**/_**/*.{sass,scss}`,
+    `!${DIR.SRC}/**/_*.{sass,scss}`
+  ],
+  dest: `${DIR.DEST}${DIR.PATH}/css`,
+};
+
+module.exports.replace = {
+  html: {
+    src: [
+      `${DIR.DEST}${DIR.PATH}/**/*.html`
+    ],
+    dest: `${DIR.BUILD}`,
+  }
+};
+
+module.exports.cleanCss = {
+  src: `${DIR.DEST}${DIR.PATH}/css/main.css`,
+  dest: `${DIR.BUILD}/css`,
+};
+
+module.exports.copy = {
+  dest: {
+    src: [
+      `${DIR.SRC}/img/**/*.*`,
+      `${DIR.SRC}/font/**/*.*`,
+      `${DIR.SRC}/json/**/*.*`,
+    ],
+    dest: `${DIR.DEST}${DIR.PATH}`,
+    opts: {
+      base: `${DIR.SRC}`
+    }
+  },
+  build: {
+    src: [
+      `${DIR.DEST}${DIR.PATH}/img/**/*.ico`,
+      `${DIR.DEST}${DIR.PATH}/img/**/no_compress/*.*`,
+      `${DIR.DEST}${DIR.PATH}/font/**/*.*`,
+      `${DIR.DEST}${DIR.PATH}/json/**/*.*`,
+    ],
+    dest: `${DIR.BUILD}`,
+    opts: {
+      base: `${DIR.DEST}${DIR.PATH}`
+    }
+  },
+  php: {
+    src: [
+      `${DIR.SRC}/html/**/*.php`,
+    ],
+    dest: `${DIR.BUILD}`,
+    opts: {
+      base: `${DIR.SRC}/html/`
+    }
+  },
+};
+
+module.exports.imagemin = {
+  src: [
+    `${DIR.DEST}${DIR.PATH}/**/*.{jpg,jpeg,png,gif,svg}`,
+    `!${DIR.DEST}${DIR.PATH}/img/**/no_compress/*.*`,
+  ],
+  dest: `${DIR.BUILD}/img`,
+  opts: {
+    pngquant: {
+      quality: [0.6, 0.8],
+      speed: 1,
+    },
+    mozjpeg: {
+      quality: 80,
+      progressive: true,
+    },
+    svgo: {
+      plugins: [
+        { removeViewBox: false },
+        { cleanupIDs: true },
+      ]
+    },
+  }
+};
+
+module.exports.clean = {
+  dest: {
+    path: [`${DIR.DEST}`]
+  },
+  build: {
+    path: [`${DIR.BUILD}`]
+  }
+};

gulp/plugins.js

@@ -0,0 +1 @@
+module.exports = require('gulp-load-plugins')();

gulp/tasks/clean.js

@@ -0,0 +1,16 @@
+const gulp = require('gulp');
+const del = require('del');
+
+const conf = require('../conf').clean;
+
+gulp.task('cleanDest', cb => {
+  del(conf.dest.path).then(() => {
+    cb();
+  });
+});
+
+gulp.task('cleanBuild', cb => {
+  del(conf.build.path).then(() => {
+    cb();
+  });
+});

gulp/tasks/cleanCSS.js

@@ -0,0 +1,11 @@
+const gulp = require('gulp');
+
+const $ = require('../plugins');
+const conf = require('../conf').cleanCss;
+
+gulp.task('cleanCss', () => {
+  return gulp.src(conf.src)
+    .pipe($.cleanCss())
+    .pipe($.rename({ suffix: '.min' }))
+    .pipe(gulp.dest(conf.dest));
+});

gulp/tasks/copy.js

@@ -0,0 +1,18 @@
+const gulp = require('gulp');
+
+const conf = require('../conf').copy;
+
+gulp.task('copyToDest', () => {
+  return gulp.src(conf.dest.src, conf.dest.opts)
+    .pipe(gulp.dest(conf.dest.dest));
+});
+
+gulp.task('copyToBuild', () => {
+  return gulp.src(conf.build.src, conf.build.opts)
+    .pipe(gulp.dest(conf.build.dest));
+});
+
+gulp.task('copyPhpToBuild', () => {
+  return gulp.src(conf.php.src, conf.php.opts)
+    .pipe(gulp.dest(conf.php.dest));
+});

gulp/tasks/imagemin.js

@@ -0,0 +1,21 @@
+const gulp = require('gulp');
+const pngquant = require('imagemin-pngquant');
+const mozjpeg = require('imagemin-mozjpeg');
+
+const $ = require('../plugins');
+const conf = require('../conf').imagemin;
+
+gulp.task('imagemin', () => {
+  return gulp.src(conf.src)
+    .pipe($.imagemin(
+      [
+        pngquant(conf.opts.pngquant),
+        mozjpeg(conf.opts.mozjpeg),
+        $.imagemin.svgo(conf.opts.svgo),
+      ]
+    ))
+    .pipe($.rename(path => {
+      path.dirname = path.dirname.replace('img', '.');
+    }))
+    .pipe(gulp.dest(conf.dest));
+});

gulp/tasks/pug.js

@@ -0,0 +1,24 @@
+const gulp = require('gulp');
+
+const $ = require('../plugins');
+const DOMAIN = require('../conf').DOMAIN;
+const DIR = require('../conf').DIR;
+const conf = require('../conf').pug;
+
+gulp.task('pug', () => {
+  const data = require(`../../${conf.json}`);
+  data.meta.domain = DOMAIN;
+  data.meta.path = DIR.PATH;
+  return gulp.src(conf.src)
+    .pipe($.plumber({
+      errorHandler: $.notify.onError('<%= error.message %>')
+    }))
+    .pipe($.data((file) => {
+      return { data: data }
+    }))
+    .pipe($.pug(conf.opts))
+    .pipe($.rename(path => {
+      path.dirname = path.dirname.replace('html', '.');
+    }))
+    .pipe(gulp.dest(conf.dest));
+});

gulp/tasks/replace.js

@@ -0,0 +1,14 @@
+const gulp = require('gulp');
+
+const $ = require('../plugins');
+const DIR = require('../conf').DIR;
+const conf = require('../conf').replace;
+
+gulp.task('replaceHtml', () => {
+  const regJs = new RegExp(`(src="${DIR.PATH}\/js\/)([a-z0-9_\.\-]*)(\.js")`);
+  const regCss = new RegExp(`(href="${DIR.PATH}\/css\/)([a-z0-9_\.\-]*)(\.css")`);
+  return gulp.src(conf.html.src)
+    .pipe($.replace(regJs, '$1$2.min$3'))
+    .pipe($.replace(regCss, '$1$2.min$3'))
+    .pipe(gulp.dest(conf.html.dest));
+});

gulp/tasks/sass.js

@@ -0,0 +1,16 @@
+const gulp = require('gulp');
+
+const $ = require('../plugins');
+const conf = require('../conf').sass;
+
+gulp.task('sass', () => {
+  return gulp.src(conf.src)
+    .pipe($.sass().on('error', $.sass.logError))
+    .pipe($.autoprefixer({
+      cascade: false
+    }))
+    .pipe($.rename(path => {
+      path.dirname = path.dirname.replace('css', '.');
+    }))
+    .pipe(gulp.dest(conf.dest));
+});

gulp/tasks/scripts.js

@@ -0,0 +1,25 @@
+const gulp = require('gulp');
+const webpackStream = require("webpack-stream");
+const webpack = require("webpack");
+
+const $ = require('../plugins');
+const DIR = require('../conf').DIR;
+const conf = require('../conf').scripts;
+
+const webpackError = function() {
+  this.emit('end');
+};
+
+gulp.task('scripts', () => {
+  conf.webpack.mode = process.env.NODE_ENV;
+  if (conf.webpack.mode == 'development') {
+    return gulp.src(conf.src)
+      .pipe(webpackStream(conf.webpack, webpack))
+      .on('error', webpackError)
+      .pipe(gulp.dest(conf.dest.development));
+  } else {
+    return webpackStream(conf.webpack, webpack)
+      .pipe($.rename({suffix: '.min'}))
+      .pipe(gulp.dest(conf.dest.production));
+  }
+});

gulp/tasks/serve.js

@@ -0,0 +1,47 @@
+const gulp = require('gulp');
+const browserSync = require('browser-sync');
+const path = require("path");
+const slash = require('slash');
+const fs = require('fs');
+const url = require("url");
+const pug = require('pug');
+
+const DOMAIN = require('../conf').DOMAIN;
+const DIR = require('../conf').DIR;
+const conf = require('../conf').serve;
+const confPug = require('../conf').pug;
+
+const getPugTemplatePath = (baseDir, req)=>{
+  const requestPath = url.parse(req.url).pathname;
+  const suffix = path.parse(requestPath).ext ? '' : 'index.html';
+  return path.join(baseDir, "src/html", requestPath, suffix);
+}
+
+const pugMiddleWare = (req, res, next) => {
+  const requestPath = getPugTemplatePath(process.cwd(), req);
+  const data = JSON.parse(fs.readFileSync(confPug.json));
+  data.meta.domain = DOMAIN;
+  data.meta.path = DIR.PATH;
+  if (path.parse(requestPath).ext !== '.html') {
+    return next();
+  }
+  let pugPath = slash(requestPath.replace('.html', '.pug'));
+  if (DIR.PATH.length > 0) {
+    pugPath = pugPath.replace(`/src/html${DIR.PATH}/`, '/src/html/');
+  }
+  console.log(`[BS] try to file ${pugPath}`);
+  const content = pug.renderFile(pugPath, {
+    data: data,
+    pretty: true,
+  });
+  res.end(Buffer.from(content));
+}
+
+gulp.task('serve',()=> {
+  if (process.env.NODE_ENV == 'production') {
+    browserSync(conf.build);
+  } else {
+    conf.dest.server.middleware = [pugMiddleWare];
+    browserSync(conf.dest);
+  }
+});