如何使用vue.js和gulp？
问题描述：
我正在使用gulp进行一个小型项目，我想了解vue.js，因此我想在此项目中使用vue.js，但我不知道如何在gulpfile中配置vue.js。 JS如何使用vue.js和gulp？
我想知道如何gulpfile配置为vue.js
使用我的gulpfile.js
var env = require('minimist')(process.argv.slice(2)),
gulp = require('gulp'),
gutil = require('gulp-util'),
plumber = require('gulp-plumber'),
jade = require('gulp-jade'),
browserify = require('gulp-browserify'),
browserSync = require('browser-sync'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
gulpif = require('gulp-if'),
stylus = require('gulp-stylus'),
jeet = require('jeet'),
rupture = require('rupture'),
koutoSwiss = require('kouto-swiss'),
prefixer = require('autoprefixer-stylus'),
modRewrite = require('connect-modrewrite'),
imagemin = require('gulp-imagemin'),
karma = require('gulp-karma'),
cache = require('gulp-cache'),
rsync = require('rsyncwrapper').rsync;
// Call Jade for compile Templates
gulp.task('jade', function() {
return gulp.src('src/templates/*.jade')
.pipe(plumber())
.pipe(jade({pretty: !env.p}))
.pipe(gulp.dest('build/'));
});
gulp.task('copy', function() {
return gulp.src(['src/*.html', 'src/*.txt'])
.pipe(gulp.dest('build/'))
});
// Call Uglify and Concat JS
gulp.task('js', function() {
return gulp.src('src/js/**/*.js')
.pipe(plumber())
.pipe(concat('main.js'))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});
// Call Uglify and Concat JS
gulp.task('browserify', function() {
return gulp.src('src/js/main.js')
.pipe(plumber())
.pipe(browserify({debug: !env.p}))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});
// Call Stylus
gulp.task('stylus', function() {
gulp.src('src/styl/main.styl')
.pipe(plumber())
.pipe(stylus({
use:[koutoSwiss(), prefixer(), jeet(), rupture()],
compress: env.p,
}))
.pipe(gulp.dest('build/css'));
});
// Call Imagemin
gulp.task('imagemin', function() {
return gulp.src('src/img/**/*')
.pipe(plumber())
.pipe(cache(imagemin({optimizationLevel: 3, progressive: true, interlaced: true})))
.pipe(gulp.dest('build/img'));
});
// Call Watch
gulp.task('watch', function() {
gulp.watch('src/templates/**/*.jade', ['jade']);
gulp.watch('src/styl/**/*.styl', ['stylus']);
gulp.watch('src/js/**/*.js', [(env.fy) ? 'browserify' : 'js']);
gulp.watch('src/img/**/*.{jpg,png,gif}', ['imagemin']);
});
gulp.task('browser-sync', function() {
var files = [
'build/**/*.html',
'build/css/**/*.css',
'build/img/**/*',
'build/js/**/*.js',
];
browserSync.init(files, {
server: {
baseDir: './build/',
},
});
});
// Rsync
gulp.task('deploy', function() {
rsync({
ssh: true,
src: './build/',
dest: '[email protected]:/path/to/www',
recursive: true,
syncDest: true,
args: ['--verbose'],
},
function (erro, stdout, stderr, cmd) {
gutil.log(stdout);
});
});
// Default task
gulp.task('default', [(env.fy) ? 'browserify' : 'js', 'jade', 'copy', 'stylus', 'imagemin', 'watch', 'browser-sync']);
// Build and Deploy
gulp.task('build', [(env.fy) ? 'browserify' : 'js', 'jade', 'copy', 'stylus', 'imagemin', 'deploy']);
答
Vueify是browserify变换; gulp-browserify不再被维护，但我认为你仍然可以添加vueify作为变换一次，它的安装：
gulp.task('browserify', function() {
return gulp.src('src/js/main.js')
.pipe(plumber())
.pipe(browserify({
debug: !env.p,
transform: ['vueify']
}))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});
答
看看这个： 这是一个包可以让你设置vue.js的吞咽任务。
答
使用：
.pipe(babel({presets: ['es2015']}))
在一个普通的大口的任务帮助我CONCAT和丑化我的VUE .js文件。
如果这是你的意思，那么你也将需要与故宫安装巴贝尔并添加：
var babel = require('gulp-babel');
还没有工作=/... – ESC