feat(tasks): bump up gulp to 4 (#1)

.nvmrc

@@ -1 +1 @@
-11
+16

README.md

@@ -9,7 +9,7 @@ Read [the documentation](http://doc.inkdrop.info/manual/creating-a-theme) for de
 
 ```
 npm install
-gulp build
+npm build
 ```
 
 ## Which files to edit

gulpfile.js

@@ -1,72 +1,35 @@
 /*******************************
-            Set-up
-*******************************/
+ *           Set-up
+ *******************************/
 
 var
-  gulp         = require('gulp-help')(require('gulp')),
+  gulp   = require('gulp'),
 
   // read user config to know what task to load
-  config       = require('./tasks/config/user'),
-
-  // watch changes
-  watch        = require('./tasks/watch'),
-
-  // build all files
-  build        = require('./tasks/build'),
-  buildJS      = require('./tasks/build/javascript'),
-  buildCSS     = require('./tasks/build/css'),
-  buildAssets  = require('./tasks/build/assets'),
-
-  // utility
-  clean        = require('./tasks/clean'),
-  version      = require('./tasks/version'),
-
-  // docs tasks
-  serveDocs    = require('./tasks/docs/serve'),
-  buildDocs    = require('./tasks/docs/build'),
-
-  // rtl
-  buildRTL     = require('./tasks/rtl/build'),
-  watchRTL     = require('./tasks/rtl/watch')
+  config = require('./tasks/config/user')
 ;
 
 
 /*******************************
-             Tasks
-*******************************/
+ *            Tasks
+ *******************************/
 
-gulp.task('default', false, [
-  'watch'
-]);
+require('./tasks/collections/build')(gulp);
+require('./tasks/collections/various')(gulp);
+require('./tasks/collections/install')(gulp);
 
-gulp.task('watch', 'Watch for site/theme changes', watch);
-
-gulp.task('build', 'Builds all files from source', [ 'build-css', 'build-assets' ]);
-gulp.task('build-javascript', 'Builds all javascript from source', buildJS);
-gulp.task('build-css', 'Builds all css from source', buildCSS);
-gulp.task('build-assets', 'Copies all assets from source', buildAssets);
-
-gulp.task('clean', 'Clean dist folder', clean);
-gulp.task('version', 'Displays current version of Semantic', version);
+gulp.task('default', gulp.series('watch'));
 
 /*--------------
       Docs
 ---------------*/
 
-/*
-  Lets you serve files to a local documentation instance
-  https://github.com/Semantic-Org/Semantic-UI-Docs/
-*/
-
-gulp.task('serve-docs', 'Serve file changes to SUI Docs', serveDocs);
-gulp.task('build-docs', 'Build all files and add to SUI Docs', buildDocs);
-
+require('./tasks/collections/docs')(gulp);
 
 /*--------------
       RTL
 ---------------*/
 
-if(config.rtl) {
-  gulp.task('watch-rtl', 'Watch files as RTL', watchRTL);
-  gulp.task('build-rtl', 'Build all files as RTL', buildRTL);
+if (config.rtl) {
+  require('./tasks/collections/rtl')(gulp);
 }

package.json

@@ -17,10 +17,40 @@
   "author": "Takuya Matsuyama<[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "semantic-ui": "^2.4.2"
+    "better-console": "^1.0.1",
+    "del": "^6.0.0",
+    "extend": "^3.0.2",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-chmod": "^3.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-clone": "^2.0.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-concat-css": "^3.1.0",
+    "gulp-copy": "^4.0.1",
+    "gulp-dedupe": "0.0.2",
+    "gulp-flatten": "^0.4.0",
+    "gulp-header": "^2.0.9",
+    "gulp-if": "^3.0.0",
+    "gulp-json-editor": "^2.5.6",
+    "gulp-less": "^5.0.0",
+    "gulp-notify": "^4.0.0",
+    "gulp-plumber": "^1.2.1",
+    "gulp-print": "^5.0.2",
+    "gulp-rename": "^2.0.0",
+    "gulp-replace": "^1.1.3",
+    "gulp-rtlcss": "^1.4.2",
+    "gulp-tap": "^2.0.0",
+    "gulp-uglify": "^3.0.2",
+    "gulp-watch": "^5.0.1",
+    "inquirer": "^8.1.2",
+    "mkdirp": "^1.0.4",
+    "require-dot-file": "^0.4.0",
+    "wrench-sui": "0.0.3",
+    "yamljs": "^0.3.0"
   },
   "browserslist": [
-    "Electron 7.3.2"
+    "Electron 12.0.4"
   ],
   "engines": {
     "inkdrop": "^5.x"

semantic.json

@@ -18,6 +18,6 @@
   "permission": false,
   "autoInstall": false,
   "rtl": false,
-  "components": ["reset", "site", "button", "container", "divider", "flag", "header", "icon", "image", "input", "label", "list", "loader", "placeholder", "rail", "reveal", "segment", "step", "breadcrumb", "form", "grid", "menu", "message", "table", "ad", "card", "comment", "feed", "item", "statistic", "accordion", "checkbox", "dimmer", "dropdown", "embed", "modal", "nag", "popup", "progress", "rating", "search", "shape", "sidebar", "sticky", "tab", "transition", "api", "form", "state", "visibility"],
-  "version": "2.4.2"
+  "components": ["reset", "site", "button", "container", "divider", "flag", "header", "icon", "image", "input", "label", "list", "loader", "placeholder", "rail", "reveal", "segment", "step", "breadcrumb", "form", "grid", "menu", "message", "table", "ad", "card", "comment", "feed", "item", "statistic", "accordion", "checkbox", "dimmer", "dropdown", "embed", "modal", "nag", "popup", "progress", "rating", "search", "shape", "sidebar", "sticky", "tab", "transition", "api", "form", "state", "visibility", "text"],
+  "version": "2.8.8"
 }

src/themes/default/elements/icon.variables

@@ -53,6 +53,7 @@
 @width: @iconWidth;
 @height: 1em;
 @distanceFromText: 0.25rem;
+@lineHeight: 1;
 
 
 /* Variations */

src/themes/default/globals/site.variables

@@ -390,34 +390,43 @@
   This rounds @size values to the closest pixel then expresses that value in (r)em.
   This ensures all size values round to exact pixels
 */
-@mini            : unit( round(@miniSize * @emSize) / @emSize, rem);
-@tiny            : unit( round(@tinySize * @emSize) / @emSize, rem);
-@small           : unit( round(@smallSize * @emSize) / @emSize, rem);
-@medium          : unit( round(@mediumSize * @emSize) / @emSize, rem);
-@large           : unit( round(@largeSize * @emSize) / @emSize, rem);
-@big             : unit( round(@bigSize * @emSize) / @emSize, rem);
-@huge            : unit( round(@hugeSize * @emSize) / @emSize, rem);
-@massive         : unit( round(@massiveSize * @emSize) / @emSize, rem);
+@miniRaw         : unit( (round(@miniSize * @emSize) / @emSize ));
+@tinyRaw         : unit( (round(@tinySize * @emSize) / @emSize ));
+@smallRaw        : unit( (round(@smallSize * @emSize) / @emSize ));
+@mediumRaw       : unit( (round(@mediumSize * @emSize) / @emSize ));
+@largeRaw        : unit( (round(@largeSize * @emSize) / @emSize ));
+@bigRaw          : unit( (round(@bigSize * @emSize) / @emSize ));
+@hugeRaw         : unit( (round(@hugeSize * @emSize) / @emSize ));
+@massiveRaw      : unit( (round(@massiveSize * @emSize) / @emSize ));
+
+@mini            : unit( @miniRaw, rem);
+@tiny            : unit( @tinyRaw, rem);
+@small           : unit( @smallRaw, rem);
+@medium          : unit( @mediumRaw, rem);
+@large           : unit( @largeRaw, rem);
+@big             : unit( @bigRaw, rem);
+@huge            : unit( @hugeRaw, rem);
+@massive         : unit( @massiveRaw, rem);
 
 /* em */
-@relativeMini    : unit( round(@miniSize * @emSize) / @emSize, em);
-@relativeTiny    : unit( round(@tinySize * @emSize) / @emSize, em);
-@relativeSmall   : unit( round(@smallSize * @emSize) / @emSize, em);
-@relativeMedium  : unit( round(@mediumSize * @emSize) / @emSize, em);
-@relativeLarge   : unit( round(@largeSize * @emSize) / @emSize, em);
-@relativeBig     : unit( round(@bigSize * @emSize) / @emSize, em);
-@relativeHuge    : unit( round(@hugeSize * @emSize) / @emSize, em);
-@relativeMassive : unit( round(@massiveSize * @emSize) / @emSize, em);
+@relativeMini    : unit( @miniRaw, em);
+@relativeTiny    : unit( @tinyRaw, em);
+@relativeSmall   : unit( @smallRaw, em);
+@relativeMedium  : unit( @mediumRaw, em);
+@relativeLarge   : unit( @largeRaw, em);
+@relativeBig     : unit( @bigRaw, em);
+@relativeHuge    : unit( @hugeRaw, em);
+@relativeMassive : unit( @massiveRaw, em);
 
 /* rem */
-@absoluteMini    : unit( round(@miniSize * @emSize) / @emSize, rem);
-@absoluteTiny    : unit( round(@tinySize * @emSize) / @emSize, rem);
-@absoluteSmall   : unit( round(@smallSize * @emSize) / @emSize, rem);
-@absoluteMedium  : unit( round(@mediumSize * @emSize) / @emSize, rem);
-@absoluteLarge   : unit( round(@largeSize * @emSize) / @emSize, rem);
-@absoluteBig     : unit( round(@bigSize * @emSize) / @emSize, rem);
-@absoluteHuge    : unit( round(@hugeSize * @emSize) / @emSize, rem);
-@absoluteMassive : unit( round(@massiveSize * @emSize) / @emSize, rem);
+@absoluteMini    : unit( @miniRaw, rem);
+@absoluteTiny    : unit( @tinyRaw, rem);
+@absoluteSmall   : unit( @smallRaw, rem);
+@absoluteMedium  : unit( @mediumRaw, rem);
+@absoluteLarge   : unit( @largeRaw, rem);
+@absoluteBig     : unit( @bigRaw, rem);
+@absoluteHuge    : unit( @hugeRaw, rem);
+@absoluteMassive : unit( @massiveRaw, rem);
 
 /*-------------------
        Icons
@@ -502,10 +511,10 @@
 
 /* Used to match floats with text */
 @lineHeightOffset       : ((@lineHeight - 1em) / 2);
-@headerLineHeightOffset : (@headerLineHeight - 1em) / 2;
+@headerLineHeightOffset : ((@headerLineHeight - 1em) / 2);
 
 /* Header Spacing */
-@headerTopMargin    : ~"calc(2rem - "@headerLineHeightOffset~")";
+@headerTopMargin    : e(%("calc(2rem - %d)", @headerLineHeightOffset));
 @headerBottomMargin : 1rem;
 @headerMargin       : @headerTopMargin 0em @headerBottomMargin;
 

src/themes/default/modules/checkbox.variables

@@ -114,7 +114,7 @@
 @sliderLineWidth: 3.5rem;
 @sliderTransitionDuration: 0.3s;
 
-@sliderHandleOffset: (1rem - @sliderHandleSize) / 2;
+@sliderHandleOffset: ((1rem - @sliderHandleSize) / 2);
 @sliderHandleTransition: left @sliderTransitionDuration @defaultEasing;
 
 @sliderWidth: @sliderLineWidth;

src/themes/default/modules/dropdown.variables

@@ -96,7 +96,7 @@
 
 /* Menu Image */
 @menuImageMaxHeight: 2em;
-@menuImageVerticalMargin: -(@menuImageMaxHeight - 1em) / 2;
+@menuImageVerticalMargin: (-(@menuImageMaxHeight - 1em) / 2);
 
 /* Item Sub-Element */
 @itemElementFloat: none;
@@ -162,7 +162,7 @@
 @selectionIconZIndex: 3;
 @selectionIconHitbox: @selectionVerticalPadding;
 @selectionIconMargin: -@selectionIconHitbox;
-@selectionIconPadding: @selectionIconHitbox / @dropdownIconSize;
+@selectionIconPadding: (@selectionIconHitbox / @dropdownIconSize);
 @selectionIconTransition: opacity @defaultDuration @defaultEasing;
 
 @selectionMenuBorderRadius: 0em 0em @borderRadius @borderRadius;

src/themes/default/modules/modal.variables

@@ -19,7 +19,7 @@
 
 @closeHitbox: 2.25rem;
 @closeDistance: 0.25rem;
-@closeHitBoxOffset: (@closeHitbox - 1rem) / 2;
+@closeHitBoxOffset: ((@closeHitbox - 1rem) / 2);
 @closePadding: @closeHitBoxOffset 0rem 0rem 0rem;
 @closeTop: -(@closeDistance + @closeHitbox);
 @closeRight: -(@closeDistance + @closeHitbox);

src/themes/default/views/card.variables

@@ -73,7 +73,7 @@
 @headerMargin: '';
 @headerFontWeight: @bold;
 @headerFontSize: @relativeBig;
-@headerLineHeightOffset: -(@lineHeight - 1em) / 2;
+@headerLineHeightOffset: (-(@lineHeight - 1em) / 2);
 @headerColor: @darkTextColor;
 
 /* Metadata */