Merge pull request #363 from kaola-fed/feature_cssRefactoring_20180326

nek-ui 2.0

.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["es2015", "stage-2"],
+    "plugins": ["transform-runtime"]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc

@@ -33,6 +33,7 @@
     "File": true,
     "XMLHttpRequest": true,
     "location": true,
-    "fetch": true
+    "fetch": true,
+    "ResizeObserver": true
   }
-}
+}

.gitignore

@@ -9,7 +9,7 @@ test/
 dist/
 
 # Auto generate
-src/mcss/components.mcss
+src/scss/components.scss
 
 # doc
 db.json
@@ -22,4 +22,4 @@ doc/source/components/*
 
 dist.zip
 
-.history
+.history

.travis.yml

@@ -21,9 +21,9 @@ before_script:
 
 script:
 - npm run lint
-- gulp dist
-- gulp gen-doc
-- gulp copy-oldDoc
+- gulp --gulpfile build/gulpfile.js dist
+- gulp --gulpfile build/gulpfile.js gen-doc
+- gulp --gulpfile build/gulpfile.js copy-oldDoc
 
 after_success:
 - mkdir .deploy

.vscode/launch.json

@@ -0,0 +1,19 @@
+{
+    // 使用 IntelliSense 了解相关属性。
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "启动程序",
+            "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
+            "args": [
+                "--gulpfile=build/gulpfile.js",
+                "watch",
+                "--dev"
+            ]
+        }
+    ]
+}

build/gulpfile.js

@@ -0,0 +1,197 @@
+const gulp = require('gulp');
+
+const webpack = require('webpack-stream');
+const webpackConfig = require('../build/webpack.config');
+const rimraf = require('rimraf');
+const rename = require('gulp-rename');
+const uglify = require('gulp-uglify');
+const ignore = require('gulp-ignore');
+const minifycss = require('gulp-clean-css');
+const sequence = require('run-sequence');
+const all = require('gulp-all');
+const glob = require('glob');
+const path = require('path');
+const Hexo = require('hexo');
+const fs = require('fs');
+const argv = require('yargs').argv;
+const doc = require('../doc/source/doc');
+const postcss = require('gulp-postcss');
+const sass = require('gulp-sass');
+
+const browserSync = require('browser-sync').create();
+
+const reload = browserSync.reload;
+
+const postcssConfig = require('../build/postcss.config');
+
+gulp.task('dist-clean', (cb) => {
+  rimraf('{../dist,../doc/public}', () => {
+    rimraf('../doc/source/components/*_.md', cb);
+  });
+});
+
+gulp.task('dist-copy', () => all(
+    gulp.src(path.join(__dirname, '../src/fonts/**')).pipe(gulp.dest(path.join(__dirname, '../dist/fonts'))),
+    gulp.src([
+      path.join(__dirname, '../node_modules/regularjs/dist/regular.min.js'),
+      path.join(__dirname, '../node_modules/regularjs/dist/regular.js'),
+    ]).pipe(gulp.dest(path.join(__dirname, '../dist/vendor')))));
+
+gulp.task('dist-js', () => gulp.src(path.join(__dirname, '../src/js/index.js'))
+    .pipe(webpack(webpackConfig))
+    .pipe(gulp.dest(path.join(__dirname, '../dist/js')))
+    .pipe(ignore.exclude('*.js.map'))
+    .pipe(rename({
+      suffix: '.min',
+    }))
+    .pipe(uglify())
+    .pipe(gulp.dest(path.join(__dirname, '../dist/js'))));
+
+
+gulp.task('dist-css', () => {
+  gulp.src(path.join(__dirname, '../src/scss/index.scss'))
+        .pipe(sass().on('error', sass.logError))
+        .pipe(postcss(postcssConfig.plugins))
+        .pipe(rename('nek-ui.default.css'))
+        .pipe(gulp.dest(path.join(__dirname, '../dist/css')))
+        .pipe(rename({
+          suffix: '.min',
+        }))
+        .pipe(minifycss())
+        .pipe(gulp.dest(path.join(__dirname, '../dist/css')));
+});
+
+gulp.task('gen-css', (cb) => {
+  glob(path.join(__dirname, '../src/js/components/**/**/*.scss'), (er, files) => {
+    let out = '';
+    files.forEach((d) => {
+      // if (d.indexOf('KLButton') !== -1) {
+      out += `@import "${d}";\n`;
+      // }
+    });
+    fs.writeFileSync(path.join(__dirname, '../src/scss/components.scss'), out);
+    cb();
+  });
+});
+
+gulp.task('gen-doc', (cb) => {
+  const hexo = new Hexo(path.join(__dirname, '../doc'), {
+    dev: argv.dev,
+  });
+  hexo.extend.filter.register('after_post_render', (data) => {
+    let md = data.content;
+    md = md.replace(/<!-- demo_start -->/gim, '<div class="grid-item" markdown="1">');
+    md = md.replace(/<!-- demo_end -->/gim, '</div>');
+    data.content = md;
+    return data;
+  });
+
+  doc(argv.dev, () => {
+    hexo.init().then(() => {
+      const option = argv.dev ? {
+        watch: true,
+      } : {};
+      hexo.call('generate', option, cb);
+    });
+  });
+});
+
+gulp.task('dist', (done) => {
+  sequence('dist-clean', 'gen-css', ['dist-copy', 'dist-js', 'dist-css'], done);
+});
+
+gulp.task('reload', () => {
+  reload();
+});
+
+gulp.task('default', (done) => {
+  sequence('dist', 'gen-doc', 'reload', done);
+});
+
+gulp.task('default-doc', (done) => {
+  sequence('gen-doc', 'reload', done);
+});
+
+gulp.task('server', ['default'], () => {
+  browserSync.init({
+    server: {
+      baseDir: ['../doc/public', '../dist'],
+    },
+    browser: 'default',
+    ghostMode: false,
+    reloadDelay: 1000,
+    cors: true,
+    port: 8089,
+  });
+});
+
+gulp.task('watch', ['default', 'server'], () => {
+  gulp.watch(['../src/**/*'], ['default']);
+});
+
+/* 把v0.5版本的文档copy到pulic目录下 */
+gulp.task('copy-oldDoc', () => gulp.src(path.join(__dirname, '../doc/v0.5/**')).pipe(gulp.dest(path.join(__dirname, '../doc/public/v0.5'))));
+
+
+/* 本地开发配置环境 */
+gulp.task('dev-server', ['default-dev'], () => {
+  browserSync.init({
+    server: {
+      baseDir: ['../examples', '../dist'],
+    },
+    browser: 'default',
+    ghostMode: false,
+    reloadDelay: 1000,
+    cors: true,
+    port: 8080,
+  });
+});
+
+gulp.task('default-dev', (done) => {
+  sequence('dist', 'reload', done);
+});
+
+gulp.task('new', ['dev-server'], () => {
+  const devHTML = `<!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <title>nek-ui</title>
+        <meta charset="utf-8">
+        <!--  nek-ui -->
+        <link href="//localhost:8080/css/nek-ui.default.css" rel='stylesheet' type='text/css'>
+        <style type="text/css">
+            #app {
+                margin: 100px;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="app">
+
+        </div>
+        <script src="//localhost:8080/vendor/regular.js"></script>
+        <script src="//localhost:8080/js/nek-ui.js"></script>
+        <script>
+            new NEKUI.Component({
+                template: '<kl-date /><kl-drop />',
+            }).$inject('#app');
+        </script>
+    </body>
+
+    </html>`;
+  fs.readFile('../examples/index.html', (err, buffer) => {
+    if (err) {
+      return console.error(err);
+    }
+    if (!buffer) {
+      fs.writeFile('../examples/index.html', devHTML, (error) => {
+        if (error) {
+          return console.error(error);
+        }
+        console.log('数据写入成功！');
+      });
+    }
+  });
+  gulp.watch(['../src/**/*'], ['default-dev']);
+});

build/postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-salad')({
+      browsers: ['ie > 6', 'last 2 versions'],
+      features: {
+        autoprefixer: {
+          remove: false,
+        },
+      },
+    }),
+  ],
+};

build/webpack.config.js

@@ -0,0 +1,77 @@
+const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const extractCSS = new ExtractTextPlugin({
+  filename: 'demo.css',
+});
+
+module.exports = {
+  output: {
+    filename: 'nek-ui.js',
+    library: 'NEKUI',
+    libraryTarget: 'umd',
+  },
+  externals: {
+    regularjs: {
+      root: 'Regular',
+      amd: 'Regular',
+      commonjs: 'regularjs',
+      commonjs2: 'regularjs',
+    },
+  },
+  module: {
+    rules: [{
+      test: /\.js$/,
+      loader: 'babel-loader',
+      exclude: /(node_modules|bower_components)/,
+                // loader: "babel-loader",
+    },
+    {
+      test: /\.css$/,
+      use: [{
+        loader: 'css-loader',
+        options: {
+          minimize: false,
+          sourceMap: true,
+        },
+      },
+      {
+        loader: 'postcss-loader',
+        options: {
+          config: {
+            path: './build/postcss.config.js',
+          },
+          sourceMap: true,
+        },
+      },
+      ],
+    }, {
+      test: /\.html$/,
+      loader: 'text-loader',
+    },
+    {
+      test: /\.mcss$/,
+                // use: extractCSS.extract(['css-loader', 'mcss-loader']),
+      use: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: ['css-loader', 'mcss-loader'],
+      }),
+    },
+    {
+      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+      loader: 'url-loader',
+    },
+    {
+      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+      loader: 'url-loader',
+    },
+    ],
+  },
+  plugins: [
+    new webpack.SourceMapDevToolPlugin({
+      filename: 'nek-ui.js.map',
+      columns: false,
+    }),
+    extractCSS,
+  ],
+};