How to use vue.js with gulp?

Question

I'm working with a small project using gulp and I want to learn about vue.js, so I want to use vue.js in this project, but I don't know how to configure vue.js in the gulpfile.js

I want to know how to configure gulpfile to use vue.js

My 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']);

craig_h · Accepted Answer · 2016-11-25 00:42:54Z

2

Vueify is a browserify transform; gulp-browserify isn't maintained anymore but I assume that you can still add vueify as a transform once it's installed:

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

answered Nov 25, 2016 at 0:42

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yaser · Accepted Answer · 2016-11-24 22:55:45Z

0

Check this out: This is a package which lets you setup gulp task for vue.js.

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

answered Nov 24, 2016 at 22:55

Yaser

5,7391 gold badge18 silver badges28 bronze badges

3 Comments

deleting Over a year ago

I tried but when I run 'gulp vueify' on the terminal nothing happened [21:10:17] Using gulpfile ~/path/gulpfile.js [21:10:17] Starting 'vueify'... [21:10:17] Finished 'vueify' after 30 ms

JJPandari Over a year ago

@erickcouto do you have any .vue file (to transform)?

deleting Over a year ago

@PanJunjie潘俊杰 yes I do.

David Tenemaza Kramaley · Accepted Answer · 2017-08-10 11:33:48Z

0

Using:

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

On a normal gulp task helped me concat and uglify my vue.js files.

If this is what you meant, then you will also need to install babel with npm and add:

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

answered Aug 10, 2017 at 11:33

David Tenemaza Kramaley

214 bronze badges

Collectives™ on Stack Overflow

How to use vue.js with gulp?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related