Gulp Workflow Snippet

.bowerrc

{
  "directory" : "src/assets/components"
}

.gitignore

# Node modules
/node_modules

# Bower components
/src/assets/components
/dist/

README.md

Gulp Workflow Snippet

With node, bower and gulp installed:

1. Create your project in a src directory.
2. All assets (css, js, images, components (from bower)) are placed within the src/assets/ directory.
3. Any templates/pages go within the src/pages directory.
4. Create your index.htmlfile within src, and place any scripts or stylesheets within blocks:

  <!-- build:css css/styles.min.css -->
	<link rel="stylesheet" href="assets/components/bootstrap-css-only/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/components/font-awesome/css/font-awesome.min.css">
  <!-- endbuild -->
  
	<!-- build:js js/app.min.js -->
	<script src="assets/components/angular/angular.min.js"></script>
	<script src="assets/components/angular-route/angular-route.min.js"></script>
	<!-- endbuild -->

5. Run gulp. This will build all of your files from src into a singular, concatenated minified file into a dist directory.
6. Any pages or additional directories (in this case api will be copied over).
7. Run gulp dev to work on the src files and have them built into dist in real time with live reload.

gulpfile.js

var gulp = require('gulp'),
  clean = require('gulp-clean'),
  jshint = require('gulp-jshint'),
  usemin = require('gulp-usemin'),
  minifyJS = require('gulp-uglify'),
  minifyCSS = require('gulp-minify-css'),
  rev = require('gulp-rev'),
  runSequence = require('run-sequence'),
  connect = require('gulp-connect');

/**
 * Paths
 */
var paths = {
  js: './src/assets/js/**/*.js',
  css: './src/assets/css/**/*.css',
  images: './src/assets/images/**.*',
  index: './src/index.html',
  pages: './src/pages/**.*',
  api: './src/api/**.*',
  dist: './dist',
};
 
/**
 * JSHint - Check for JS errors
 */
gulp.task('jshint', function() {
	return gulp.src(paths.js)
		.pipe(jshint())
		.pipe(jshint.reporter('default'));
});

/**
 * Clean - Clean out dist directory
 */
gulp.task('clean', function () {  
  return gulp.src(paths.dist, {read: false})
    .pipe(clean());
});

/**
 * Copy some files to dist
 */
gulp.task('copy', ['copy-pages', 'copy-api', 'copy-images']);

gulp.task('copy-pages', function() {
  return gulp.src(paths.pages)
    .pipe(gulp.dest(paths.dist + '/pages'));
});
gulp.task('copy-api', function() {
  return gulp.src(paths.api)
    .pipe(gulp.dest(paths.dist + '/api'));
});
gulp.task('copy-images', function() {
  return gulp.src(paths.images)
    .pipe(gulp.dest(paths.dist + '/images'));
});

/**
 * Minify all files into one and link this in our distribution output
 */
gulp.task('usemin', ['usemin-css', 'usemin-js']);

gulp.task('usemin-css', function() {
  return gulp.src(paths.index)
    .pipe(usemin({
      css: [minifyCSS(), rev(), 'concat']
    }))
    .pipe(gulp.dest(paths.dist));
});
gulp.task('usemin-js', function() {
  return gulp.src(paths.index)
    .pipe(usemin({
      js: [minifyJS(), rev(), 'concat']
    }))
    .pipe(gulp.dest(paths.dist));
});

/**
 * Watch for file chnages, and carry out a task. Then reload the page.
 */
gulp.task('watch', function () {
   gulp.watch([paths.css], ['usemin-css']);
   gulp.watch([paths.js], ['usemin-js']);
   gulp.watch([paths.pages], ['copy-pages']);
   gulp.watch([paths.api], ['copy-api']);
   gulp.watch([paths.images], ['copy-images']);
   connect.reload();
});

/** 
 * Create a local live reload server
 */
gulp.task('connect', function() {
  connect.server({
    root: paths.dist,
    port: 8080,
    livereload: true
  });
});

/**
 * `gulp` task
 */
gulp.task('default', function() {
	runSequence('jshint', 'clean', 'copy', 'usemin');
});

/**
 * `gulp dev` task
 */
gulp.task('dev', ['connect', 'watch']);

package.json

{
  "name": "Name",
  "description": "Description",
  "version": "0.0.1",
  "author": "Name",
  "devDependencies": {
    "bower": "^1.3.9",
    "gulp": "~3.8.0",
    "gulp-jshint": "~1.8.4",
    "gulp-clean": "~0.3.1",
    "gulp-usemin": "~0.3.8",
    "gulp-uglify": "~1.0.1",
    "gulp-minify-css": "~0.3.8",
    "run-sequence": "~0.3.6",
    "gulp-rev": "~1.1.0",
    "gulp-connect": "~2.0.6",
    "gulp-watch": "~1.0.4"
  }
}