Bug 32609: Improve yarn build commands

We had:
yarn css # Build staff css
yarn css --view opac # Build OPAC css
yarn build # Nothing, was broken
yarn watch # Nothing, was broken
yarn build_js # Build JS/Vue
yarn watch_js # Watch JS/Vue

This patch is suggesting to have something more consistent:
yarn css:build      # Build CSS for OPAC and staff (dev)
yarn css:build:prod # Build CSS for OPAC and staff (prod)
yarn css:watch      # Watch CSS for OPAC and staff (dev)
yarn js:build       # Build JS (dev)
yarn js:build:prod  # Build JS (prod)
yarn js:watch       # Watch JS (dev)
yarn build          # Same as css:build and js:build (dev)
yarn build:prod     # Same as css:build:prod and js:build:prod (prod)

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

gulpfile.js

@@ -25,11 +25,9 @@ const rename = require('gulp-rename');
 const STAFF_CSS_BASE = "koha-tmpl/intranet-tmpl/prog/css";
 const OPAC_CSS_BASE = "koha-tmpl/opac-tmpl/bootstrap/css";
 
-if (args.view == "opac") {
-    var css_base = OPAC_CSS_BASE;
-} else {
-    var css_base = STAFF_CSS_BASE;
-}
+var CSS_BASE = args.view == "opac"
+    ? OPAC_CSS_BASE
+    : STAFF_CSS_BASE;
 
 var sassOptions = {
     errLogToConsole: true,
@@ -41,7 +39,8 @@ var sassOptions = {
 }
 
 // CSS processing for development
-function css() {
+function css(css_base) {
+    css_base = css_base || CSS_BASE
     var stream = src(css_base + "/src/**/*.scss")
         .pipe(sourcemaps.init())
         .pipe(sass(sassOptions).on('error', sass.logError))
@@ -65,7 +64,8 @@ function css() {
 }
 
 // CSS processing for production
-function build() {
+function build(css_base) {
+    css_base = css_base || CSS_BASE
     var stream = src(css_base + "/src/**/*.scss")
         .pipe(sass(sassOptions).on('error', sass.logError))
         .pipe(autoprefixer())
@@ -85,6 +85,14 @@ function build() {
     return stream;
 }
 
+function opac_css(){
+    return css(OPAC_CSS_BASE);
+}
+
+function staff_css(){
+    return css(STAFF_CSS_BASE);
+}
+
 const poTasks = {
     'marc-MARC21': {
         extract: po_extract_marc_marc21,
@@ -368,13 +376,15 @@ function getLanguages () {
     return Array.from(new Set(languages));
 }
 
-exports.build = build;
-exports.css = css;
+exports.build = function(next){build(); next();};
+exports.css = function(next){css(); next();};
+exports.opac_css = opac_css;
+exports.staff_css = staff_css;
+exports.watch = function () {
+    watch(OPAC_CSS_BASE + "/src/**/*.scss", series('opac_css'));
+    watch(STAFF_CSS_BASE + "/src/**/*.scss", series('staff_css'));
+};
 
 exports['po:create'] = parallel(...poTypes.map(type => series(poTasks[type].extract, poTasks[type].create)));
 exports['po:update'] = parallel(...poTypes.map(type => series(poTasks[type].extract, poTasks[type].update)));
 exports['po:extract'] = parallel(...poTypes.map(type => poTasks[type].extract));
-
-exports.default = function () {
-    watch(css_base + "/src/**/*.scss", series('css'));
-}

package.json

@@ -40,11 +40,14 @@
     "vue-select": "4.0.0-beta.3"
   },
   "scripts": {
-    "build": "gulp build",
-    "build_js": "webpack --mode production",
-    "watch_js": "webpack --mode development --watch",
-    "css": "gulp css",
-    "watch": "gulp watch",
+    "css:build": "gulp css && gulp css --view opac",
+    "css:build:prod": "gulp build && gulp css --view opac",
+    "css:watch": "gulp watch",
+    "js:build": "webpack --mode development",
+    "js:watch": "webpack --mode development --watch",
+    "js:build:prod": "webpack --mode production",
+    "build": "yarn css:build && yarn js:build",
+    "build:prod": "yarn css:build:prod && yarn js:build:prod",
     "cypress": "cypress",
     "prettier": "prettier"
   },