Update to newer gulp version

gulpfile.js

@@ -26,7 +26,7 @@ var autoprefixerOptions = {
   cascade: false
 };
 
-var stringifyOptions = ['.html', '.tpl', '.scss'];
+var stringifyOptions = ['.html', '.tpl', '.css'];
 var versionMessage = '/* Clay - https://github.com/pebble/clay - Version: ' +
                      clayPackage.version +
                      ' - Build Date: ' + new Date().toISOString() + ' */\n';
@@ -35,29 +35,34 @@ gulp.task('clean-js', function() {
   return del(['tmp/config-page.js']);
 });
 
-gulp.task('js', ['clean-js'], function() {
+function taskJs() {
   return browserify('src/scripts/config-page.js', { debug: true })
     .transform('deamdify')
     .bundle()
     .pipe(source('config-page.js'))
     .pipe(gulp.dest('./tmp/'));
-});
+}
+
+gulp.task('js', gulp.series('clean-js', taskJs));
 
 gulp.task('clean-sass', function() {
   return del(['tmp/config-page.scss']);
 });
-gulp.task('sass', ['clean-sass'], function() {
+
-  gulp.src('./src/styles/config-page.scss')
+function taskSass() {
+  return gulp.src(['./src/styles/config-page.scss', './src/styles/clay/components/*.scss'])
     .pipe(sourceMaps.init())
     .pipe(sass({
-      includePaths: sassIncludePaths
+      loadPaths: sassIncludePaths
     }).on('error', sass.logError))
     .pipe(autoprefixer(autoprefixerOptions))
     .pipe(sourceMaps.write('./'))
     .pipe(gulp.dest('tmp'));
-});
+}
 
-gulp.task('inlineHtml', ['js', 'sass'], function() {
+gulp.task('sass', gulp.series('clean-sass', taskSass));
+
+function taskInlineHtml() {
   return gulp.src('src/config-page.html')
     .pipe(inline())
     .pipe(htmlmin({
@@ -70,16 +75,18 @@ gulp.task('inlineHtml', ['js', 'sass'], function() {
       minifyCSS: true
     }))
     .pipe(gulp.dest('tmp/'));
-});
+}
 
-gulp.task('clay', ['inlineHtml'], function() {
+gulp.task('inlineHtml', gulp.series('js', 'sass', taskInlineHtml));
+
+function taskClay() {
   return browserify('index.js', {
     debug: false,
     standalone: clayPackage.name
   })
     .transform('deamdify')
     .transform(stringify(stringifyOptions))
-    .transform(autoprefixify, autoprefixerOptions)
+    //.transform(autoprefixify, autoprefixerOptions)
     .require(require.resolve('./index'), {expose: clayPackage.name})
     .exclude('message_keys')
     .bundle()
@@ -90,9 +97,11 @@ gulp.task('clay', ['inlineHtml'], function() {
     }))
     .pipe(insert.prepend(versionMessage))
     .pipe(gulp.dest('./src/js'));
-});
+}
 
-gulp.task('dev-js', ['js', 'sass'], function() {
+gulp.task('clay', gulp.series('inlineHtml', taskClay));
+
+function taskDevJs() {
   return browserify('dev/dev.js', { debug: true })
     .transform(stringify(stringifyOptions))
     .transform('deamdify')
@@ -101,12 +110,16 @@ gulp.task('dev-js', ['js', 'sass'], function() {
     .bundle()
     .pipe(source('dev.js'))
     .pipe(gulp.dest('./tmp/'));
-});
+}
 
-gulp.task('default', ['clay']);
+gulp.task('dev-js', gulp.series('js', 'sass', taskDevJs));
 
-gulp.task('dev', ['dev-js'], function() {
+gulp.task('default', gulp.series('clay'));
+
+function taskDev() {
   gulp.watch('src/styles/**/*.scss', ['sass']);
   gulp.watch(['src/scripts/**/*.js', 'src/templates/**/*.tpl'], ['js']);
   gulp.watch(['src/**', 'dev/**/*.js'], ['dev-js']);
-});
+}
+
+gulp.task('dev', gulp.series('dev-js', taskDev));

package.json

@@ -58,7 +58,7 @@
     "eslint": "^1.5.1",
     "eslint-config-pebble": "^1.2.0",
     "eslint-plugin-standard": "^1.3.1",
-    "gulp": "^3.9.0",
+    "gulp": "^4",
     "gulp-autoprefixer": "^3.1.0",
     "gulp-htmlmin": "^1.3.0",
     "gulp-inline": "0.0.15",
@@ -78,12 +78,13 @@
     "mocha": "^2.3.4",
     "postcss": "^5.0.14",
     "require-from-string": "^1.1.0",
+    "sass": "^1.94.2",
     "sinon": "^1.17.3",
     "stringify": "^3.2.0",
     "through": "^2.3.8",
     "tosource": "^1.0.0",
     "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.1.0",
+    "vinyl-source-stream": "^2.0.0",
     "watchify": "^3.7.0"
   },
   "dependencies": {}

src/scripts/components/button.js

@@ -3,7 +3,7 @@
 module.exports = {
   name: 'button',
   template: require('../../templates/components/button.tpl'),
-  style: require('../../styles/clay/components/button.scss'),
+  style: require('../../../tmp/button.css'),
   manipulator: 'button',
   defaults: {
     primary: false,

src/scripts/components/checkboxgroup.js

@@ -3,7 +3,7 @@
 module.exports = {
   name: 'checkboxgroup',
   template: require('../../templates/components/checkboxgroup.tpl'),
-  style: require('../../styles/clay/components/checkboxgroup.scss'),
+  style: require('../../../tmp/checkboxgroup.css'),
   manipulator: 'checkboxgroup',
   defaults: {
     label: '',

src/scripts/components/color.js

@@ -3,7 +3,7 @@
 module.exports = {
   name: 'color',
   template: require('../../templates/components/color.tpl'),
-  style: require('../../styles/clay/components/color.scss'),
+  style: require('../../../tmp/color.css'),
   manipulator: 'color',
   defaults: {
     label: '',

src/scripts/components/input.js

@@ -3,7 +3,7 @@
 module.exports = {
   name: 'input',
   template: require('../../templates/components/input.tpl'),
-  style: require('../../styles/clay/components/input.scss'),
+  style: require('../../../tmp/input.css'),
   manipulator: 'val',
   defaults: {
     label: '',

src/scripts/components/radiogroup.js

@@ -3,7 +3,7 @@
 module.exports = {
   name: 'radiogroup',
   template: require('../../templates/components/radiogroup.tpl'),
-  style: require('../../styles/clay/components/radiogroup.scss'),
+  style: require('../../../tmp/radiogroup.css'),
   manipulator: 'radiogroup',
   defaults: {
     label: '',

src/scripts/components/select.js

@@ -3,7 +3,7 @@
 module.exports = {
   name: 'select',
   template: require('../../templates/components/select.tpl'),
-  style: require('../../styles/clay/components/select.scss'),
+  style: require('../../../tmp/select.css'),
   manipulator: 'val',
   defaults: {
     label: '',

src/scripts/components/slider.js

@@ -3,7 +3,7 @@
 module.exports = {
   name: 'slider',
   template: require('../../templates/components/slider.tpl'),
-  style: require('../../styles/clay/components/slider.scss'),
+  style: require('../../../tmp/slider.css'),
   manipulator: 'slider',
   defaults: {
     label: '',

src/scripts/components/submit.js

@@ -3,7 +3,7 @@
 module.exports = {
   name: 'submit',
   template: require('../../templates/components/submit.tpl'),
-  style: require('../../styles/clay/components/submit.scss'),
+  style: require('../../../tmp/submit.css'),
   manipulator: 'button',
   defaults: {
     attributes: {}

src/scripts/components/toggle.js

@@ -3,7 +3,7 @@
 module.exports = {
   name: 'toggle',
   template: require('../../templates/components/toggle.tpl'),
-  style: require('../../styles/clay/components/toggle.scss'),
+  style: require('../../../tmp/toggle.css'),
   manipulator: 'checked',
   defaults: {
     label: '',