如何使用vue.js和gulp？

Question

我正在使用gulp進行一個小型項目，我想了解vue.js，因此我想在此項目中使用vue.js，但我不知道如何在gulpfile中配置vue.js。 JS

我想知道如何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: 'user@hostname:/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']);

Answer 1

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')); 
}); 

Answer 2

看看這個： 這是一個包可以讓你設置vue.js的吞嚥任務。

https://www.npmjs.com/package/gulp-vueify

Answer 3

使用：

.pipe(babel({presets: ['es2015']})) 

在一個普通的大口的任務幫助我CONCAT和醜化我的VUE .js文件。

如果這是你的意思，那麼你也將需要與故宮安裝巴貝爾並添加：

var babel = require('gulp-babel');