diff --git a/gulpfile.js b/gulpfile.js
index 07c6700..377ac5b 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -14,19 +14,32 @@ 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())
@@ -34,20 +47,19 @@ const scssTask = done => {
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,7 +81,7 @@ const cleanFiles = () => {
const server = (done) => {
bSync({
server: {
- baseDir: 'dist'
+ baseDir: [output_path, './']
}
})
done()
@@ -76,20 +89,33 @@ const server = (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: '' }
- // )
- // )
- 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 ``
+ }
+ // 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'))
diff --git a/public/index.html b/public/index.html
index 039a277..ea8a510 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,15 +1,22 @@
+
skin-switch
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 5058abd..af43631 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,12 @@
+let isDefault = true;
+
function changeSkin(){
- console.log('changing ');
-}
\ No newline at end of file
+ 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)
\ No newline at end of file
diff --git a/src/theme/common.scss b/src/theme/common.scss
index 0139a58..d29d264 100644
--- a/src/theme/common.scss
+++ b/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;
\ No newline at end of file
diff --git a/src/theme/default.scss b/src/theme/default.scss
index a6155c9..d048c34 100644
--- a/src/theme/default.scss
+++ b/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;
\ No newline at end of file
+$bg-color:red;
\ No newline at end of file
diff --git a/src/theme/light.scss b/src/theme/light.scss
new file mode 100644
index 0000000..b5433a2
--- /dev/null
+++ b/src/theme/light.scss
@@ -0,0 +1 @@
+$bg-color:green;
\ No newline at end of file
diff --git a/src/views/view1.scss b/src/views/view1.scss
index ffd5843..e81c72e 100644
--- a/src/views/view1.scss
+++ b/src/views/view1.scss
@@ -1,4 +1,5 @@
.view1{
- height: 100px;
- background:green;
+ height: $size;
+ width:$size;
+ background:$bg-color;
}
\ No newline at end of file
diff --git a/src/views/view2.scss b/src/views/view2.scss
deleted file mode 100644
index 79ba484..0000000
--- a/src/views/view2.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.app{
- border-radius:10px;
- font-size:24px;
-}
-.view2{
- color:red;
- border:2px solid yellow;
- height: 100px;
-}
\ No newline at end of file
diff --git a/theme.json b/theme.json
new file mode 100644
index 0000000..7390b03
--- /dev/null
+++ b/theme.json
@@ -0,0 +1 @@
+["default","light"]
\ No newline at end of file