Flow using Gulp

gulpfile.js

'use strict';

// Include Gulp & Tools We'll Use
var gulp = require('gulp');
var concat = require('gulp-concat');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var browserSync = require('browser-sync');
var pagespeed = require('psi');
var wiredep = require('wiredep').stream;
var reload = browserSync.reload;


var AUTOPREFIXER_BROWSERS = [
  'ie >= 10',
  'ie_mob >= 10',
  'ff >= 30',
  'chrome >= 34',
  'safari >= 7',
  'opera >= 23',
  'ios >= 7',
  'android >= 4.4',
  'bb >= 10'
];

// Lint JavaScript
gulp.task('jshint', function () {
  return gulp.src('app/scripts/**/*.js')
    .pipe(reload({stream: true, once: true}))
    .pipe($.jshint())
    .pipe($.jshint.reporter('jshint-stylish'))
    .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});

// Optimize Images
gulp.task('images', function () {
  return gulp.src('app/images/**/*')
    .pipe($.cache($.imagemin({
      progressive: true,
      interlaced: true
    })))
    .pipe(gulp.dest('dist/images'))
    .pipe($.size({title: 'images'}));
});

// Copy All Files At The Root Level (app)
gulp.task('copy', function () {
  return gulp.src([
    'app/*',
    '!app/*.html'
  ], {
    dot: true
  }).pipe(gulp.dest('dist'))
    .pipe($.size({title: 'copy'}));
});

// Copy Web Fonts To Dist
gulp.task('fonts', function () {
  return gulp.src(['app/fonts/**'])
    .pipe(gulp.dest('dist/fonts'))
    .pipe($.size({title: 'fonts'}));
});

// Compile and Automatically Prefix Stylesheets
gulp.task('styles', function () {
  // For best performance, don't add Sass partials to `gulp.src`
  return gulp.src([
      'app/styles/*.scss',
      'app/styles/**/*.scss',
      'app/styles/**/*.css',
      'app/styles/components/components.scss'
    ])
    .pipe($.changed('styles', {extension: '.scss'}))
    .pipe($.rubySass({
        style: 'expanded',
        precision: 10
      })
      .on('error', console.error.bind(console))
    )
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(gulp.dest('.tmp/styles'))
    .pipe($.if('*.css', $.csso()))
    .pipe(gulp.dest('dist/styles'))
    .pipe($.size({title: 'styles'}));
});

gulp.task('scripts', function() {
  return gulp.src([
      './app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js',
      './app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js',
      './app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js',
      './app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js',
      './app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js',
      './app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js',
      './app/vendors/bootstrap-sass-official/assets/javascripts/bootstrap/button.js'
    ])
    .pipe(concat('bootstrap.js'))
    .pipe(gulp.dest('././app/vendors/bootstrap-sass-official/assets/javascripts'));
});

// Scan Your HTML For Assets & Optimize Them
gulp.task('html', function () {
  var assets = $.useref.assets({searchPath: ['.tmp', 'app']});

  return gulp.src('app/**/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
    .pipe($.if('*.css', $.uncss({
      html: ['app/index.html'],
      ignore: [
        /.navdrawer-container.open/,
        /.app-bar.open/
      ]
    })))
    .pipe($.if('*.css', $.csso()))
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe($.replace('components/components.css', 'components/main.min.css'))
    .pipe($.if('*.html', $.minifyHtml()))
    .pipe(gulp.dest('dist'))
    .pipe($.size({title: 'html'}));
});

gulp.task('wiredep', function(){

  return gulp.src('./app/index.html')
    .pipe(wiredep({
      directory: './app/vendors',
      exclude: ['bootstrap-sass-official', 'requirejs'],
    }))
    .pipe(gulp.dest('./app'));
});

// Clean Output Directory
gulp.task('clean', del.bind(null, ['.tmp', 'dist', '.sass-cache']));

// Watch Files For Changes & Reload
gulp.task('serve', ['wiredep', 'styles'], function () {

  browserSync({
    notify: false,
    server: ['.tmp', 'app']
  });

  gulp.watch(['app/**/*.html'], reload);
  gulp.watch(['app/styles/**/*.{scss,css}'], ['styles', reload]);
  gulp.watch(['app/scripts/**/*.js'], ['jshint']);
  gulp.watch(['app/images/**/*'], reload);
});

// Build and serve the output from the dist build
gulp.task('serve:dist', ['default'], function () {
  browserSync({
    notify: false,
    server: 'dist'
  });
});

// Build Production Files, the Default Task
gulp.task('default', ['clean'], function (cb) {
  runSequence('styles', ['jshint', 'wiredep', 'html', 'images', 'fonts', 'copy'], cb);
});


// Load custom tasks from the `tasks` directory
try { require('require-dir')('tasks'); } catch (err) {}

// Run PageSpeed Insights
// Update `url` below to the public URL for your site
// gulp.task('pagespeed', pagespeed.bind(null, {
//   url: 'https://example.com',
//   strategy: 'mobile'
// }));

package.json

{
  "devDependencies": {
    "browser-sync": "^1.3.0",
    "del": "^0.1.2",
    "gulp": "^3.8.5",
    "gulp-autoprefixer": "^0.0.8",
    "gulp-bower": "0.0.6",
    "gulp-cache": "^0.2.2",
    "gulp-concat": "^2.4.1",
    "gulp-changed": "^1.0.0",
    "gulp-csso": "^0.2.9",
    "gulp-flatten": "^0.0.2",
    "gulp-if": "^1.2.1",
    "gulp-imagemin": "^1.0.0",
    "gulp-jshint": "^1.6.3",
    "gulp-load-plugins": "^0.5.3",
    "gulp-minify-html": "^0.1.4",
    "gulp-replace": "^0.4.0",
    "gulp-ruby-sass": "^0.7.1",
    "gulp-size": "^1.0.0",
    "gulp-uglify": "^0.3.1",
    "gulp-uncss": "^0.4.5",
    "gulp-useref": "^0.6.0",
    "jshint-stylish": "^0.4.0",
    "opn": "^1.0.0",
    "psi": "^0.1.2",
    "require-dir": "^0.1.0",
    "run-sequence": "^0.3.6",
    "wiredep": "^1.8.6"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "private": false
}