updated banners and minified CSS files using gulp

css/agency.css

@@ -1,3 +1,8 @@
+/*!
+ * Start Bootstrap - Agency v1.0.7 (http://startbootstrap.com/template-overviews/agency)
+ * Copyright 2013-2016 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
+ */
 body {
   overflow-x: hidden;
   font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;

gulpfile.js

@@ -1,30 +1,61 @@
+// Assigning modules to local variables
 var gulp = require('gulp');
 var less = require('gulp-less');
 var browserSync = require('browser-sync').create();
+var header = require('gulp-header');
+var cleanCSS = require('gulp-clean-css');
+var rename = require("gulp-rename");
+var pkg = require('./package.json');
 
+// Set the banner content
+var banner = ['/*!\n',
+    ' * Start Bootstrap - <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n',
+    ' * Copyright 2013-' + (new Date()).getFullYear(), ' <%= pkg.author %>\n',
+    ' * Licensed under <%= pkg.license.type %> (<%= pkg.license.url %>)\n',
+    ' */\n',
+    ''
+].join('');
+
+// Default task
 gulp.task('default', function() {
     // default tasks here
 });
 
+// Less task to compile the less files and add the banner
 gulp.task('less', function() {
     return gulp.src('less/agency.less')
         .pipe(less())
+        .pipe(header(banner, { pkg: pkg }))
         .pipe(gulp.dest('css'))
         .pipe(browserSync.reload({
             stream: true
         }))
 });
 
+// Minify CSS
+gulp.task('minify-css', function() {
+    return gulp.src('css/agency.css')
+        .pipe(cleanCSS({ compatibility: 'ie8' }))
+        .pipe(rename({suffix: '.min'}))
+        .pipe(gulp.dest('css'))
+        .pipe(browserSync.reload({
+            stream: true
+        }))
+});
+
+// Grab Bootstrap core files from node_modules
 gulp.task('bootstrap', function() {
     return gulp.src(['node_modules/bootstrap/dist/**/*', '!**/npm.js', '!**/bootstrap-theme.*', '!**/*.map'])
         .pipe(gulp.dest(''))
 })
 
+// Grab jQuery core files from node_modules
 gulp.task('jquery', function() {
     return gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
         .pipe(gulp.dest('js'))
 })
 
+// Grab Font Awesome core files from node_modules
 gulp.task('fontawesome', function() {
     return gulp.src([
             'node_modules/font-awesome/**',
@@ -37,8 +68,10 @@ gulp.task('fontawesome', function() {
         .pipe(gulp.dest('font-awesome'))
 })
 
+// Updates all dependencies and puts them into their proper destinations
 gulp.task('update', ['bootstrap', 'jquery', 'fontawesome']);
 
+// Configure the browserSync task
 gulp.task('browserSync', function() {
     browserSync.init({
         server: {
@@ -47,9 +80,10 @@ gulp.task('browserSync', function() {
     })
 })
 
-// Watch Task
-gulp.task('watch', ['browserSync', 'less'], function() {
+// Watch Task that compiles LESS and watches for HTML or JS changes and reloads with browserSync
+gulp.task('watch', ['browserSync', 'less', 'minify-css'], function() {
     gulp.watch('less/*.less', ['less']);
+    gulp.watch('css/*.css', ['minify-css']);
     // Reloads the browser whenever HTML or JS files change
     gulp.watch('*.html', browserSync.reload);
     gulp.watch('js/**/*.js', browserSync.reload);

index.html

@@ -15,7 +15,7 @@
     <link href="css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Custom CSS -->
-    <link href="css/agency.css" rel="stylesheet">
+    <link href="css/agency.min.css" rel="stylesheet">
 
     <!-- Custom Fonts -->
     <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

package.json

@@ -11,9 +11,14 @@
   "devDependencies": {
     "bootstrap": "^3.3.6",
     "browser-sync": "^2.13.0",
+    "cssnano": "^3.7.1",
     "font-awesome": "^4.6.3",
     "gulp": "^3.9.1",
+    "gulp-clean-css": "^2.0.10",
+    "gulp-cssnano": "^2.1.2",
+    "gulp-header": "^1.8.7",
     "gulp-less": "^3.1.0",
+    "gulp-rename": "^1.2.2",
     "jquery": "^1.11.3"
   },
   "repository": {