ソースフォルダ内のファイルを編集
sassのコンパイルやHTML/JSのコード圧縮しつつ、ブラウザシンク＆リロード
階層構造を維持したまま納品用ディレクトリに生成
随時ブラウザで確認しつつ、オッケーならディレクトリごと納品

ってな事をしたくてgulpを使ってみました。

gulpfile.js

//プラグインの読み込み
var gulp			= require("gulp");
var imageMin		= require("gulp-imagemin");
var htmlMin			= require("gulp-htmlmin")
var sass			= require("gulp-sass");
var minifyCss		= require('gulp-minify-css');
var uglify			= require('gulp-uglify');
var browserSync		= require('browser-sync').create();

// ブラウザ同期
gulp.task('browser-sync', function() {
    browserSync.init({
		server: {
            baseDir: "./dest"
        },
		open: false//これがないとOSによっては、エラーで止まる場合がある
    });
    // 監視対象のファイルを指定
    gulp.watch('./dest/**/*.html', browserSync.reload);
    gulp.watch('./dest/**/*.css', browserSync.reload);
    gulp.watch('./dest/**/*.js', browserSync.reload);
});

//scss
gulp.task('scss', function () {
    gulp.src(["./src/**/*.scss"], { base: 'src' })
	.pipe(sass())
    .pipe(gulp.dest('./dest'));
});

// jsの圧縮
gulp.task('js', function () {
    gulp.src(["./src/**/*.js"], { base: 'src' })
    .pipe(uglify({preserveComments: 'some'}))
    .pipe(gulp.dest('./dest'));
});

// htmlの圧縮
gulp.task('html', function () {
    gulp.src(["./src/**/*.html"], { base: 'src' })
    .pipe(htmlMin({collapseWhitespace: true}))
    .pipe(gulp.dest('./dest'));
});

// 毎回実行して欲しい処理
gulp.task('watch',function(){
	gulp.watch([
					"./src/**/*.jpg" ,
					"./src/**/*.png" ,
					"./src/**/*.gif"
				], ['img']);
	gulp.watch('./src/**/*.html', ['html']);
	gulp.watch('./src/**/*.scss', ['scss']);
	gulp.watch('./src/**/*.js', ['js']);
});

gulp.task("default",["browser-sync","watch"]);

一応望み通りの挙動はしているものの、課題としては

画像圧縮のタイミングはここで良いのか
処理の流れが煩雑じゃないか
CSS圧縮しとらんやないかいっ！

があります・・・。(；´Д｀)