Update build dependencies and Gulpfile

Author: rosswintle

Gulpfile.js

@@ -1,38 +1,42 @@
 var gulp = require( 'gulp' );
-var sass = require( 'gulp-sass' );
+var gulpSass = require( 'gulp-sass' )(require('sass'));
 var rename = require( 'gulp-rename' );
 var cssmin = require( 'gulp-cssmin' );
 var uglify = require( 'gulp-uglify' );
 var livereload = require( 'gulp-livereload' );
 
-gulp.task( 'sass', function() {
+function sass() {
 	return gulp.src( 'assets/scss/**/*.scss' )
-		.pipe( sass().on( 'error', sass.logError ) )
+		.pipe( gulpSass.sync().on( 'error', gulpSass.logError ) )
 		.pipe( gulp.dest( 'assets/css' ) )
 		.pipe( livereload() );
-} );
+};
 
-gulp.task( 'css', [ 'sass' ], function() {
+function css () {
 	return gulp.src( [ 'assets/css/**/*.css', '!assets/css/**/*.min.css' ] )
 		.pipe( rename( { suffix: '.min' } ) )
 		.pipe( cssmin() )
 		.pipe( gulp.dest( 'assets/css' ) )
-} );
+};
 
-gulp.task( 'js', function() {
+function js () {
 	return gulp.src( [ 'assets/js/**/*.js', '!assets/js/**/*.min.js' ] )
 		.pipe( uglify( {
 			mangle: false
 		} ) )
 		.pipe( rename( { suffix: '.min' } ) )
 		.pipe( gulp.dest( 'assets/js' ) )
 		.pipe( livereload() );
-} );
+};
 
-gulp.task( 'default', [ 'css', 'js' ] );
+exports.sass = sass;
+exports.css = css;
+exports.js = js;
 
-gulp.task( 'watch', [ 'css', 'js' ], function() {
-	livereload.listen();
-	gulp.watch( [ 'assets/scss/**/*.scss' ], [ 'css' ] );
-	gulp.watch( [ 'assets/js/**/*.js' ], [ 'js' ] );
-} );
+exports.build = gulp.series( sass, css, js );
+
+exports.watch = gulp.series( sass, css, js, () => {
+        livereload.listen();
+        gulp.watch( [ 'assets/scss/**/*.scss' ], gulp.series( sass, css ) );
+        gulp.watch( [ 'assets/js/**/*.js' ], gulp.series( js ) );
+    } );

assets/css/article-promo-email.css

@@ -1,13 +1,14 @@
 #article-promo-email input[type=text] {
-  width: 100%; }
-
+  width: 100%;
+}
 #article-promo-email textarea {
   margin: 10px 0 0 0;
-  font-family: 'Helvetica', 'Arial', sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   font-size: 14px;
   line-height: 1.4;
   background-color: transparent;
   box-shadow: none;
   border: 0;
   padding: 0;
-  width: 100%; }
+  width: 100%;
+}

assets/css/social.css

@@ -1,9 +1,13 @@
 .don-king-share {
-  width: 100%; }
-  .don-king-share .share-url {
-    width: 100%; }
-    .don-king-share .share-url input {
-      width: 100%; }
+  width: 100%;
+}
+.don-king-share .share-url {
+  width: 100%;
+}
+.don-king-share .share-url input {
+  width: 100%;
+}
 
 .change-campaign {
-  padding: 10px 0 20px 0; }
+  padding: 10px 0 20px 0;
+}

assets/js/social.min.js

@@ -2,12 +2,13 @@
   "name": "wp-promoter",
   "private": true,
   "devDependencies": {
-    "gulp": "^3.9.1",
-    "gulp-rename": "^1.2.2",
-    "gulp-cssmin": "^0.2.0",
+    "gulp": "^4.0.2",
     "gulp-concat": "^2.6.1",
-    "gulp-livereload": "^4.0.1",
-    "gulp-sass": "^4.0.2",
-    "gulp-uglify": "^3.0.1"
+    "gulp-cssmin": "^0.2.0",
+    "gulp-livereload": "^4.0.2",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^5.1.0",
+    "gulp-uglify": "^3.0.2",
+    "sass": "^1.54.3"
   }
 }