gulp打包vue项目

首先我们要安装gulp，打开终端输入以下命令：

npm install gulp-cli -g
npm install gulp --save-dev

安装完gulp后，我们需要安装若干个插件来支持gulp打包Vue项目：

npm install gulp-load-plugins gulp-babel babel-core babel-preset-env gulp-plumber vinyl-source-stream browserify vueify --save-dev

安装完插件后，在项目根目录下创建gulpfile.js，在其中写入gulp的打包代码：

// 引入gulp及各种相关插件
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')(),
source = require('vinyl-source-stream'),
browserify = require('browserify'),
vueify = require('vueify');
// 定义输入输出文件夹路径
var paths = {
src: {
js: './src/js',
vue: './src/vue'
},
dest: {
js: './dist/js'
}
};
// 监视文件变化
gulp.task('watch', function() {
gulp.watch(paths.src.vue + '/**/*.vue', ['vue']);
});
// 编译vue文件
gulp.task('vue', function() {
return browserify()
.add(paths.src.vue + '/main.js')
.transform(vueify)
.bundle()
.on('error', plugins.util.log.bind(plugins.util, 'Browserify Error'))
.pipe(source('main.js'))
.pipe(gulp.dest(paths.dest.js));
});
// 默认任务
gulp.task('default', ['watch']);

然后在终端执行以下命令：

gulp

至此，我们已经完成了Vue项目打包的所有操作，打包后的文件会输出到dist/js/main.js。