add: intail

afeiship · Dec 12, 2019 · 071185b · 071185b
1 parent 04944b1
commit 071185b
Show file tree

Hide file tree

Showing 24 changed files with 147 additions and 2,146 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,11 @@
 node_modules
 bower_components
 coverage
+npm-debug.log
+yarn.lock
+Gemfile.lock
+yarn-error.log
+package-lock.json
+.DS_Store
 .idea
+.vscode
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,12 @@
+build
+node_modules
+src
+docs
+test
+__tests__
+.editorconfig
+bower.json
+Gemfile
+gulpfile.js
+LICENSE.txt
+Rakefile
diff --git a/.npmrc b/.npmrc
@@ -1 +1,2 @@
 sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
+package-lock=false
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,27 @@
+{
+  "trailingComma": "es5",
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.scss",
+      "options": {
+        "trailingComma": "none",
+        "tabWidth": 2,
+        "parser": "scss"
+      }
+    },
+    {
+      "files": "*.json",
+      "options": {
+        "trailingComma": "none",
+        "tabWidth": 2,
+        "parser": "json"
+      }
+    }
+  ]
+}
diff --git a/README.MD b/README.MD
@@ -1,20 +1,17 @@
 # webkit-sassui-envelope-border
 > Envelope border for webkit.
 
-## usage:
-```sass
-//import:
-@import 'bower_components/webkit-sassui-envelope-border/dist/webkit-sassui-envelope-border.scss';
+## installation
+```shell
+npm i -S @feizheng/webkit-sassui-envelope-border
+```
+
+## usage
++ https://afeiship.github.io/webkit-sassui-envelope-border/
 
-//use this mixin:
-@include webkit-sassui-envelope-border(
-  $inSize:5px,
-  $inBgSize:10%,
-  $inRadius:10px,
-  $inBdPadding:10px
-);
+```scss
+@import 'node_modules/webkit-sassui-envelope-border/dist/webkit-sassui-envelope-border.scss';
 ```
 
-## resources:
+## resources
 + https://github.com/afeiship/generator-webkit-sassui
-+ https://www.base64-image.de/
diff --git a/bower.json b/bower.json
@@ -12,9 +12,9 @@
   "keywords": [
     "webkit",
     "cssui",
-    "envelope-border"
+    "sassui"
   ],
-  "homepage": "https://github.com/afeiship/webkit-cssui-absolute-center",
+  "homepage": "https://github.com/afeiship/webkit-sassui-envelope-border",
   "moduleType": [
     "amd"
   ],

diff --git a/gulp/clean.js → build/clean.js b/gulp/clean.js → build/clean.js
@@ -1,16 +1,12 @@
 (function() {
-
   'use strict';
   var gulp = require('gulp');
-  var config = require('./config');
-  var argv = require('yargs').argv;
   var $ = require('gulp-load-plugins')({
-    pattern: ['gulp-*', 'gulp.*', 'del']
+    pattern: ['gulp-*', 'gulp.*', 'del'],
   });
-  
+
   //clean
   gulp.task('clean', function() {
     return $.del('dist');
   });
-
-}());
+})();
diff --git a/build/styles.js b/build/styles.js
@@ -0,0 +1,19 @@
+(function() {
+  'use strict';
+
+  var gulp = require('gulp');
+  var autoprefixer = require('autoprefixer');
+  var $ = require('gulp-load-plugins')({
+    pattern: ['gulp-*', 'gulp.*', 'del'],
+  });
+
+  //styles
+  gulp.task('styles', function() {
+    return gulp
+      .src('src/*.scss')
+      .pipe(gulp.dest('dist'))
+      .pipe($.sass())
+      .pipe($.postcss([autoprefixer()]))
+      .pipe(gulp.dest('dist'));
+  });
+})();
diff --git a/build/test.js b/build/test.js
@@ -0,0 +1,16 @@
+(function() {
+  'use strict';
+
+  var gulp = require('gulp');
+  var $ = require('gulp-load-plugins')({
+    pattern: ['gulp-*', 'gulp.*', 'del'],
+  });
+
+  //styles
+  gulp.task('test', function() {
+    return gulp
+      .src('docs/test.scss')
+      .pipe($.sass({ outputStyle: 'expanded' }).on('error', $.sass.logError))
+      .pipe(gulp.dest('docs'));
+  });
+})();
diff --git a/dist/index.css b/dist/index.css
@@ -0,0 +1,2 @@
+/*webkit-sassui-envelope-border Start*/
+/*webkit-sassui-envelope-border End*/
diff --git a/dist/webkit-sassui-envelope-border.scss → dist/index.scss b/dist/webkit-sassui-envelope-border.scss → dist/index.scss
@@ -1,12 +1,14 @@
 /*webkit-sassui-envelope-border Start*/
-@mixin webkit-sassui-envelope-border($inSize:5px,$inBgSize:10%,$inRadius:10px,$inBdPadding:10px){
-  border-radius: $inRadius;
-  padding:$inSize;
-  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCNDc1NjJBQzREM0UxMUUyODE4QkZFQTZENTRFOUIwNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCNDc1NjJBRDREM0UxMUUyODE4QkZFQTZENTRFOUIwNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkI0NzU2MkFBNEQzRTExRTI4MThCRkVBNkQ1NEU5QjA3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkI0NzU2MkFCNEQzRTExRTI4MThCRkVBNkQ1NEU5QjA3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwqKNgAAAYBQTFRF//z8/ujo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') repeat;
+@mixin webkit-sassui-envelope-border($inSize: 5px, $inBgSize: 10%, $inRadius: 10px, $inBdPadding: 10px) {
+  border-radius: 10px;
+  padding: 5px;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCNDc1NjJBQzREM0UxMUUyODE4QkZFQTZENTRFOUIwNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCNDc1NjJBRDREM0UxMUUyODE4QkZFQTZENTRFOUIwNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkI0NzU2MkFBNEQzRTExRTI4MThCRkVBNkQ1NEU5QjA3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkI0NzU2MkFCNEQzRTExRTI4MThCRkVBNkQ1NEU5QjA3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwqKNgAAAYBQTFRF//z8/ujo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")
+    repeat;
   background-size: $inBgSize;
-  >.bd{
+  > .is-body {
     background: #fff;
-    padding:$inBdPadding;
+    padding: $inBdPadding;
   }
 }
+
 /*webkit-sassui-envelope-border End*/
diff --git a/test/test.html → docs/index.html b/test/test.html → docs/index.html
diff --git a/test/test.css → docs/test.css b/test/test.css → docs/test.css
diff --git a/test/test.scss → docs/test.scss b/test/test.scss → docs/test.scss
diff --git a/gulp/build.js b/gulp/build.js
diff --git a/gulp/config.js b/gulp/config.js
diff --git a/gulp/styles.js b/gulp/styles.js
diff --git a/gulp/test.js b/gulp/test.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -4,18 +4,17 @@
 
   var path = require('path');
   var gulp = require('gulp');
-  var argv = require('yargs').argv;
   var fs = require('fs');
   var $ = require('gulp-load-plugins')({
     pattern: ['gulp-*', 'gulp.*', 'del']
   });
 
   //import
-  fs.readdirSync('./gulp').map(function(file) {
-    require('./gulp/' + file);
+  fs.readdirSync('./build').map(function(file) {
+    require('./build/' + file);
   });
 
 
-  gulp.task('default',['build']);
+  gulp.task('default', gulp.series(['clean', 'styles']));
 
 }());
diff --git a/package.json b/package.json
@@ -1,19 +1,29 @@
 {
-  "name": "webkit-sassui-envelope-border",
-  "version": "0.0.0",
+  "name": "@feizheng/webkit-sassui-envelope-border",
+  "version": "1.0.0",
   "description": "Envelope border for webkit.",
   "homepage": "https://github.com/afeiship/webkit-sassui-envelope-border",
   "author": {
     "name": "afei",
     "email": "1290657123@qq.com"
   },
+  "scripts": {
+    "build": "gulp",
+    "start": "node server.js",
+    "test": "gulp test",
+    "release": "gulp && gulp test"
+  },
+  "main": "dist/index.scss",
   "license": "MIT",
   "devDependencies": {
-    "del": "^2.2.1",
-    "gulp": "^3.9.1",
-    "gulp-load-plugins": "^1.2.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-sass": "^2.3.2",
-    "yargs": "^4.7.1"
+    "@feizheng/rake-git": "^1.2.1",
+    "autoprefixer": "^9.7.2",
+    "del": "^5.1.0",
+    "express": "^4.17.1",
+    "gulp": "^4.0.2",
+    "gulp-load-plugins": "^2.0.1",
+    "gulp-postcss": "^8.0.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2"
   }
 }
diff --git a/server.js b/server.js
@@ -0,0 +1,11 @@
+const express = require('express');
+const app = express();
+const portNumber = 3000;
+const sourceDir = 'docs';
+
+app.use(express.static(sourceDir));
+
+app.listen(portNumber, () => {
+  console.log(`Express web server started: http://localhost:${portNumber}`);
+  console.log(`Serving content from /${sourceDir}/`);
+});
diff --git a/src/border.png b/src/border.png