色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

gulp打包vue項目

錢諍諍2年前8瀏覽0評論

gulp是一款十分方便的任務管理工具,它可以簡化開發人員的工作量和提高工作效率。在Vue項目中使用gulp進行打包操作是一種非常不錯的選擇。下面來看具體實現:

首先我們要安裝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。