Gulp Project Setup

.env

# SERVER_TYPE: 
# options are static or server (default is static) 
SERVER_TYPE=static

# SERVER_HOST:
# only used if SERVER_TYPE is server
# this will be your url to your website example: mywebsite.local
SERVER_HOST=localhost

# SERVER_LAUNCH:
# Launch from the local IP address or the External one
# options are local or external (default is local)
SERVER_LAUNCH=local

# BROWSERS:
# Choose which browsers you wish to launch. Separate multiple with a comma
# options depend on OS and environment (default opens your default browser)
BROWSERS=google-chrome,firefox

# GHOST OPTIONS
# options where if you have multiple browsers opened on your site which are synced with browser sync, you can carry the same actions on one browser to rest at the same time. These options are awesome for testing multiple browsers at the same time
# ===================
BROWSER_CLICK=true
BROWSER_SCROLL=true
BROWSER_FORM=true

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var bSync = require('browser-sync').create();
var plumber = require('gulp-plumber');
var util = require('gulp-util');
var uglify = require('gulp-uglify');
var pump = require('pump');

require('dotenv').config();

var server = {
	type: process.env.SERVER_TYPE || 'static',
	path: process.env.SERVER_PATH || './',
	host: process.env.SERVER_HOST || 'localhost',
	port: process.env.SERVER_PORT || '80',
	launch: process.env.SERVER_LAUNCH || 'local',
};

var sassInput = './sass/main.scss';
var sassOutput = './css';

var sassOptions = {
	errLogConsole: true,
	outputStyle: 'expanded',
};

var autoprefixerOptions = {
	browsers: ['last 4 versions']
};

gulp.task('sass', function() {
	return gulp
		.src(sassInput)
		.pipe(plumber(errorHandler))
		.pipe(sourcemaps.init())
		.pipe(sass(sassOptions).on('error', sass.logError))
		.pipe(autoprefixer(autoprefixerOptions))
		.pipe(sourcemaps.write('./'))
		.pipe(gulp.dest(sassOutput))
		.pipe(bSync.stream())
});

gulp.task('minify-css', ['sass'], function() {
	return gulp
		.src('css/main.css')
		.pipe(cleanCSS())
		.pipe(rename(function(path) {
			path.extname = ".min.css";
		}))
		.pipe(gulp.dest("./css"))
});

gulp.task('minify-js', function() {

	pump([
		gulp.src('js/app.js'),
		uglify(),
		rename(function(path) {
			path.extname = '.min.js';
		}),
		gulp.dest('js/'),
	], pumpErrorHandler);
});

gulp.task('serve', ['minify-css', 'minify-js'], function() {
	
	var browsers = process.env.BROWSERS || 'default';
	browsers = browsers.split(',');
	var browserSyncOptions = {
		port: 5000,
		browser: browsers,
		ghostMode: {
			click: process.env.BROWSER_CLICK === 'true',
			scroll: process.env.BROWSER_SCROLL === 'true',
			form: process.env.BROWSER_FORM === 'true',
		},
		open: server.launch
	}
	
	if( server.type === 'static' ) {
		browserSyncOptions["server"] = {
			baseDir: server.path
		};
	} else {
		browserSyncOptions["proxy"] = server.host;
	}

	bSync.init(browserSyncOptions);

	gulp.watch("sass/**/*.scss", ["minify-css"]);
	gulp.watch('js/app.js', ['minify-js']);
	gulp.watch("*.html").on('change', bSync.reload);
	gulp.watch('js/app.min.js').on('change', bSync.reload);
});

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

function errorHandler(err) {
	util.beep();

	return true;
}

function pumpErrorHandler(err) {
	if( err ) {
		util.beep();
		console.log(err.toString());
	}
}

package.json

{
  "name": "base-gulp-setup",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "browser-sync": "^2.24.4",
    "dotenv": "^5.0.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-clean-css": "^3.9.4",
    "gulp-plumber": "^1.2.0",
    "gulp-rename": "^1.2.3",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.8",
    "pump": "^3.0.0"
  }
}