title: Gulp task to configure VueJS
body: <p>I am build a Chrome extension that uses Vuejs in several content pages, I am having hard time configure the gulpfile because I can not refernace files within main.js. the problem is that it can not find <code>./app.vue</code> as if the location is not defined. </p>
  
  <p>Here is my configuration </p>
  
  <pre><code>// generated on 2017-01-30 using generator-chrome-extension 0.6.1
  import gulp from 'gulp';
  import gulpLoadPlugins from 'gulp-load-plugins';
  import del from 'del';
  import runSequence from 'run-sequence';
  import {stream as wiredep} from 'wiredep';
  var fs = require("fs")
  var browserify = require('browserify')
  var vueify = require('vueify')
  var babelify = require('babelify')
  var aliasify = require('aliasify')
  // var nodeSass = require('node-sass')
  
  const $ = gulpLoadPlugins();
  
  gulp.task('vueify', () =&gt; {
    return browserify({
      entries:['./app/recorder/main.js'],
    })
    .transform(vueify)
    .transform(babelify)
    .bundle()
    .pipe(fs.createWriteStream("app/scripts/recorder.js"))
  })
  </code></pre>
  
  <p>I am looking for resources to find a solution to build a task that watches vue changes and apply the transformations. I already built my app on webpack but due to client changes I have to make it work with gulp. </p>