build with webpack

README.md

@@ -1,7 +1,7 @@
 # APlayer
 
 [![npm](https://img.shields.io/npm/v/aplayer.svg?style=flat-square)](https://www.npmjs.com/package/aplayer)
-[![npm](https://img.shields.io/npm/l/aplayer.svg?style=flat-square)](https://www.npmjs.com/package/aplayer)
+[![npm](https://img.shields.io/npm/l/aplayer.svg?style=flat-square)](https://github.com/DIYgod/APlayer/blob/master/LICENSE)
 [![devDependency Status](https://img.shields.io/david/dev/DIYgod/aplayer.svg?style=flat-square)](https://david-dm.org/DIYgod/APlayer#info=devDependencies)
 [![npm](https://img.shields.io/npm/dt/aplayer.svg?style=flat-square)](https://www.npmjs.com/package/aplayer)
 [![Travis](https://img.shields.io/travis/DIYgod/APlayer.svg?style=flat-square)](https://travis-ci.org/DIYgod/APlayer)
@@ -33,8 +33,6 @@ $ npm install aplayer --save
 ### HTML
 
 ```HTML
-<link rel="stylesheet" href="APlayer.min.css">
-<!-- ... -->
 <div id="player1" class="aplayer"></div>
 <!-- ... -->
 <script src="APlayer.min.js"></script>

demo/index.html

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

gulpfile.js

@@ -1,71 +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())
-        .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('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": "aplayer",
-  "version": "1.4.8",
+  "version": "1.5.0",
   "description": "Wow, such a beautiful html5 music player",
   "main": "dist/APlayer.min.js",
   "scripts": {
-    "test": "gulp release",
-    "dev": "gulp",
-    "build": "gulp release"
+    "test": "webpack",
+    "start": "webpack-dev-server --hot --progress --inline"
   },
   "repository": {
     "type": "git",
@@ -24,16 +23,18 @@
   },
   "homepage": "https://github.com/DIYgod/APlayer#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"
   }
 }

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/APlayer.js',
+
+    output: {
+        path: BUILD_PATH,
+        filename: 'APlayer.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']
+        })
+    ]
+};