gulpのタスクランナーを導入

README.md

@@ -53,6 +53,16 @@ npm start
 npm run build:style
 ```
 
+1. gulpで監視
+```
+gulp watch
+```
+
+2. gulpでビルド
+```
+gulp css
+```
+
 sass/style.scss → docs/style.css にコンパイルされる。  
 ローカルサイトで、スタイルが反映されていれば、無事に成功！
 

gulpfile.js

@@ -0,0 +1,30 @@
+var gulp = require('gulp'),
+    sass = require('gulp-sass'),
+    cleanCss = require('gulp-clean-css'),
+    postcss = require('gulp-postcss'),
+    cssnext = require('postcss-cssnext'),
+    paths = {
+        themeRoot:        './',
+        src:        'sass/',
+        assets:     'docs/',
+        img:        'img/',
+    };
+
+gulp.task('css', function(){
+    var processors = [
+      cssnext({browsers: ['last 2 version']})
+    ];
+    return gulp.src(paths.src + '**/*.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(cleanCss({debug: true}, (details) => {
+        console.log(`${details.name}: ${details.stats.originalSize}`);
+        console.log(`${details.name}: ${details.stats.minifiedSize}`);
+    }))
+    .pipe(postcss(processors))
+    .pipe(gulp.dest(paths.assets));
+});
+
+//watching task
+gulp.task('watch', function(){
+    gulp.watch([paths.src + '**/*.scss'], gulp.task('css'));
+});

package.json

@@ -10,9 +10,16 @@
     "@wordpress/browserslist-config": "^2.2.2",
     "autoprefixer": "^9.1.5",
     "chokidar-cli": "^1.2.1",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^6.1.0",
+    "gulp-clean-css": "^4.2.0",
+    "gulp-plumber": "^1.2.1",
+    "gulp-postcss": "^8.0.0",
+    "gulp-sass": "^4.0.2",
     "node-sass": "^4.9.3",
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^6.0.1",
+    "postcss-cssnext": "^3.1.0",
     "postcss-focus-within": "^3.0.0",
     "rtlcss": "^2.4.0"
   },