Improve gulp tasks

demo/index.html

@@ -48,7 +48,7 @@
         </md-link-button>
       </div>
 
-      <div style="padding: 16px" v-md-ink-ripple>
+      <div style="padding: 16px; position: relative" v-md-ink-ripple>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

gulpfile.babel.js/tasks/browserify.js

@@ -6,7 +6,6 @@ import watchify from 'watchify';
 import babelify from 'babelify';
 import envify from 'envify/custom';
 import vueify from 'vueify';
-import xtend from 'xtend';
 import prettyTime from 'pretty-hrtime';
 import browserify from 'browserify';
 import uglifyify from 'uglifyify';
@@ -19,19 +18,22 @@ let app = 'main.js';
 let entry = path.normalize(config.src.path + '/components/' + app);
 
 gulp.task('browserify', () => {
-  let b = watchify(browserify(xtend(watchify.args, {
+  let b = browserify({
+    cache: {},
+    packageCache: {},
     debug: true,
-    watch: true,
-    fullPaths: true,
-    keepAlive: true,
+    detectGlobals: false,
+    extensions: ['js', 'json', 'vue'],
+    ignoreWatch: true,
     noparse: ['node_modules/**/*.js'],
     entries: entry
-  })));
+  });
 
   let bundle = () => {
     let bundleTimer = process.hrtime();
 
     return b
+      .plugin(watchify)
       .transform(envify({
         NODE_ENV: 'development'
       }))

gulpfile.babel.js/tasks/copy.js

@@ -1,10 +1,8 @@
 import gulp from 'gulp';
-import changed from 'gulp-changed';
 import config from '../config';
 
 gulp.task('copy', () => {
   return gulp
     .src(config.src.files)
-    .pipe(changed(config.dest.path))
     .pipe(gulp.dest(config.dest.path));
 });

gulpfile.babel.js/tasks/watch.js

@@ -9,7 +9,7 @@ let watchConfig = {
 };
 
 gulp.task('watch', ['browserSync'], () => {
-  watch(['.eslintrc', '.eslintignore'].concat(config.gulp.scripts, config.src.components), watchConfig, () => {
+  watch(['.eslintrc', '.eslintignore'], watchConfig, () => {
     runSequence('eslint-all');
   });
 

package.json

@@ -13,7 +13,7 @@
   ],
   "devDependencies": {
     "babel-core": "^6.10.4",
-    "babel-eslint": "^6.1.0",
+    "babel-eslint": "^6.1.2",
     "babel-plugin-transform-runtime": "^6.6.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-stage-0": "^6.5.0",
@@ -30,7 +30,7 @@
     "gulp-changed": "^1.3.0",
     "gulp-changed-in-place": "^2.0.3",
     "gulp-cssnano": "^2.1.1",
-    "gulp-eslint": "^2.0.0",
+    "gulp-eslint": "^3.0.1",
     "gulp-import-css": "^0.1.2",
     "gulp-sass": "^2.2.0",
     "gulp-size": "^2.1.0",
@@ -39,16 +39,16 @@
     "gulp-util": "^3.0.7",
     "gulp-watch": "^4.3.8",
     "pretty-hrtime": "^1.0.2",
-    "run-sequence": "^1.1.5",
+    "run-sequence": "^1.2.2",
     "sass-module-importer": "^1.2.0",
     "uglifyify": "^3.0.1",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
-    "vueify": "^8.5.4",
+    "vueify": "^8.7.0",
     "watchify": "^3.7.0",
     "xtend": "^4.0.1"
   },
   "dependencies": {
-    "vue": "^1.0.25"
+    "vue": "^1.0.26"
   }
 }

src/components/mdIcon/index.js

@@ -1,11 +1,5 @@
-import './mdIcon.vue';
+import mdIcon from './mdIcon.vue';
 
 export default function install(Vue) {
-  Vue.elementDirective('md-icon', {
-    bind: function() {
-      Vue.nextTick(() => {
-        this.el.classList.add('material-icons');
-      });
-    }
-  });
+  Vue.component('md-icon', Vue.extend(mdIcon));
 }

src/components/mdIcon/mdIcon.vue

@@ -1 +1,7 @@
+<template>
+  <i class="material-icons">
+    <slot></slot>
+  </i>
+</template>
+
 <style lang="scss" src="mdIcon.scss"></style>