Using sass and pug of npm module

gulpfile.js

//
// sasstest gulpfile
//-----------------------------------------------------------

//== gulp Module
var gulp          = require('gulp'),
    concat        = require('gulp-concat'),
    pug           = require('gulp-pug'),
    sass          = require('gulp-sass'),
    watch         = require('gulp-watch'),
    livereload    = require('gulp-livereload'),
    connect       = require('gulp-connect'),
    open          = require('gulp-open'),
    sourcemaps    = require('gulp-sourcemaps');

//== config.json
//
//## src,dest variables
var src       = {
  sass        : 'src/sass/*.sass',
  pug         : 'src/pug/**/*.pug',
  js          : "src/js/*.js"
}
var dest      = {
  css         : './assets/css/',
  html        : './assets/html/',
  js          : "./assets/js/"
}

//## gulp task Live, Open Enviroment
var config    = {
  output      : "./assets",
  input       : "./dest",
  port        : 8888,
  livereload  : true,
  browser     : "chrome"
}

//## sass option style ...
var sassOpt = {
  //** outputStype : nested,expanded,compact,compressed
  outputStyle     : "compact",
  //** indentType : space, tab
  indentType      : "space",
  //** indentWidth : default: 2
  indentWidth     : 1,
  //** 컴파일 된 css의 소수점 자리수 : default: 5
  precision       : 6,
  //** sourceComments T/F : default: false
  sourceComments  : false
}
//## pug option style ...
var pugOpt  = {
  pretty          : "\t"
}

//== gulp task
//
//## gulp basic task : you say just gulp~~!
gulp.task('default',['PugCompile','SassCompile','Live','Open','Watch']);

//## concat, pug/sass compile...
gulp.task('Concat', function(){
  return gulp
  .src(src.js)
  .pipe(concat("common.js"))
  .pipe(gulp.dest(dest.js));
});

//## pug to html
gulp.task('PugCompile',function(){
  return gulp
  .src(src.pug)
  .pipe(pug(pugOpt))
  .pipe(gulp.dest(dest.html));
});

//## sass to css
gulp.task('SassCompile',function(){
  return gulp
  .src(src.sass)
  .pipe(sourcemaps.init())
  .pipe(sass(sassOpt).on('error', sass.logError))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest(dest.css));
});

//## livereload
gulp.task('Live',function(){
  connect.server({
    root        : config.output,
    port        : config.port,
    livereload  : config.livereload
  });
});

//## browser open
gulp.task('Open',function(){
  var options = {
    uri : 'http://localhost:' + config.port,
    app : config.browser
  };
  gulp.src(config.output+'/html/*.html')
  .pipe(open(options));
});

//## html livereload
gulp.task('Html', function () {
  gulp.src(dest.html+'*.html')
    .pipe(connect.reload());
});
//## css livereload
gulp.task('Css', function () {
  gulp.src(dest.css+'*.css')
    .pipe(connect.reload());
});

//## watch js,pug,sass in my workspace
gulp.task('Watch',function(){
  gulp.watch([dest.html+'*.html'],['Html']);
  gulp.watch([dest.css+'*.css'],['Css']);
  gulp.watch(src.js,['Concat']);
  gulp.watch(src.pug,['PugCompile']);
  gulp.watch(src.sass,['SassCompile']);
});

package.json

{
  "name": "Mobirum",
  "version": "1.0.0",
  "description": "",
  "main": "./assets/html/index.html",
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.0.0",
    "gulp-livereload": "^3.8.1",
    "gulp-open": "^2.0.0",
    "gulp-pug": "^3.3.0",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.1",
    "gulp-watch": "^4.3.11"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "sori",
  "license": "ISC"
}

file structure

ForderName
-assets
--css
--html
--js
-mode_modules
-src
--pug
--sass
--js
-gulpfile.js
-package.json