From 4dad63ea90b5c822a9f66886ed456ba9a5eaf324 Mon Sep 17 00:00:00 2001 From: Stasia Michalska Date: Fri, 12 Dec 2025 16:46:12 +0100 Subject: [PATCH] Update to newer gulp version --- gulpfile.js | 47 ++++++++++++++++--------- package.json | 5 +-- src/scripts/components/button.js | 2 +- src/scripts/components/checkboxgroup.js | 2 +- src/scripts/components/color.js | 2 +- src/scripts/components/input.js | 2 +- src/scripts/components/radiogroup.js | 2 +- src/scripts/components/select.js | 2 +- src/scripts/components/slider.js | 2 +- src/scripts/components/submit.js | 2 +- src/scripts/components/toggle.js | 2 +- 11 files changed, 42 insertions(+), 28 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 9557101..068c748 100755 --- a/gulpfile.js +++ b/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)); diff --git a/package.json b/package.json index de1e462..910db8a 100644 --- a/package.json +++ b/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": {} diff --git a/src/scripts/components/button.js b/src/scripts/components/button.js index 64fc65c..9c56ab2 100644 --- a/src/scripts/components/button.js +++ b/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, diff --git a/src/scripts/components/checkboxgroup.js b/src/scripts/components/checkboxgroup.js index 8c999c4..78a312a 100644 --- a/src/scripts/components/checkboxgroup.js +++ b/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: '', diff --git a/src/scripts/components/color.js b/src/scripts/components/color.js index fa7e20e..5773e4c 100644 --- a/src/scripts/components/color.js +++ b/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: '', diff --git a/src/scripts/components/input.js b/src/scripts/components/input.js index 45fce5f..23e3d6b 100644 --- a/src/scripts/components/input.js +++ b/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: '', diff --git a/src/scripts/components/radiogroup.js b/src/scripts/components/radiogroup.js index 5cd436b..c3f7642 100644 --- a/src/scripts/components/radiogroup.js +++ b/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: '', diff --git a/src/scripts/components/select.js b/src/scripts/components/select.js index 09be191..e4b448b 100644 --- a/src/scripts/components/select.js +++ b/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: '', diff --git a/src/scripts/components/slider.js b/src/scripts/components/slider.js index d15ad6b..c064eb5 100644 --- a/src/scripts/components/slider.js +++ b/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: '', diff --git a/src/scripts/components/submit.js b/src/scripts/components/submit.js index 85d624e..e333fca 100644 --- a/src/scripts/components/submit.js +++ b/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: {} diff --git a/src/scripts/components/toggle.js b/src/scripts/components/toggle.js index ca4eace..2e2f2b1 100644 --- a/src/scripts/components/toggle.js +++ b/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: '',