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));