pack with webpack

README.md

@@ -1,7 +1,7 @@
 # DPlayer
 
 [![npm](https://img.shields.io/npm/v/dplayer.svg?style=flat-square)](https://www.npmjs.com/package/dplayer)
-[![npm](https://img.shields.io/npm/l/dplayer.svg?style=flat-square)](https://www.npmjs.com/package/dplayer)
+[![npm](https://img.shields.io/npm/l/dplayer.svg?style=flat-square)](https://github.com/DIYgod/DPlayer/blob/master/LICENSE)
 [![devDependency Status](https://img.shields.io/david/dev/DIYgod/dplayer.svg?style=flat-square)](https://david-dm.org/DIYgod/DPlayer#info=devDependencies)
 [![npm](https://img.shields.io/npm/dt/dplayer.svg?style=flat-square)](https://www.npmjs.com/package/dplayer)
 [![Travis](https://img.shields.io/travis/DIYgod/DPlayer.svg?style=flat-square)](https://travis-ci.org/DIYgod/DPlayer)
@@ -11,7 +11,7 @@
 
 ## Introduction
 
-[Demo](http://diygod.github.io/DPlayer/demo/)
+[Demo](http://dplayer.js.org/)
 
 Screenshot
 ![image](http://i.imgur.com/207ch36.jpg)
@@ -118,7 +118,9 @@ $ npm run build
 ## Related Projects
 
 - [DPlayer-for-typecho](https://github.com/volio/DPlayer-for-typecho)
+
 - [Hexo-tag-dplayer](https://github.com/NextMoe/hexo-tag-dplayer)
+
 - [DPlayer_for_Z-BlogPHP](https://github.com/fghrsh/DPlayer_for_Z-BlogPHP)
 
 ## Todo

demo/danmaku.json

@@ -1,109 +0,0 @@
-{
-    "code": 1,
-    "danmaku": [
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 2.8,
-            "text": "此生无悔入",
-            "color": "#f00",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 1.6,
-            "text": "此生无悔入四月来世愿做友人A",
-            "color": "#ff0",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 0.4,
-            "text": "此生无悔入四月来世",
-            "color": "#f00",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 0.8,
-            "text": "此生无悔入四月来世愿做友人A此生无悔入四月来世愿做",
-            "color": "#0f0",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 1.2,
-            "text": "此生无悔入四月来世愿做友人",
-            "color": "#00f",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 2.0,
-            "text": "此生无悔入四月来世愿做友人A",
-            "color": "#f0f",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 2.4,
-            "text": "此生无悔入四月来世愿做友人A",
-            "color": "#0ff",
-            "type": "right"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 2.4,
-            "text": "此生无悔入四月来世",
-            "color": "#f00",
-            "type": "top"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 2.8,
-            "text": "此生无悔入四月",
-            "color": "#0f0",
-            "type": "top"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 4.0,
-            "text": "此生无悔入四月来世愿做友人A",
-            "color": "#ff0",
-            "type": "top"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 4.0,
-            "text": "此生无悔入四做友人A",
-            "color": "#f0f",
-            "type": "top"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 6,
-            "text": "此生无悔入",
-            "color": "#f00",
-            "type": "bottom"
-        },
-        {
-            "player": "9E2E3368B56CDBB4",
-            "author": "DIYgod",
-            "time": 6.4,
-            "text": "此生无悔入四月来世愿做友人A",
-            "color": "#f0f",
-            "type": "bottom"
-        }
-    ]
-}

demo/index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>DPlayer Demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../dist/DPlayer.min.css">
     <style>
         body {
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

gulpfile.js

@@ -1,72 +0,0 @@
-var gulp        = require('gulp');
-var sass        = require('gulp-sass');
-var prefix      = require('gulp-autoprefixer');
-var uglify      = require('gulp-uglify');
-var concat      = require('gulp-concat');
-var cssNano     = require('gulp-cssnano');
-var rename      = require('gulp-rename');
-var babel       = require("gulp-babel");
-var sourcemaps  = require("gulp-sourcemaps");
-var browserSync = require('browser-sync').create();
-
-// Launch the server
-gulp.task('browser-sync', function() {
-    browserSync.init({
-        server: {
-            baseDir: './'
-        },
-        startPath: '/demo'
-    });
-});
-
-// Move files
-gulp.task('copy', function () {
-    gulp.src('src/font/*')
-        .pipe(gulp.dest('dist/font'));
-    gulp.src(['src/*.jpg', 'src/*.png'])
-        .pipe(gulp.dest('dist'));
-});
-
-// Build js files
-gulp.task('compressJS', function() {
-    gulp.src(['src/*.js'])
-        .pipe(sourcemaps.init())
-        .pipe(babel({
-            presets: ['es2015']
-        }))
-        .pipe(uglify())
-        .pipe(rename({
-            suffix: ".min"
-        }))
-        .pipe(sourcemaps.write("."))
-        .pipe(gulp.dest('dist'))
-        .pipe(browserSync.stream());
-});
-
-// Build css files
-gulp.task('compressCSS', function() {
-    gulp.src('src/*.scss')
-        .pipe(sass().on('error', sass.logError))
-        .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
-        .pipe(cssNano())
-        .pipe(rename({
-            suffix: ".min"
-        }))
-        .pipe(gulp.dest('dist'))
-        .pipe(browserSync.stream());
-});
-
-// Watch files for changes & recompile
-gulp.task('watch', function () {
-    gulp.watch(['src/*.js'], ['compressJS']);
-    gulp.watch(['src/*.scss'], ['compressCSS']);
-    gulp.watch('demo/*.html').on('change', browserSync.reload);
-    gulp.watch('demo2/*.html').on('change', browserSync.reload);
-    gulp.watch('demo/font/*', ['copy']);
-});
-
-// compile the project, including move font, compress js and scss, also be used to test
-gulp.task('release', ['copy', 'compressJS', 'compressCSS']);
-
-// Default task, running just `gulp` will move font, compress js and scss, launch server, watch files.
-gulp.task('default', ['release', 'browser-sync', 'watch']);

package.json

@@ -1,12 +1,11 @@
 {
   "name": "dplayer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Wow, such a lovely HTML5 danmaku video player",
   "main": "dist/DPlayer.min.js",
   "scripts": {
-    "test": "gulp release",
-    "dev": "gulp",
-    "build": "gulp release"
+    "test": "webpack",
+    "start": "webpack-dev-server --hot --progress --inline"
   },
   "repository": {
     "type": "git",
@@ -25,16 +24,18 @@
   },
   "homepage": "https://github.com/DIYgod/DPlayer#readme",
   "devDependencies": {
-    "babel-preset-es2015": "^6.6.0",
-    "browser-sync": "^2.12.4",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.0",
-    "gulp-babel": "^6.1.2",
-    "gulp-concat": "^2.6.0",
-    "gulp-cssnano": "^2.1.2",
-    "gulp-rename": "^1.2.2",
-    "gulp-sass": "^2.3.1",
-    "gulp-sourcemaps": "^1.6.0",
-    "gulp-uglify": "^1.5.3"
+    "autoprefixer": "^6.3.7",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "css-loader": "^0.23.1",
+    "exports-loader": "^0.6.3",
+    "file-loader": "^0.9.0",
+    "node-sass": "^3.8.0",
+    "postcss-loader": "^0.9.1",
+    "sass-loader": "^4.0.0",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.9.0"
   }
 }

src/DPlayer.scss

@@ -224,6 +224,17 @@
             }
         }
 
+        .dplayer-danloading {
+            position: absolute;
+            top: 50%;
+            margin-top: -7px;
+            width: 100%;
+            text-align: center;
+            font-size: 14px;
+            line-height: 14px;
+            animation: my-face 5s infinite ease-in-out;
+        }
+
         .diplayer-loading-icon {
             display: none;
             position: absolute;

webpack.config.js

@@ -0,0 +1,60 @@
+var webpack = require('webpack');
+var path = require('path');
+var autoprefixer = require('autoprefixer');
+
+var ROOT_PATH = path.resolve(__dirname);
+var APP_PATH = path.resolve(ROOT_PATH, 'src');
+var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');
+
+module.exports = {
+    devtool: 'source-map',
+
+    entry: './src/DPlayer.js',
+
+    output: {
+        path: BUILD_PATH,
+        filename: 'DPlayer.min.js',
+        libraryTarget: 'umd',
+        umdNamedDefine: true
+    },
+
+    devServer: {
+        publicPath: "/dist/"
+    },
+
+    module: {
+        loaders: [
+            {
+                test: /\.js$/,
+                loader: 'babel',
+                include: APP_PATH,
+                query: {
+                    presets: ['es2015']
+                }
+            },
+            {
+                test: /\.scss$/,
+                loaders: ['style', 'css', 'postcss', 'sass'],
+                include: APP_PATH
+            },
+            {
+                test: /\.(png|jpg)$/,
+                loader: 'url?limit=40000'
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        })
+    ],
+
+    postcss: [
+        autoprefixer({
+            browsers: ['last 15 versions', '> 1%', 'ie 8', 'ie 7']
+        })
+    ]
+};