Gulp-Frontend

gulpfile.js

'use strict';
/**
 * Gulp Requiretment
 * @type {[type]}
 */

var gulp = require('gulp');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

/**
 * Configuration Gulpfile
 * @type {Object}
 */

var config = {
	pug:{
		src:'./views/*.pug',
		opt:{}
	},
	// SASS Config
	sass: {
		src: './sass/**/*.sass',
		dest: './css',
		maps: '.sass/maps'
	}

}

gulp.task('views', function buildHTML() {
  return gulp.src(config.pug.src)
  .pipe(pug(config.pug.opt))
});
 
gulp.task('sass', function () {
 return gulp.src(config.sass.src)
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(sourcemaps.write(config.sass.maps))
  .pipe(gulp.dest(config.sass.dest));
});
 
gulp.task('sass:watch', function () {
  gulp.watch(config.sass.src, ['sass']);
});

gulp.task('default',['sass']);

package.json

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-pug": "^3.1.0",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^2.2.0",
    "vue": "^2.0.3"
  }
}