GULP and BOWER

Installing third party packages using Bower and Gulp

INSTALLING BOWER:
npm install -g bower
bower init - bower.json file will be created
touch .bowerrc - .bowerrc file will be created if you want to change the default directory of bower packages that you install: Default bower directory is bower_components/
bower install
bower install --save [package name] - NOTE: do not forget --save so packages  will be added to dependencies of your bower.json

REQUIRED PACKAGES:
  concat = require('gulp-concat'),
  bower = require('gulp-bower'),
  mainBowerFiles = require('main-bower-files'),
  uglify = require('gulp-uglify'),
  filter = require('gulp-filter');

GULP TASKS:
/**
 * Let us define source and destination folder path
 */
var src = 'src/',
  dest = 'dist/';

// Include plugins
var plugins = require("gulp-load-plugins")({
  pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
  replaceString: /\bgulp[\-.]/,
});


gulp.task('js:plugin', function() {
  return gulp.src(plugins.mainBowerFiles({
      debugging: true
    }))
    .pipe(plugins.filter(['**/*.js', '!**/*.min.js']))
    .pipe(plugins.concat('plugin.min.js'))
    .pipe(plugins.uglify())
    .pipe(gulp.dest(dest + 'js'));
});

gulp.task('css:plugin', function() {
  return gulp.src(plugins.mainBowerFiles({
      debugging: true,
    }))
    .pipe(plugins.filter(['**/*.css', '!**/*.min.css']))
    .pipe(autoprefixer())
    .pipe(plugins.concat('plugin.min.css'))
    .pipe(gulp.dest(dest + 'css'));
});


SAMPLE bower.json file:
{
  "name": "wbtlaw.com",
  "description": "Custom WordPress Theme for wbtlaw.com",
  "main": "",
  "authors": [
    "Afterfive by Design | afterfivebydesign.com"
  ],
  "license": "MIT",
  "homepage": "www.wbtlaw.com",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "private": true,
  "dependencies": {
    "vis": "^4.20.0",
  }
}

SAMPLE .bowerrc file:
{
  "directory" : "src/components"
}