gulpfile.js

var gulp = require('gulp'),
    connect = require('connect'),
    http = require('http'),
    opn = require('opn'),
    rimraf = require('rimraf'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    cssbeautify = require('gulp-cssbeautify'),
    minifycss = require('gulp-minify-css'),
    useref = require('gulp-useref'),
    gulpif = require('gulp-if'),
    livereload = require('gulp-livereload'),
    config = {
        app: 'app',
        dist: 'dist',
        port: 9000,
        scripts: function () {
            return this.app + '/scripts/*.js';
        },
        styles: function () {
            return this.app + '/styles';
        },
        html: function () {
            return this.app + '/*.html';
        }
    };

config.scripts.apply(config);
config.styles.apply(config);
config.html.apply(config);

gulp.task('clean', function(cb) {
    rimraf(config.dist, cb);
});

gulp.task('lint', function() {
    var path = config.scripts();

    return gulp.src(path)
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('sass', function () {
    var dir = config.styles();

    return gulp.src(dir + '/*.scss')
        .pipe(sass({
            includePaths: [ dir + '/partials' ],
            outputStyle: 'expanded'
        }))
        .pipe(cssbeautify())
        .pipe(gulp.dest(dir));
});

gulp.task('connect', function() {
    var app = connect()
        .use(require('connect-livereload')({ port: 35729 }))
        .use(connect.static(config.app))
        .use(connect.directory(config.app));

    http.createServer(app)
        .listen(config.port)
        .on('listening', function() {
            console.log('Started connect web server on http://localhost:' + config.port + '.');

            opn('http://localhost:' + config.port);
        });
});

gulp.task('server', ['sass', 'connect'], function() {
    var jsPath = config.scripts(),
        cssPath = config.styles(),
        htmlPath = config.html(),
        server = livereload();

    gulp.watch(cssPath + '/**/*.scss', ['sass']);

    gulp.watch([cssPath + '/**/*.scss', jsPath, htmlPath]).on('change', function (file) {
        server.changed(file.path);
    });
});

gulp.task('images', function(){
    return gulp.src(config.app + '/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}')
        .pipe(gulp.dest(config.dist + '/images'));
});

gulp.task('fonts', function(){
    var cssPath = config.styles();

    return gulp.src(cssPath + '/fonts/*')
        .pipe(gulp.dest(config.dist + '/styles/fonts'));
});

gulp.task('misc', function(){
    return gulp.src([
            config.app + '/*.{ico,png,txt}',
            config.app + '/.htaccess'
        ])
        .pipe(gulp.dest(config.dist));
});

gulp.task('html', ['lint', 'sass'], function(){
    var htmlPath = config.html();

    return gulp.src(htmlPath)
        .pipe(useref.assets())
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', minifyCss()))
        .pipe(useref.restore())
        .pipe(useref())
        .pipe(gulp.dest(config.dist));
});

gulp.task('build', ['clean'], function(){
    gulp.start('images', 'fonts', 'misc', 'html');
});

package.json

{
  "name": "test-project",
  "version": "0.0.0",
  "devDependencies": {
    "gulp": "^3.8.0",
    "connect": "^2.19.5",
    "gulp-sass": "^0.7.1",
    "gulp-livereload": "^2.1.0",
    "opn": "^0.1.1",
    "connect-livereload": "^0.4.0",
    "gulp-jshint": "^1.6.2",
    "gulp-useref": "^0.4.4",
    "gulp-cssbeautify": "^0.1.3",
    "gulp-minify-css": "^0.3.1",
    "gulp-uglify": "^0.3.0",
    "gulp-if": "^1.2.1",
    "rimraf": "^2.2.6"
  }
}