build(gulp): gulpfile,index.html,pack js css

gulpfile change,index.html refrence js and css change,change any file will refresh browser automaic

BREAKING CHANGE: demo index.html's js and css refrence change

gulpfile.js

@@ -1,43 +1,45 @@
 const gulp = require('gulp');
-// gulp 核心方法
+// gulp core function
 const { src, dest, series, parallel, watch } = require('gulp');
-// gulp压缩js
+// gulp compress js
 const uglify = require('gulp-uglify');
-// gulp判断
+// gulp judgment
 const gulpif = require('gulp-if');
-// gulp压缩css
+// gulp compress css
 const cleanCSS = require('gulp-clean-css');
-// 删除文件
+// Delete Files
 const del = require('delete');
-// 实时刷新浏览器
+// Refresh the browser in real time
 const browserSync = require('browser-sync').create();
 const reload = browserSync.reload;
-// 文件合并
+// According to html reference, files are merged
-const useref = require('gulp-useref');
+// const useref = require('gulp-useref');
-
+// File merge
-// rollup打包，处理es6模块
+const concat = require('gulp-concat');
+// rollup packaging, processing es6 modules
 const { rollup } = require('rollup');
-// rollup寻找node_modules模块
+// rollup looks for node_modules module
 const { nodeResolve } = require('@rollup/plugin-node-resolve');
-// rollup把commonjs模块转化为es6模块
+// rollup converts commonjs module to es6 module
 const commonjs = require('@rollup/plugin-commonjs');
-// rollup代码压缩
+// rollup code compression
 const terser = require('rollup-plugin-terser').terser;
 // rollup babel plugin, support the latest ES grammar
 const babel = require('@rollup/plugin-babel').default;
-// 区分开发与生产环境
+// Distinguish development and production environments
-const production = !process.env.ROLLUP_WATCH;
+const production = process.env.NODE_ENV === 'production' ? true : false;
 
-// uglify js压缩配置 https://github.com/mishoo/UglifyJS#minify-options
+// uglify js Compression configuration https://github.com/mishoo/UglifyJS#minify-options
 const uglifyOptions = {
     compress: {
         drop_console: true
     }
 }
 
+// babel config
 const babelConfig = {
     babelHelpers: 'bundled',
-    exclude: 'node_modules/**', // 只编译我们的源代码
+    exclude: 'node_modules/**', // Only compile our source code
     plugins: [
     ],
     presets: [
@@ -45,37 +47,108 @@ const babelConfig = {
     ]
 };
 
+// file handler paths
+const paths = {
+    // static resources,contains index.html, fonts and images,and extension plugins dependency
+    staticHtml: ['src/*.html'],
+    staticFonts: ['src/fonts/**'],
+    staticImages: ['src/plugins/images/*.png'],
+    staticExpendPlugins: ['src/expendPlugins/**', '!src/expendPlugins/**/plugin.js'],
+    staticDemoData: ['src/demoData/*.js'],
+    staticCssImages: ['src/css/**','!src/css/*.css'],
+
+    // static resources dest
+    destStaticHtml: ['dist'],
+    destStaticFonts: ['dist/fonts'],
+    destStaticImages: ['dist/plugins/images'],
+    destStaticExpendPlugins: ['dist/expendPlugins'],
+    destStaticDemoData: ['dist/demoData'],
+    destStaticCssImages: ['dist/css'],
+
+    //core es module
+    core: ['src/**/*.js','!src/demoData/*.js','src/expendPlugins/**/plugin.js','!src/plugins/js/*.js'], 
+
+     //plugins src
+    pluginsCss: ['src/plugins/css/*.css'],
+    plugins: ['src/plugins/*.css'],
+    css:['src/css/*.css'],
+    pluginsJs:[
+        'src/plugins/js/jquery.min.js',
+        'src/plugins/js/clipboard.min.js',
+        'src/plugins/js/spectrum.min.js',
+        'src/plugins/js/jquery-ui.min.js',
+        'src/plugins/js/jquery.mousewheel.min.js',
+        'src/plugins/js/moment.min.js',
+        'src/plugins/js/moment-timezone-with-data.min.js',
+        'src/plugins/js/moment-msdate.js',
+        'src/plugins/js/numeral.min.js',
+        'src/plugins/js/html2canvas.min.js',
+        'src/plugins/js/pako.min.js',
+        'src/plugins/js/localforage.min.js',
+        'src/plugins/js/lodash.min.js',
+        'src/plugins/js/daterangepicker.js',
+        'src/plugins/js/jstat.min.js'
+    ],
 
-// 清除dist目录
+    //plugins concat
-function clean() {
+    concatPluginsCss: 'pluginsCss.css',
-    return del(['dist']);
+    concatPlugins: 'plugins.css',
-}
+    concatCss: 'luckysheet.css',
+    concatPluginsJs: 'plugin.js',
     
-//监听文件+重载
+    //plugins dest
-function watchReload() {
+    destPluginsCss: ['dist/plugins/css'],
-    core();
+    destPlugins: ['dist/plugins'],
-    serve();
+    destCss: ['dist/css'],
-    const watcher = watch(['src/**']);
+    destPluginsJs: ['dist/plugins/js'],
 
-    // 多次刷新节流
+    // Package directory
-    let reloadTimer = null;
+    dist: 'dist',
-    watcher.on('change', function (path, stats) {
+};
 
+// Clear the dist directory
+function clean() {
+    return del([paths.dist]);
+}
 
-        if (reloadTimer !== null) {
+// Static server
-            clearTimeout(reloadTimer);
+function serve(done) {
-            return;
+    browserSync.init({
+        server: {
+            baseDir: paths.dist
         }
-        reloadTimer = setTimeout(() => {
+    }, done)
+}
+
+// Monitoring file changes
+function watcher(done) {
+    watch(paths.core,{ delay: 500 }, series(core, reloadBrowser));
+
+    // watch plugins and css
+    watch(paths.pluginsCss,{ delay: 500 }, series(pluginsCss, reloadBrowser));
+    watch(paths.plugins,{ delay: 500 }, series(plugins, reloadBrowser));
+    watch(paths.css,{ delay: 500 }, series(css, reloadBrowser));
+    watch(paths.pluginsJs,{ delay: 500 }, series(pluginsJs, reloadBrowser));
+
+    // watch static
+    watch(paths.staticHtml,{ delay: 500 }, series(copyStaticHtml, reloadBrowser));
+    watch(paths.staticFonts,{ delay: 500 }, series(copyStaticFonts, reloadBrowser));
+    watch(paths.staticImages,{ delay: 500 }, series(copyStaticImages, reloadBrowser));
+    watch(paths.staticExpendPlugins,{ delay: 500 }, series(copyStaticExpendPlugins, reloadBrowser));
+    watch(paths.staticDemoData,{ delay: 500 }, series(copyStaticDemoData, reloadBrowser));
+    watch(paths.staticCssImages,{ delay: 500 }, series(copyStaticCssImages, reloadBrowser));
+
+    done();
+}
+
+// Refresh browser
+function reloadBrowser(done) {
     reload();
-            core();
-            reloadTimer = null;
-        }, 500);
 
-    });
+    done();
 }
 
-//打包核心代码
+//Package the core code
 async function core() {
     const bundle = await rollup({
         input: 'src/index.js',
@@ -87,57 +160,88 @@ async function core() {
             // 	extract: true,
             // 	// minimize: isProductionEnv,
             // }),
-            // production && terser(), // minify, but only in production
+            production && terser(), // minify, but only in production
             babel(babelConfig)
         ],
     });
 
-    return bundle.write({
+    bundle.write({
-        file: 'dist/luckysheet.js',
+        file: 'dist/luckysheet.umd.js',
         format: 'umd',
         name: 'luckysheet',
         sourcemap: true
     });
+
+    if(production){
+        bundle.write({
+            file: 'dist/luckysheet.esm.js',
+            format: 'esm',
+            name: 'luckysheet',
+            sourcemap: true
+        });
+    }
+    
 }
 
-// 打包js
+// According to the build tag in html, package js and css
-function js() {
+function pluginsCss() {
-    return src(['src/**/*.html', '!src/luckysheet-core.js','!src/luckysheet-function.js','!src/luckysheet-chart.js'])
+    return src(paths.pluginsCss)
-        .pipe(useref(), function () {
+        .pipe(concat(paths.concatPluginsCss))
-            return vinylPaths(del)
+        .pipe(gulpif(production, cleanCSS()))
-        })
+        .pipe(dest(paths.destPluginsCss))
-        .pipe(gulpif(isJavaScript, uglify(uglifyOptions)))
+    
-        .pipe(gulpif(isCss, cleanCSS()))
-        .pipe(dest('dist/'))
 }
-// 打包其他文件
+
-function otherFile() {
+function plugins() {
-    return src(['src/**', '!src/**/*.html', '!src/**/*.js', '!src/**/*.css', '!src/luckysheet-core.js','!src/luckysheet-function.js','!src/luckysheet-chart.js'])
+    return src(paths.plugins)
-        .pipe(dest('dist/'))
+        .pipe(concat(paths.concatPlugins))
+        .pipe(gulpif(production, cleanCSS()))
+        .pipe(dest(paths.destPlugins));
 }
 
-// 静态服务器
+function css() {
-function serve() {
+    return  src(paths.css)
-    browserSync.init({
+        .pipe(concat(paths.concatCss))
-        server: {
+        .pipe(gulpif(production, cleanCSS()))
-            baseDir: "./"
+        .pipe(dest(paths.destCss));
-        }
-    });
 }
 
-// 判断文件的扩展名是否是 '.js' , 且需要为未压缩过的js
+function pluginsJs() {
-function isJavaScript(file) {
+    return  src(paths.pluginsJs)
-    return file.extname === '.js';
+        .pipe(concat(paths.concatPluginsJs))
+        .pipe(gulpif(production, uglify(uglifyOptions)))
+        .pipe(dest(paths.destPluginsJs));
 }
 
-// 判断文件的扩展名是否是 '.css' , 且需要为未压缩过的css
+// Copy static resources
-function isCss(file) {
+function copyStaticHtml(){
-    return file.extname === '.css';
+    return src(paths.staticHtml)
+        .pipe(dest(paths.destStaticHtml));
+}
+function copyStaticFonts(){
+    return src(paths.staticFonts)
+        .pipe(dest(paths.destStaticFonts));
+}
+function copyStaticImages(){
+    return src(paths.staticImages)
+        .pipe(dest(paths.destStaticImages));
+}
+function copyStaticExpendPlugins(){
+    return src(paths.staticExpendPlugins)
+        .pipe(dest(paths.destStaticExpendPlugins));
+}
+function copyStaticDemoData(){
+    return src(paths.staticDemoData)
+        .pipe(dest(paths.destStaticDemoData));
+}
+function copyStaticCssImages(){
+    return src(paths.staticCssImages)
+        .pipe(dest(paths.destStaticCssImages));
 }
 
-const build = series(clean, parallel(js, otherFile, core));
+const dev = series(clean, parallel(pluginsCss, plugins, css, pluginsJs, copyStaticHtml, copyStaticFonts, copyStaticImages, copyStaticExpendPlugins, copyStaticDemoData, copyStaticCssImages, core), watcher, serve);
-const dev = watchReload;
+const build = series(clean, parallel(pluginsCss, plugins, css, pluginsJs, copyStaticHtml, copyStaticFonts, copyStaticImages, copyStaticExpendPlugins, copyStaticDemoData, copyStaticCssImages, core));
 
-exports.build = build;
 exports.dev = dev;
-exports.default = build;
+exports.build = build;
+exports.default = dev;

index.html

@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head lang='zh'>
-	<meta charset='utf-8'>
-	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta name="renderer" content="webkit" />
-	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
-	<title>Luckysheet</title>
-
-	<!-- build:css plugins/css/pluginsCss.min.css -->
-	<link rel='stylesheet' href='./src/plugins/css/spectrum.min.css' />
-	<link rel="stylesheet" href="./src/plugins/css/daterangepicker.css">
-	<!-- endbuild -->
-
-	<!-- build:css plugins/plugins.min.css -->
-	<link rel="stylesheet" href="./src/plugins/font-awesome.min.css" />
-	<link rel='stylesheet' href='./src/plugins/jquery-ui.min.css' />
-	<link rel='stylesheet' href='./src/plugins/jquery-ui.theme.min.css' />
-	<!-- endbuild -->
-
-	<!-- build:css css/main.min.css -->
-	<link rel="stylesheet" href="./src/css/luckysheet-core.css" />
-	<!-- endbuild -->
-
-	<!-- build:js plugins/js/plugin.min.js -->
-	<script src="./src/plugins/js/jquery.min.js"></script>
-	<script src="./src/plugins/js/clipboard.min.js"></script>
-	<script src='./src/plugins/js/spectrum.min.js'></script>
-	<script src='./src/plugins/js/jquery-ui.min.js'></script>
-	<script src="./src/plugins/js/jquery.mousewheel.min.js"></script>
-	<script src="./src/plugins/js/numeral.min.js"></script>
-	<script src="./src/plugins/js/moment.min.js"></script>
-	<script src="./src/plugins/js/moment-timezone-with-data.min.js"></script>
-	<script src="./src/plugins/js/moment-msdate.js"></script>
-	<script src="./src/plugins/js/html2canvas.min.js"></script>
-	<script src="./src/plugins/js/pako.min.js"></script>
-	<script src="./src/plugins/js/localforage.min.js"></script>
-	<script src="./src/plugins/js/lodash.min.js"></script>
-	<script src="./src/plugins/js/daterangepicker.js"></script>
-	<script src="./src/plugins/js/jstat.min.js"></script>
-	<!-- endbuild -->
-
-	<!-- rollup luckysheet.js -->
-	<script src="./dist/luckysheet.js"></script>
-</head>
-
-<body>
-	<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
-	<script type="module">
-		import sheetFormula from './demoData/sheetFormula.js'
-		import sheetCell from './demoData/sheetCell.js'
-		import sheetConditionFormat from './demoData/sheetConditionFormat.js'
-		import sheetTable from './demoData/sheetTable.js'
-		import sheetComment from './demoData/sheetComment.js'
-		import sheetPivotTableData from './demoData/sheetPivotTableData.js'
-		import sheetPivotTable from './demoData/sheetPivotTable.js'
-		$(function () {
-
-			luckysheet.create({
-				container: 'luckysheet',
-				lang: 'zh',
-				plugins: ['chart'],
-				data: [sheetCell,sheetFormula,sheetConditionFormat,sheetTable,sheetComment,sheetPivotTableData,sheetPivotTable]
-			})
-
-		})
-	</script>
-</body>
-
-</html>

package.json

@@ -13,9 +13,11 @@
     "@rollup/plugin-node-resolve": "^8.0.1",
     "browser-sync": "^2.26.7",
     "commitizen": "^4.1.2",
+    "cross-env": "^7.0.2",
     "delete": "^1.1.0",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
     "gulp-if": "^3.0.0",
     "gulp-uglify": "^3.0.2",
     "gulp-useref": "^4.0.1",
@@ -26,8 +28,8 @@
   },
   "dependencies": {},
   "scripts": {
-    "build": "gulp build",
+    "build": "cross-env NODE_ENV=production gulp build",
-    "dev": "gulp dev",
+    "dev": "cross-env NODE_ENV=development gulp dev",
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs",
     "commit": "git-cz",

src/expendPlugins/chart/plugin.js

@@ -5,12 +5,12 @@ const dependScripts = [
     'https://cdn.jsdelivr.net/npm/vue@2.6.11',
     'https://unpkg.com/vuex@3.4.0',
     'https://unpkg.com/element-ui/lib/index.js',
-    './src/expendPlugins/chart/chartmix.umd.js'
+    'expendPlugins/chart/chartmix.umd.js'
 ]
 
 const dependLinks = [
     'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
-    './src/expendPlugins/chart/chartmix.css'
+    'expendPlugins/chart/chartmix.css'
 ]
 
 // Initialize the chart component

src/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head lang='zh'>
+	<meta charset='utf-8'>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="renderer" content="webkit" />
+	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
+	<title>Luckysheet</title>
+
+	<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
+	<link rel='stylesheet' href='./plugins/plugins.css' />
+	<link rel='stylesheet' href='./css/luckysheet.css' />
+	<script src="./plugins/js/plugin.js"></script>
+
+	<!-- rollup luckysheet.js -->
+	<script src="./luckysheet.umd.js"></script>
+</head>
+
+<body>
+	<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
+	<script type="module">
+		import sheetFormula from './demoData/sheetFormula.js'
+		import sheetCell from './demoData/sheetCell.js'
+		import sheetConditionFormat from './demoData/sheetConditionFormat.js'
+		import sheetTable from './demoData/sheetTable.js'
+		import sheetComment from './demoData/sheetComment.js'
+		import sheetPivotTableData from './demoData/sheetPivotTableData.js'
+		import sheetPivotTable from './demoData/sheetPivotTable.js'
+		$(function () {
+
+			luckysheet.create({
+				container: 'luckysheet',
+				lang: 'zh',
+				plugins: ['chart'],
+				data: [sheetCell,sheetFormula,sheetConditionFormat,sheetTable,sheetComment,sheetPivotTableData,sheetPivotTable]
+			})
+
+		})
+	</script>
+</body>
+
+</html>