From fd5d32976cfe2d83f8bf9bde340a1472c96da186 Mon Sep 17 00:00:00 2001 From: Agustin Moyano Date: Tue, 20 Oct 2020 13:31:59 -0300 Subject: [PATCH] Bug 15522: (Vue alternative) Set gulp script and Makefile.PL --- .gitignore | 1 + Makefile.PL | 19 +++++++++++++++++- gulpfile.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++---- package.json | 29 +++++++++++++++++++++++++-- 4 files changed, 98 insertions(+), 7 deletions(-) diff --git a/.gitignore b/.gitignore index c70d94a1dd..cb9c7af4b0 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ node_modules/ koha-tmpl/opac-tmpl/bootstrap/css/maps/ koha-tmpl/intranet-tmpl/prog/css/maps/ +koha-tmpl/intranet-tmpl/prog/js/built diff --git a/Makefile.PL b/Makefile.PL index b2d48ae65f..dd00d606ae 100644 --- a/Makefile.PL +++ b/Makefile.PL @@ -1832,7 +1832,24 @@ sub postamble { $env .= join("\n", map { "export __${_}__ := $config{$_}" } keys %config); } - return "$env\n"; + my $js_build_targets = <<'JS'; +.PHONY: js-build js-deps js-watch +YARN=node_modules/.bin/yarn + +$(YARN): + npm install yarn + +js-deps: $(YARN) + $(YARN) install + +js-build: $(YARN) js-deps + $(YARN) build + +js-watch: $(YARN) js-deps + $(YARN) watch +JS + + return "$env\n$js_build_targets\n"; } diff --git a/gulpfile.js b/gulpfile.js index d2164c9bb1..61564d3c6e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -10,13 +10,23 @@ const sourcemaps = require('gulp-sourcemaps'); const autoprefixer = require('gulp-autoprefixer'); const args = require('minimist')(process.argv.slice(2)); const rename = require('gulp-rename'); +const glob = require('glob'); +const path = require('path'); + +const rollupTypescript = require('@rollup/plugin-typescript'); +const rollupVue = require('rollup-plugin-vue'); +const rollup = require('rollup'); +const { nodeResolve } = require('@rollup/plugin-node-resolve'); +const commonjs = require('@rollup/plugin-commonjs'); +const replace = require('@rollup/plugin-replace'); +const rollupCss = require('rollup-plugin-css-only'); const STAFF_JS_BASE = "koha-tmpl/intranet-tmpl/prog/js"; const STAFF_CSS_BASE = "koha-tmpl/intranet-tmpl/prog/css"; const OPAC_JS_BASE = "koha-tmpl/opac-tmpl/bootstrap/js"; const OPAC_CSS_BASE = "koha-tmpl/opac-tmpl/bootstrap/css"; -if (args.view == "opac") { +if( args.view == "opac" ){ var css_base = OPAC_CSS_BASE; var js_base = OPAC_JS_BASE; } else { @@ -62,8 +72,46 @@ function build() { .pipe(dest(css_base)); } -exports.build = build; +async function vue() { + + const files = glob.sync(js_base + '/src/**/main.ts'); + + const inputs = files.reduce((prev, file) => { + prev[path.relative(js_base + '/src', file).slice(0, -3)] = file; + return prev; + }, {}); + + const bundle = await rollup.rollup({ + input: inputs, + plugins: [ + nodeResolve(), + commonjs(), + rollupVue({ + css: true, + compileTemplate: true + }), + rollupTypescript({ + typescript: require('typescript') + }), + replace({ + // alternatively, one could pass process.env.NODE_ENV or 'development` to stringify + 'process.env.NODE_ENV': JSON.stringify('production') + }) + ] + }); + + await bundle.write({ + dir: js_base + '/built', + format: 'umd', + sourcemap: true + }); + +} + +exports.build = series(build, vue); exports.css = css; -exports.default = function () { - watch(css_base + "/src/**/*.scss", series('css')); +exports.vue = vue; +exports.default = exports.watch = function () { + watch(css_base + "/src/**/*.scss", css); + watch([js_base + '/src/**/*.ts', js_base + '/src/**/*.vue'], vue); } diff --git a/package.json b/package.json index da53cab958..1204867c18 100644 --- a/package.json +++ b/package.json @@ -15,12 +15,37 @@ "gulp-rtlcss": "^1.4.1", "gulp-sass": "^3.1.0", "gulp-sourcemaps": "^2.6.1", - "minimist": "^1.2.5" + "gulp-tap": "^1.0.1", + "lodash": "^4.17.4", + "minimist": "^1.2.5", + "node-sass": "^4.14.1", + "promise-polyfill": "^6.0.2", + "react": "^16.0.0", + "react-dom": "^16.0.0", + "uglifyify": "^4.0.4", + "vinyl-source-stream": "^1.1.0", + "vue": "^3.0.0", + "whatwg-fetch": "^2.0.3" + }, + "devDependencies": { + "@rollup/plugin-commonjs": "^15.1.0", + "@rollup/plugin-multi-entry": "^4.0.0", + "@rollup/plugin-node-resolve": "^9.0.0", + "@rollup/plugin-replace": "^2.3.3", + "@rollup/plugin-typescript": "^6.0.0", + "@vue/compiler-sfc": "^3.0.0", + "glob": "^7.1.6", + "rollup": "^2.29.0", + "rollup-plugin-css-only": "^2.1.0", + "rollup-plugin-vue": "^6.0.0-beta.10", + "tslib": "^2.0.3", + "typescript": "^4.0.3" }, "scripts": { "build": "node_modules/.bin/gulp build", "css": "node_modules/.bin/gulp css", - "watch": "node_modules/.bin/gulp watch" + "watch": "node_modules/.bin/gulp watch", + "vue": "node_modules/.bin/gulp vue" }, "repository": { "type": "git", -- 2.25.0