gulp + browser-syncを使って自動で納品ファイルを生成したい

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

ってな事をしたくて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圧縮しとらんやないかいっ！

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