My front build

backage.json

{
  "name": "myproject",
  "version": "0.0.1",
  "main": "gulpfile.js",
  "scripts": {
    "postinstall": "bower-installer"
  },
  "repository": {
    "type": "git",
    "url": "git://myproject"
  },
  "author": "myproject",
  "license": "MIT",
  "bugs": {
    "url": "https://myproject/issues"
  },
  "homepage": "https://myproject.myproject",
  "devDependencies": {
    "gulp": "3.8.11",
    "gulp-load-plugins": "0.7.0",
    "gulp-plumber": "0.6.6",
    "gulp-watch": "1.1.0",
    "gulp-sprite-glue": "0.0.4",
    "gulp-sass": "1.3.3",
    "gulp-minify-css": "1.1.6",
    "gulp-autoprefixer": "2.1.0",
    "gulp-combine-media-queries": "0.2.0",
    "gulp-kss-robloach": "0.0.2",
    "gulp-uglify": "1.1.0",
    "gulp-imagemin": "2.2.1",
    "run-sequence": "1.0.1",
    "node-bourbon": "4.2.2",
    "minimist": "1.1.0",
    "browserify": "9.0.4",
    "del": "1.1.1",
    "bower-installer": "1.2.0",
    "vinyl-transform": "1.0.0"
  }
}

bower.json

{
  "name": "myproject",
  "version": "0.0.0",
  "homepage": "https://myproject.myproject",
  "authors": [
    "myproject"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components"
  ],
  "dependencies": {
    "normalize-scss": "3.0.2",
    "knockout": "3.3.0",
    "knockout-validation": "2.0.2",
    "jquery": "2.1.4",
    "jquery-1.11.2": "jquery#1.11.2",
    "jquery.transit": "0.9.12",
    "jquery.lazyload": "1.9.5",
    "jquery.cookie": "1.4.1",
    "jquery-ui": "1.11.4",
    "html5shiv": "3.7.2",
    "slick-carousel": "1.5.3"
  },
  "install": {
    "path": {
      "scss": "assets/styles/vendor/{name}",
      "css": "web/css/vendor/{name}",
      "js": "web/js/vendor/{name}",
      "map": "web/js/vendor/{name}",
      "/eot|otf|svg|ttf|woff/": "web/fonts/vendor/{name}"
    },
    "sources": {
      "normalize.scss": [
        "bower_components/normalize-scss/_normalize.scss"
      ],
      "knockout": [
        "bower_components/knockout/dist/knockout.js"
      ],
      "knockout-validation": [
        "bower_components/knockout-validation/dist/knockout.validation.min.js",
        "bower_components/knockout-validation/dist/knockout.validation.min.js.map",
        "bower_components/knockout-validation/localization/ja-JP.js"
      ],
      "jquery": [
        "bower_components/jquery/dist/jquery.js",
        "bower_components/jquery/dist/jquery.min.js",
        "bower_components/jquery/dist/jquery.min.map"
      ],
      "jquery-1.11.2": [
        "bower_components/jquery-1.11.2/dist/jquery.js",
        "bower_components/jquery-1.11.2/dist/jquery.min.js",
        "bower_components/jquery-1.11.2/dist/jquery.min.map"
      ],
      "jquery.transit": [
        "bower_components/jquery.transit/jquery.transit.js"
      ],
      "jquery.lazyload": [
        "bower_components/jquery.lazyload/jquery.lazyload.js"
      ],
      "jquery.cookie": [
        "bower_components/jquery.cookie/jquery.cookie.js"
      ],
      "jquery-ui": [
        "bower_components/jquery-ui/jquery-ui.min.js",
        "bower_components/jquery-ui/ui/minified/i18n/datepicker-ja.min.js",
        "bower_components/jquery-ui/themes/start/jquery-ui.css"
      ],
      "html5shiv": [
        "bower_components/html5shiv/dist/html5shiv.min.js"
      ],
      "slick-carousel": [
        "bower_components/slick-carousel/slick/slick.min.js",
        "bower_components/slick-carousel/slick/slick.scss",
        "bower_components/slick-carousel/slick/slick-theme.scss"
      ]
    }
  }
}

gulpfile.js

'use strict';

// -----------------------------------------------------------------------------
// VARIABLES & REQUIRE:

var PROJECT_ROOT = './',
    ASSETS_DIR   = PROJECT_ROOT + 'assets/',
    OUTPUT_DIR   = PROJECT_ROOT + 'web/';

var gulp = require('gulp'),
    $ = require('gulp-load-plugins')({
      pattern: ['gulp-*', 'gulp.*'],
      replaceString: /\bgulp[\-.]/,
    }),
    minimist = require('minimist'),
    del = require('del'),
    runSequence = require('run-sequence'),
    browserify = require('browserify'),
    transform = require('vinyl-transform'),
    bourbon = require('node-bourbon'),
    paths = {
      assets: {
        jsDir: {
          co: ASSETS_DIR + 'scripts',
          pc: ASSETS_DIR + 'scripts/pc',
          sp: ASSETS_DIR + 'scripts/sp',
        },
        scssDir: {
          co: ASSETS_DIR + 'styles',
          pc: ASSETS_DIR + 'styles/pc',
          sp: ASSETS_DIR + 'styles/sp',
        },
        scssSptiteDir: {
          pc: ASSETS_DIR + 'styles/pc/sprite',
          sp: ASSETS_DIR + 'styles/sp/sprite',
        },
        styleguideDir: ASSETS_DIR + 'styleguide',
      },
      output: {
        jsDir: {
          co: OUTPUT_DIR + 'js',
          pc: OUTPUT_DIR + 'js/pc',
          sp: OUTPUT_DIR + 'js/sp',
        },
        cssDir: {
          co: OUTPUT_DIR + 'css',
          pc: OUTPUT_DIR + 'css/pc',
          sp: OUTPUT_DIR + 'css/sp',
        },
        imgSptiteDir: {
          pc: OUTPUT_DIR + 'imgs/pc/sprite',
          sp: OUTPUT_DIR + 'imgs/sp/sprite',
        },
        styleguideDir: OUTPUT_DIR + 'styleguide',
        imageDir: OUTPUT_DIR + 'imgs',
      },
    };

// -----------------------------------------------------------------------------
// CLI OPTIONS:
// * --env prod - 本番用のオプション（ Minify Uglify などが実行される）
var args = {
  string: 'env',
  default: { env: process.env.NODE_ENV || 'dev' }
};
var options = minimist(process.argv.slice(2), args);
var isProduction = (options.env === 'prod') ? true : false;

// console.log('[build env]', options.env, '[is prod]', isProduction);

// -----------------------------------------------------------------------------
// TASK: SPRITE 生成
// * paths.assets.scssSptiteDir - スプライト用の元画像 & スプライト用テンプレート置き場
// * paths.output.imgSptiteDir  - 生成したスプライト画像置き場
// * Jinja template に Ratios が渡らないのでテンプレート側で調整

gulp.task('pc:glue', function() {
  return gulp.src(paths.assets.scssSptiteDir.pc + '/imgs/*')
    .pipe($.plumber())
    .pipe($.spriteGlue(paths.output.imgSptiteDir.pc, {
        scss: paths.assets.scssSptiteDir.pc,
        scssTemplate: paths.assets.scssSptiteDir.pc + '/template/scss.jinja',
        ratios: '2,1',
        margin: '4',
        namespace: '',
        cachebuster: true,
        // force: true,
    }));
});
gulp.task('sp:glue', function() {
  return gulp.src(paths.assets.scssSptiteDir.sp + '/imgs/*')
    .pipe($.plumber())
    .pipe($.spriteGlue(paths.output.imgSptiteDir.sp, {
        scss: paths.assets.scssSptiteDir.sp,
        scssTemplate: paths.assets.scssSptiteDir.sp + '/template/scss.jinja',
        ratios: '2,1',
        margin: '4',
        namespace: '',
        cachebuster: true,
        // force: true,
    }));
});

// -----------------------------------------------------------------------------
// TASK: SASS コンパイル [TODO: lib-sass 検討]

gulp.task('sass', function() {
  return gulp.src(paths.assets.scssDir.co + '/**/*.scss')
    .pipe($.plumber())
    .pipe($.sass({
      errLogToConsole: true,
      outputStyle: 'expanded',
      includePaths: bourbon.includePaths,
    }))
    .pipe(gulp.dest(paths.output.cssDir.co));
});

// -----------------------------------------------------------------------------
// TASK: Prefix をつける

gulp.task('pc:autoprefixer', function() {
  return gulp.src(paths.output.cssDir.pc + '/**/*.css')
    .pipe($.plumber())
    .pipe($.autoprefixer({ browsers: ['last 2 versions', 'ie 8', 'ie 9'] }))
    .pipe(gulp.dest(paths.output.cssDir.pc));
});
gulp.task('sp:autoprefixer', function() {
  return gulp.src(paths.output.cssDir.sp + '/**/*.css')
    .pipe($.plumber())
    .pipe($.autoprefixer({ browsers: ['iOS >= 5', 'Android >= 2.3'] }))
    .pipe(gulp.dest(paths.output.cssDir.sp));
});
gulp.task('autoprefixer', function(callback) {
  runSequence(['pc:autoprefixer', 'sp:autoprefixer'], callback);
});

// -----------------------------------------------------------------------------
// TASK: CSS の整理整頓
// * Media queries をまとめる
// * Minfy する

gulp.task('format:css', function() {
  return gulp.src(paths.output.cssDir.co + '/**/*.css')
    .pipe($.plumber())
    // MEMO: @charset "UTF-8"; が消えてしまうので無効にしている。要調査
    // .pipe($.combineMediaQueries())
    .pipe($.minifyCss({ compatibility: 'ie8' }))
    .pipe(gulp.dest(paths.output.cssDir.co));
});

// -----------------------------------------------------------------------------
// TASK: Browserify

gulp.task('pc:browserify', function() {
  return gulp.src(paths.assets.jsDir.pc + '/*.js')
    .pipe($.plumber())
    .pipe(transform(function(filename) {
      return browserify(filename, {
        paths: paths.assets.jsDir.co,
        debug: true
      }).bundle();
    }))
    .pipe(gulp.dest(paths.output.jsDir.pc));
});
gulp.task('sp:browserify', function() {
  return gulp.src(paths.assets.jsDir.sp + '/*.js')
    .pipe($.plumber())
    .pipe(transform(function(filename) {
      return browserify(filename, {
        paths: paths.assets.jsDir.co,
        debug: true
      }).bundle();
    }))
    .pipe(gulp.dest(paths.output.jsDir.sp));
});
gulp.task('browserify', function(callback) {
  runSequence(['pc:browserify', 'sp:browserify'], callback);
});

// -----------------------------------------------------------------------------
// TASK: UGLIFY

gulp.task('uglify', function() {
  return gulp.src([paths.output.jsDir.co + '/**/*.js', '!' + paths.output.jsDir.co + '/vendor/**/*.min.js'])
    .pipe($.plumber())
    .pipe($.uglify({
      preserveComments: 'some'
    }))
    .pipe(gulp.dest(paths.output.jsDir.co));
});

// -----------------------------------------------------------------------------
// TASK: Styleguide

gulp.task('pc:kss', function() {
  return gulp.src(paths.assets.scssDir.pc + '/**/*.scss')
    .pipe($.plumber())
    .pipe($.kssRobloach({
      overview: paths.assets.styleguideDir + '/styleguide.md'
    , templateDirectory: paths.assets.styleguideDir + '/template'
    }))
    .pipe(gulp.dest(paths.output.styleguideDir + '/pc'));
});
gulp.task('sp:kss', function() {
  return gulp.src(paths.assets.scssDir.sp + '/**/*.scss')
    .pipe($.plumber())
    .pipe($.kssRobloach({
      overview: paths.assets.styleguideDir + '/styleguide.md'
    , templateDirectory: paths.assets.styleguideDir + '/template'
    }))
    .pipe(gulp.dest(paths.output.styleguideDir + '/sp'));
});
gulp.task('styleguide', function(callback) {
  runSequence(['pc:kss', 'sp:kss'], callback);
});

// -----------------------------------------------------------------------------
// TASK: Styleguide 用にファイルを移動する

gulp.task('move:style', function() {
  return gulp.src(paths.output.co + '/**/styleguide.css')
    .pipe($.plumber())
    .pipe(gulp.dest(paths.output.styleguideDir + '/public/'));
});

// -----------------------------------------------------------------------------
// TASK: Clean 不要なファイルやディレクトリを削除

gulp.task('clean:css', del.bind(null, [
  paths.output.cssDir.co + '/**/sprite',
  paths.output.cssDir.co + '/**/styleguide.css',
]));
gulp.task('clean:js', del.bind(null, [
  paths.output.jsDir.co + '/vendor/jquery/jquery.js',
]));

// -----------------------------------------------------------------------------
// TASK: Iimagemin [TODO: pngquant 検討]

gulp.task('imagemin', function() {
  return gulp.src(paths.output.imageDir + '/**/*')
    .pipe($.plumber())
    .pipe($.imagemin())
    .pipe(gulp.dest(paths.output.imageDir));
});

// -----------------------------------------------------------------------------
// TASK: build

gulp.task('build', function(callback) {
  runSequence('build:sprite', ['build:css', 'build:js'], callback);
});
gulp.task('build:css', function(callback) {
  if (isProduction) runSequence('sass', 'autoprefixer', 'format:css', 'clean:css', callback);
  else              runSequence('sass', 'autoprefixer', callback);
});
gulp.task('build:js', function(callback) {
  if (isProduction) runSequence('browserify', 'clean:js', 'uglify', callback);
  else              runSequence('browserify', callback);
});
gulp.task('build:sprite', function(callback) {
  runSequence('pc:glue', 'sp:glue', callback);
});
gulp.task('build:styleguide', function(callback) {
  runSequence('sass', 'autoprefixer', 'styleguide', 'format:css', 'move:style', 'clean:css', callback);
});

// -----------------------------------------------------------------------------
// TASK: watch

gulp.task('watch', function() {
  gulp.watch(paths.assets.scssSptiteDir.pc + '/imgs/**/**', ['build:sprite']);
  gulp.watch(paths.assets.scssSptiteDir.sp + '/imgs/**/**', ['build:sprite']);
  gulp.watch(paths.assets.scssDir.co + '/**/*.css', ['build:css']);
  gulp.watch(paths.assets.scssDir.co + '/**/*.scss', ['build:css']);
  gulp.watch(paths.assets.jsDir.co   + '/**/*.js', ['build:js']);
});

gulp.task('watch:css', function() {
  gulp.watch(paths.assets.scssSptiteDir.pc + '/imgs/**/**', ['build:sprite']);
  gulp.watch(paths.assets.scssSptiteDir.sp + '/imgs/**/**', ['build:sprite']);
  gulp.watch(paths.assets.scssDir.co + '/**/*.css', ['build:css']);
  gulp.watch(paths.assets.scssDir.co + '/**/*.scss', ['build:css']);
});

gulp.task('watch:js', function() {
  gulp.watch(paths.assets.jsDir.co   + '/**/*.js', ['build:js']);
});

// -----------------------------------------------------------------------------
// TASK: default

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