upgrade gulp v4

Author: makotokw

README.md

@@ -34,8 +34,8 @@ cd redmine/public/theme
 git clone git://github.com/makotokw/redmine-theme-gitmike.git gitmike
 cd gitmike
 gem install compass
-npm install -g gulp
-npm install
+npm install -g gulp-cli
+yarn
 gulp debug
 ```
 

gulpfile.js

@@ -1,14 +1,13 @@
-/*jshint node: true */
 'use strict';
 
 var gulp = require('gulp');
-var plugins = require('gulp-load-plugins')();
-var browserSync = require('browser-sync');
-var reload = browserSync.reload;
+var gulpCompass = require('gulp-compass');
+var gulpAutoPrefixer = require('gulp-autoprefixer');
+var browserSync = require('browser-sync').create();
 
 function compass(env) {
-    gulp.src('./sass/*.scss')
-        .pipe(plugins.compass({
+    return gulp.src('./sass/*.scss')
+        .pipe(gulpCompass({
             config_file: 'sass/config.rb',
             environment: env,
             comments: env === 'development',
@@ -17,39 +16,35 @@ function compass(env) {
             sass: 'sass',
             force: env !== 'development'
         }))
-        .on('error', function(err) {
+        .on('error', function (err) {
             console.log(err);
         })
-        .pipe(plugins.autoprefixer({
+        .pipe(gulpAutoPrefixer({
             cascade: false
         }))
         .pipe(gulp.dest('stylesheets'))
-        .pipe(reload({stream: true, once: true}));
+        .pipe(browserSync.stream())
+    ;
 }
 
-gulp.task('compass', function () {
-    compass('production');
+gulp.task('compass:prod', function () {
+    return compass('production');
 });
 
 gulp.task('compass:dev', function () {
-    compass('development');
+    return compass('development');
 });
 
-gulp.task('browser-sync', function () {
-    browserSync({
+gulp.task('browser-sync', function (done) {
+    browserSync.init({
         port: 3001,
-        proxy: "127.0.0.1:3000"
+        proxy: '127.0.0.1:3000'
     });
+    done();
 });
 
-gulp.task('browser-sync:reload', function () {
-    browserSync.reload();
-});
-
-gulp.task('debug', ['compass:dev', 'browser-sync'],
-    function () {
-        gulp.watch('sass/**/*.scss', ['compass:dev']);
-    }
-);
+gulp.task('debug', gulp.series('compass:dev', 'browser-sync', function () {
+    gulp.watch('sass/**/*.scss', gulp.task('compass:dev'));
+}));
 
-gulp.task('default', ['compass']);
+gulp.task('default', gulp.series('compass:prod'));

package.json

@@ -13,14 +13,11 @@
   },
   "homepage": "https://github.com/makotokw/redmine-theme-gitmike",
   "devDependencies": {
-    "browser-sync": "^2.8.0",
-    "github-markdown-css": "^2.3.0",
-    "gulp": "^3.9.0",
-    "gulp-autoprefixer": "^2.3.1",
+    "browser-sync": "^2.26.7",
+    "github-markdown-css": "^3.0.1",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^7.0.0",
     "gulp-compass": "^2.1.0",
-    "gulp-load-plugins": "^0.10.0",
-    "gulp-plumber": "^1.0.1",
-    "gulp-ruby-sass": "^1.0.5",
-    "gulp-util": "^3.0.6"
+    "gulp-util": "^3.0.8"
   }
 }