fix: fix theme style bundle

gulpfile.js

@@ -14,40 +14,52 @@ const gulp = require('gulp'),
     del = require('del'),
     argv = require('yargs').argv,
     theme = process.env.npm_config_theme || 'default',
+    allTheme = require('./theme.json'),
     node_env = argv.env || 'development',
     scss_path = ['src/**/*.scss', '!node_modules'],
     output_path = 'dist',
+    output_path_js = `${output_path}/js`,
     output_path_style = `${output_path}/style`,
     output_path_style_modules = `${output_path_style}/modules/`,
     module_ext_name = `${node_env === 'production' ? '.min.css' : '.css'}`,
-    concat_theme_name = `${theme}${node_env === 'production' ? '.min' : ''}.css`;
+    concat_theme_name = (param) => `${param}${node_env === 'production' ? '.min' : ''}.css`;
 
-const scssTask = done => {
-    gulp.src([...scss_path, '!src/theme/*.scss'])
+const themeTask = done => {
+    allTheme.forEach(item => {
+        scssTask(done, item)
+    })
+    done()
+}
+
+const scssTask = (done, themeType = theme) => {
+    return bundleScss(themeType)
+}
+
+const bundleScss = (themeType) => {
+    return gulp.src([...scss_path, '!src/theme/*.scss'])
         .pipe(sourcemaps.init())
-        .on('error', scss.logError)//错误信息
-        .pipe(setGlobalScss())
+        .on('error', scss.logError)        //错误信息
+        .pipe(setGlobalScss(themeType))
         .pipe(scss())
         .pipe(gulpif(node_env === 'production', cleanCss())) // 仅在生产环境时候进行压缩
         .pipe(autoprefix())
         .pipe(rename((path) => {
             path.extname = module_ext_name
         }))
         .pipe(sourcemaps.write('./'))
-        .pipe(gulp.dest(output_path_style_modules))
+        .pipe(gulp.dest(`${output_path_style_modules}/${themeType}`))
         .pipe(filter(`**/*.css`))   //合并过滤
-        .pipe(concat(concat_theme_name))
+        .pipe(concat((concat_theme_name(themeType))))
         .pipe(sourcemaps.write('./'))
         .pipe(gulp.dest(output_path_style))
         .pipe(bSync.reload({
             stream: true
         }))
-    done()
 }
 
 // scss 全局变量注入
-const setGlobalScss = () => {
-    const resDefault = fs.readFileSync(`./src/theme/${theme}.scss`),
+const setGlobalScss = (themeType) => {
+    const resDefault = fs.readFileSync(`./src/theme/${themeType}.scss`),
         resCommon = fs.readFileSync('./src/theme/common.scss'),
         scssString = resCommon.toString() + " \n " + resDefault.toString();
     return header(scssString);
@@ -58,6 +70,7 @@ const watchPipe = done => {
     watcher.on("change", gulp.series('clean', 'scss'))
     watcher.on("add", gulp.series('clean', 'scss'))
     watcher.on("unlink", gulp.series('clean', 'scss'))
+    gulp.watch([`${output_path}/**/*`, `!${output_path}/**/*.html`], gulp.parallel('html'))
     done()
 }
 
@@ -68,28 +81,41 @@ const cleanFiles = () => {
 const server = (done) => {
     bSync({
         server: {
-            baseDir: 'dist'
+            baseDir: [output_path, './']
         }
     })
     done()
 }
 
 const injectTask = () => {
     const target = gulp.src('./public/index.html'),
-        source = gulp.src('./src/index.js', { read: false });
-    // .pipe(
-    //     inject(
-    //         gulp.src(`${output_path_style}/${concat_theme_name}`, { read: false }),
-    //         { starttag: '<!-- inject:head:{{ext}} -->' }
-    //     )
-    // )
-    return target.pipe(inject(source, { relative: true }))
+        source = gulp.src([`${output_path}/**/*.js`, `${output_path}/${theme}.css`, `!${output_path_style_modules}/**/*.css`], { read: false });
+
+    return target.pipe(
+        inject(source, {
+            transform: function (filepath) {
+                if (filepath.includes(`${theme}.css`)) {
+                    return `<link id="theme"  rel="stylesheet" type="text/css" href="${filepath}"></link>`
+                }
+                // Use the default transform as fallback:
+                return inject.transform.apply(inject.transform, arguments);
+            }
+        }, { relative: true })
+    )
         .pipe(gulp.dest(output_path));
 }
 
+const jsTask = (done) => {
+    gulp.src(`./src/**/*.js`)
+        .pipe(gulp.dest(output_path_js))
+    done();
+}
+
 gulp.task('clean', cleanFiles)
 gulp.task('watch', watchPipe)
-gulp.task('scss', scssTask)
+// gulp.task('scss', scssTask)
+gulp.task('scss', themeTask)
+gulp.task('js', jsTask)
 gulp.task('html', injectTask)
 gulp.task('server', server)
-gulp.task('default', gulp.series('clean', gulp.parallel('scss'), 'html', 'server', 'watch'))
+gulp.task('default', gulp.series('clean', gulp.parallel('scss', 'js'), 'server', 'watch'))

public/index.html

@@ -1,15 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>skin-switch</title>
+    <!-- inject:css -->
+    <!-- endinject -->
 </head>
+
 <body>
     <div class="app">
         <div class="view1"></div>
         <div class="view2"></div>
     </div>
+    <!-- inject:js -->
+    <!-- endinject -->
 </body>
+
 </html>

src/index.js

@@ -1,3 +1,12 @@
+let isDefault = true;
+
 function changeSkin(){
-    console.log('changing ');
-}
+    isDefault = !isDefault;
+    const linkTag = document.getElementById('theme');
+    linkTag.href=`/dist/style/${isDefault?'default':'light'}.css`
+}
+
+const btn = document.createElement('button');
+btn.innerText="toggle skin";
+btn.onclick = changeSkin;
+document.body.append(btn)

src/theme/common.scss

@@ -1,35 +1 @@
-//字体
-$font-family-base:Microsoft YaHei; //基础字体
-$font-size-large:24px;
-$font-size-base:14px; //基础字号
-$font-size-mini:12px;
-
-//主盒
-$z-index:999; //默认
-
-//提示状态颜色
-$success: #00cc00;
-$error: red;
-$info: #409eff;
-$before: #409eff;
-
-//bug
-$bug-type-1:red;
-$bug-type-2:orange;
-$bug-type-3:#3399ff;
-$bug-type-4:#00cc00;
-
-//文本溢出
-@mixin overflow-text($line) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: $line;
-    -webkit-box-orient: vertical;
-}
-
-@mixin light-font {
-    font-size: $font-size-mini;
-    color: $font-color-light;
-}
-
+$size:100px;

src/theme/default.scss

@@ -1,51 +1 @@
-$base-green:#a6d669;
-$base-blue:#58c8f2;
-$base-yellow:#f8d348;
-$base-red:#ff6d61;
-
-
-//背景
-$bg-gray:#F2F2F3; //灰色背景
-$bg-base:white; //白色背景
-$bg-btn:#1ED2E3; //按钮背景
-$bg-msg:#FC2D2D; //消息背景
-$pop-bg:rgba(0, 0, 0, .6); //弹窗背景
-$bg-nav-light-blue:#EEF2F8; //左侧菜单背景色
-
-$bg-base-light:#f1f2f7;
-$bg-base-alpha:rgba(102,102,102,.1);
-
-$bg-menu-dark:#2a3542;
-$bg-menu-light:#35404d;
-
-$color-act:#347BFC; //行为颜色
-//边框
-$border-color-light:#f5f5f5;
-
-$btn-color-primary:#326CFC;
-$btn-color-primary-hover:#4278FF;
-
-$btn-color-cancel:#FFFFFF;
-$btn-color-cancel-hover:#E5E8EF;
-
-$button-plain-color: #409eff;
-$button-plain-background: #ecf5ff;
-$button-plain-border-color: #b3d8ff;
-
-
-$table-bg-odd:#EEF2F8;
-$table-bg-even:white;
-$table-bg-stripe:#FAFAFA;
-
-
-$box-shadow-light:rgba(167,188,209,0.22);
-$box-shadow-dark:rgba(0,0,0,0.4);
-
-$rancher-green: #87e3ae;
-$rancher-green-bg: #daf6e6;
-
-$font-color-base:black;
-$font-color-normal:#5d5c5a;
-$font-color-light:#c6cad6;
-$font-color-blue:#46aadc;
-$font-color-msg:red;
+$bg-color:red;

src/theme/light.scss

@@ -0,0 +1 @@
+$bg-color:green;

src/views/view1.scss

@@ -1,4 +1,5 @@
 .view1{
-    height: 100px;
-    background:green;
+    height: $size;
+    width:$size;
+    background:$bg-color;
 }

theme.json

@@ -0,0 +1 @@
+["default","light"]