Simple Gulp config

gulpfile.js

// Gulp plugins
var gulp         = require('gulp'),
    $            = require('gulp-load-plugins')();
    browserSync  = require('browser-sync'),
    reload       = browserSync.reload;

// Config
var AUTOPREFIXER_BROWSERS = ['last 2 versions'];
var SCSS_DIR = 'app/styles/scss/';
var STYLES_DIR  = 'app/styles/';
var JS_DIR   = 'app/scripts/';
var OUT_DIR  = 'dist/';
var JS_FILES = [
  'app/bower_components/jquery/dist/jquery.min.js',
  'app/scripts/app.js'
];

// Styles
gulp.task('styles', function() {
  return gulp.src(SCSS_DIR + '*.scss')
    .pipe($.sass({ outputStyle: 'nested' }))
    .pipe($.autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
    .pipe(gulp.dest(STYLES_DIR));
});

// Scripts
gulp.task('scripts', function() {
  return gulp.src(JS_FILES)
    .pipe($.jshint())
    .pipe($.jshint.reporter('jshint-stylish'))
    .pipe($.if(!browserSync.active, $.jshint.reporter('fail')))
    .pipe($.concat('main.js'))
    .pipe(gulp.dest(JS_DIR))
    .pipe(reload({ stream: true }));
});

gulp.task('serve', ['styles', 'scripts'], function() {
  browserSync({
      notify: false,
      server: 'app'
    });

  gulp.watch(SCSS_DIR + '**/*.scss', ['styles', reload]);
  gulp.watch(JS_DIR + '**/*.js', ['scripts']);
  gulp.watch('app/*.html', reload);
});

package.json

{
  "name": "gulpWorkflow",
  "version": "1.0.0",
  "description": "",
  "main": "gulp-conf.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "browser-sync": "^2.5.0",
    "gulp": "^3.8.11",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-concat": "^2.5.2",
    "gulp-if": "^1.2.5",
    "gulp-jshint": "^1.10.0",
    "gulp-load-plugins": "^0.10.0",
    "gulp-sass": "^1.3.3",
    "jshint-stylish": "^1.0.1"
  }
}