Merge pull request #4523 from tsuka-rinorino/feature/gulp

Gulpをタスクごとにファイルを分割

.gitignore

@@ -1,7 +1,6 @@
 !dummy
 !.gitmodule
 composer.phar
-gulpconfig.js
 /vendor/
 /node_modules/
 /var/*

.htaccess

@@ -43,6 +43,7 @@ DirectoryIndex index.php index.html .ht
     RewriteRule "^var/" - [F]
     RewriteRule "^vendor/" - [F]
     RewriteRule "^node_modules/" - [F]
+    RewriteRule "^gulp/" - [F]
     RewriteRule "^codeception/" - [F]
     RewriteRule "^bin/" - [F]
     RewriteRule "^dockerbuild/" - [F]

gulp/build/build.js

@@ -0,0 +1,6 @@
+const { series } = require('gulp')
+const config = require('../config')
+const scss = require('../task/scss')
+const scssMin = require('../task/scss-min')
+
+module.exports = series(scss, scssMin)

gulp/build/start.js

@@ -0,0 +1,9 @@
+const { series, parallel, watch } = require('gulp')
+const config = require('../config')
+const server = require('../task/server')
+const scss = require('../task/scss')
+const scssMin = require('../task/scss-min')
+
+module.exports = series(series(server, parallel(scss, scssMin)), () => {
+  watch(config.paths.source.template + config.paths.assets.scss, parallel(scss, scssMin))
+})

gulp/config.js

@@ -0,0 +1,16 @@
+let config = {}
+
+config.paths = {
+  source: {
+    template: './html/template',
+  },
+  output: {
+    template: './html/template',
+  },
+  assets: {
+    scss: '/**/scss/**/*.scss',
+  },
+}
+config.server = 'http://localhost:8080'
+
+module.exports = config

gulp/task/scss-min.js

@@ -0,0 +1,34 @@
+const config = require('../config')
+const { src, dest } = require('gulp')
+const plumber = require('gulp-plumber')
+const notify = require('gulp-notify')
+const rename = require('gulp-rename')
+const sass = require('gulp-sass')
+const postcss = require('gulp-postcss')
+const autoprefixer = require('autoprefixer')
+const cssmqpacker = require('css-mqpacker')
+const sortCSSmq = require('sort-css-media-queries')
+const cleanCSS = require('gulp-clean-css')
+
+module.exports = () => {
+  return src([config.paths.source.template + config.paths.assets.scss], {
+      sourcemaps: true,
+      base: config.paths.source.template
+    })
+    .pipe(plumber({
+      errorHandler: notify.onError('Error: <%= error.message %>')
+    }))
+    .pipe(sass())
+    .pipe(postcss([
+      autoprefixer(),
+      cssmqpacker({
+        sort: sortCSSmq
+      }),
+    ]))
+    .pipe(cleanCSS())
+    .pipe(rename((path) => {
+      path.dirname = path.dirname.replace('/scss', '/css')
+      if (path.extname === '.css') path.extname = '.min.css'
+    }))
+    .pipe(dest(config.paths.output.template, {sourcemaps: '.'}))
+}

gulp/task/scss.js

@@ -0,0 +1,35 @@
+const config = require('../config')
+const { src, dest } = require('gulp')
+const plumber = require('gulp-plumber')
+const notify = require('gulp-notify')
+const browserSync = require('browser-sync')
+const rename = require('gulp-rename')
+const sass = require('gulp-sass')
+const postcss = require('gulp-postcss')
+const atImport = require('postcss-import');
+const autoprefixer = require('autoprefixer')
+const cssmqpacker = require('css-mqpacker')
+const sortCSSmq = require('sort-css-media-queries')
+
+module.exports = () => {
+  return src([config.paths.source.template + config.paths.assets.scss], {
+      sourcemaps: true,
+      base: config.paths.source.template
+    })
+    .pipe(plumber({
+      errorHandler: notify.onError('Error: <%= error.message %>')
+    }))
+    .pipe(sass())
+    .pipe(postcss([
+      atImport(),
+      autoprefixer(),
+      cssmqpacker({
+        sort: sortCSSmq
+      }),
+    ]))
+    .pipe(rename((path) => {
+      path.dirname = path.dirname.replace('/scss', '/css')
+    }))
+    .pipe(dest(config.paths.output.template, {sourcemaps: '.'}))
+    .pipe(browserSync.stream())
+}

gulp/task/server.js

@@ -0,0 +1,9 @@
+const browserSync = require('browser-sync')
+const config = require('../config')
+
+module.exports = (done) => {
+  browserSync({
+    proxy: config.server
+  })
+  done()
+}

gulpfile.js

@@ -1,186 +1,5 @@
-/*
- * モジュール
- */
-// common
-const gulp = require('gulp');
-const plumber = require('gulp-plumber');
-const notify = require('gulp-notify');
-const rename = require('gulp-rename');
-const process = require('process');
-// server
-const browserSync = require('browser-sync')
-// sass
-const sass = require('gulp-sass');
-const postcss = require('gulp-postcss');
-const atImport = require('postcss-import');
-const autoprefixer = require('autoprefixer');
-const cssmqpacker = require('css-mqpacker');
-const sortCSSmq = require('sort-css-media-queries');
-const cleanCSS = require('gulp-clean-css');
+const build = require('./gulp/build/build')
+const start = require('./gulp/build/start')
 
-/*
- * 変数
- */
-// gulpconfig 存在しない場合のフォールバック
-try {
-  var config = require('./gulpconfig');
-} catch (e) {
-  var config = {
-    paths: {
-      source: {
-        template: './html/template',
-      },
-      output: {
-        template: './html/template',
-      },
-      assets: {
-        scss: '/**/scss/**/*.scss',
-      },
-    }
-  }
-}
-
-/*
- * config 存在判定
- */
-const configDecisionTask = (done) => {
-  if (!config.server) {
-    console.log('\033[31m' + 'Error:'+ '\033[39m' + ' gulpconfig.jsが設定されていません。');
-    console.log('\033[31m' + 'Error:'+ '\033[39m' + ' タスクを終了します。');
-    throw new Error();
-  }
-  done();
-};
-
-/*
- * Browsersync サーバー
- */
-const BrowsersyncTask = (done) => {
-  browserSync({
-    proxy: config.server
-  })
-  done()
-};
-
-/*
- * sass
- */
-const sassSource = config.paths.source.template + config.paths.assets.scss;
-const sassOutput = config.paths.output.template;
-
-// scssのコンパイル
-const sassTask = () => {
-  return gulp
-    .src([sassSource], {
-      sourcemaps: true,
-      base: config.paths.output.template
-    })
-    .pipe(plumber({
-      errorHandler: notify.onError('Error: <%= error.message %>')
-    }))
-    .pipe(sass())
-    .pipe(postcss([
-      atImport(),
-      autoprefixer(),
-      cssmqpacker({
-        sort: sortCSSmq
-      }),
-    ]))
-    .pipe(rename((path) => {
-      path.dirname = path.dirname.replace('/scss', '/css')
-    }))
-    .pipe(gulp.dest(sassOutput, {sourcemaps: '.'}))
-    .pipe(browserSync.stream());
-};
-
-// scssのコンパイル minify化
-const sassCssMinifyTask = () => {
-  return gulp
-    .src([sassSource], {
-      sourcemaps: true,
-      base: config.paths.output.template
-    })
-    .pipe(plumber({
-      errorHandler: notify.onError('Error: <%= error.message %>')
-    }))
-    .pipe(sass())
-    .pipe(postcss([
-      autoprefixer(),
-      cssmqpacker({
-        sort: sortCSSmq
-      }),
-    ]))
-    .pipe(cleanCSS())
-    .pipe(rename((path) => {
-      path.dirname = path.dirname.replace('/scss', '/css')
-      if (path.extname === '.css') path.extname = '.min.css'
-    }))
-    .pipe(gulp.dest(sassOutput, {sourcemaps: '.'}))
-    .pipe(browserSync.stream());
-};
-
-/*
- * エクスポート
- */
-exports.configDecisionTask = configDecisionTask;
-exports.BrowsersyncTask = BrowsersyncTask;
-exports.sassTask = sassTask;
-exports.sassCssMinifyTask = sassCssMinifyTask;
-
-/*
- * タスク
- */
-// デフォルト
-gulp.task('default',
-  gulp.parallel(sassTask, sassCssMinifyTask)
-);
-
-// 監視
-gulp.task('watch', () => {
-  gulp.parallel(sassTask, sassCssMinifyTask),
-  gulp.watch(
-    config.paths.source.template + config.paths.assets.scss,
-    gulp.parallel(sassTask, sassCssMinifyTask)
-  )
-});
-
-// minifyタスクの監視
-gulp.task('watch:min', gulp.series(
-  sassCssMinifyTask,
-  () => {
-    gulp.watch(
-      config.paths.source.template + config.paths.assets.scss,
-      sassCssMinifyTask
-    )
-  }
-));
-
-// 監視 ブラウザ自動更新
-gulp.task('start', gulp.series(
-  configDecisionTask,
-  gulp.parallel(sassTask, sassCssMinifyTask),
-  BrowsersyncTask,
-  () => {
-    gulp.watch(
-      config.paths.source.template + config.paths.assets.scss,
-      sassTask
-    ),
-    gulp.watch(
-      config.paths.source.template + config.paths.assets.scss,
-      sassCssMinifyTask
-    );
-  }
-));
-
-// 監視 ブラウザ自動更新 minify化
-gulp.task('start:min', gulp.series(
-  configDecisionTask,
-  sassCssMinifyTask,
-  BrowsersyncTask,
-  () => {
-    gulp.watch(
-      config.paths.source.template + config.paths.assets.scss,
-      sassCssMinifyTask
-    );
-  }
-));
+exports.default = build
+exports.start = start