aaronwaldon · February 3, 2018 05:28 · Nov 3, 2014 · Nov 3, 2014 · Nov 3, 2014
diff --git a/1) readme.md b/1) readme.md
@@ -9,9 +9,9 @@ The following steps only need to happen once:
 * **Step 2** If Node is not yet installed on the machine, it will need to be [installed](http://nodejs.org/download/).
 * **Step 3** If Gulp has never been set up on the machine, the Gulp CLI will also need to be installed by running `npm install gulp -g`
 * **Step 4** Switch to the project root via command line, and run `npm install` to install the dependencies.
-* **Step 5** Add a file with your projects logo named *gulp.png*. It should be 150px by 150px.
+* **Step 5** Add an image of your project's logo to your project root. The image should be named *gulp.png* and should be 150px by 150px.
 * **Step 6** Install the livereload browser extension, if it is not already installed.
-* **Step 7** Change `Your Project Name` to the name of your project in both *gulpfile.js* and package.json.
+* **Step 7** Change `Your Project Name` to the name of your project in both *gulpfile.js* and *package.json*.
 * **Step 8** Update any paths in *gulpfile.js* as needed.
 
 

diff --git a/1) readme.md b/1) readme.md
@@ -0,0 +1,20 @@
+#Gulp Workflow
+
+
+##First Time Setup
+
+The following steps only need to happen once:
+
+* **Step 1** Add *package.json* and *gulpfile.js* to the root of your project.
+* **Step 2** If Node is not yet installed on the machine, it will need to be [installed](http://nodejs.org/download/).
+* **Step 3** If Gulp has never been set up on the machine, the Gulp CLI will also need to be installed by running `npm install gulp -g`
+* **Step 4** Switch to the project root via command line, and run `npm install` to install the dependencies.
+* **Step 5** Add a file with your projects logo named *gulp.png*. It should be 150px by 150px.
+* **Step 6** Install the livereload browser extension, if it is not already installed.
+* **Step 7** Change `Your Project Name` to the name of your project in both *gulpfile.js* and package.json.
+* **Step 8** Update any paths in *gulpfile.js* as needed.
+
+
+##Usage
+
+Once everything has been set up, you simply need to run `gulp live` from a terminal (working directory should be the project root).
diff --git a/1) package.json → 2) package.json b/1) package.json → 2) package.json
diff --git a/3) gulp.png b/3) gulp.png
@@ -1 +0,0 @@
-Add an image named gulp.png to your projects root. The image should be 150px by 150px.

diff --git a/2) gulpfile.js → 3) gulpfile.js b/2) gulpfile.js → 3) gulpfile.js
diff --git a/1) package.json b/1) package.json
@@ -0,0 +1,22 @@
+{
+  "name": "Your Project Name",
+  "version": "0.0.0",
+  "description": "",
+  "devDependencies": {
+    "gulp": "^3.8.9",
+    "gulp-autoprefixer": "^1.0.1",
+    "gulp-concat": "^2.4.1",
+    "gulp-livereload": "^2.1.1",
+    "gulp-minify-css": "^0.3.11",
+    "gulp-newer": "^0.3.0",
+    "gulp-notify": "^2.0.0",
+    "gulp-plumber": "^0.6.6",
+    "gulp-rename": "^1.2.0",
+    "gulp-sass": "^1.2.2",
+    "gulp-size": "^1.1.0",
+    "gulp-uglify": "^1.0.1",
+    "gulp-watch": "^1.1.0",
+    "lazypipe": "^0.2.2",
+    "node-sass": "1.0.3"
+  }
+}
diff --git a/2) gulpfile.js b/2) gulpfile.js
@@ -0,0 +1,125 @@
+//load plugins
+var gulp             = require('gulp'),
+	autoprefixer     = require('gulp-autoprefixer'),
+	concat           = require('gulp-concat'),
+	livereload       = require('gulp-livereload'),
+	minifycss        = require('gulp-minify-css'),
+	newer            = require('gulp-newer'),
+	notify           = require('gulp-notify'),
+	plumber          = require('gulp-plumber'),
+	rename           = require('gulp-rename'),
+	sass             = require('gulp-sass'),
+	size             = require('gulp-size'),
+	uglify           = require('gulp-uglify'),
+	watch            = require('gulp-watch'),
+	path             = require('path'),
+	lazypipe         = require('lazypipe');
+
+//the title and icon that will be used for the Grunt notifications
+var notifyInfo = {
+	title: 'Your Project Name',
+	icon: path.join(__dirname, 'gulp.png')
+};
+
+//glob patterns that are used more than once
+var scssGlob = 'source/scss/**/*.scss',
+	jsIndividualGlob = 'source/js/individual/**/*.js',
+	jsCombinedGlob = 'source/js/combined/**/*.js';
+
+//error notification settings for plumber
+var plumberErrorHandler = function(err) {
+
+	console.log( 'plumber error!' );
+
+	notify.onError({
+		title: notifyInfo.title,
+		message: "Error: <%= err.message %>",
+		sound: 'Pop'
+	});
+	this.emit('end');
+};
+
+//processes scripts individually (doesn't combine them)
+var jsIndividualScripts = lazypipe()
+	.pipe(plumber, {errorHandler: plumberErrorHandler})
+	.pipe(newer, { dest: 'html/assets/js', ext: '.min.js' })
+	.pipe(gulp.dest, 'html/js')
+	.pipe(size, {showFiles: true})
+	.pipe(uglify)
+	.pipe(rename, { suffix: '.min' })
+	.pipe(gulp.dest, 'html/js')
+	.pipe(size, {showFiles: true});
+
+//processes scripts collectively (combines them into one file)
+var jsCombinedScripts = lazypipe()
+	.pipe(plumber, {errorHandler: plumberErrorHandler})
+	.pipe(newer, 'html/assets/js/main.min.js')
+	.pipe(concat, 'scripts.js')
+	.pipe(gulp.dest, 'html/assets/js')
+	.pipe(size, {showFiles: true})
+	.pipe(uglify)
+	.pipe(rename, { suffix: '.min' })
+	.pipe(gulp.dest, 'html/assets/js')
+	.pipe(size, {showFiles: true});
+
+//processes the scss
+var scssProcessing = lazypipe()
+	.pipe(plumber, {errorHandler: plumberErrorHandler})
+	.pipe(sass, {outputStyle: ':compact'})
+	.pipe(autoprefixer, 'last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')
+	.pipe(gulp.dest, 'html/assets/css')
+	.pipe(size, {showFiles: true})
+	.pipe(rename, { suffix: '.min' })
+	.pipe(minifycss)
+	.pipe(gulp.dest, 'html/assets/css')
+	.pipe(size, {showFiles: true});
+
+//styles task
+gulp.task('styles', function() {
+	return gulp.src(scssGlob).pipe(scssProcessing());
+});
+
+//scripts individual task
+gulp.task('scripts-individual', function() {
+	return gulp.src(jsIndividualGlob).pipe(jsIndividualScripts());
+});
+
+//scripts combined task
+gulp.task('scripts-combined', function() {
+	return gulp.src(jsCombinedGlob).pipe(jsCombinedScripts());
+});
+
+//watch task
+gulp.task('live', function() {
+	livereload.listen();
+
+	//watch all .scss files
+	gulp.watch(scssGlob, ['styles']);
+
+	//watch each individual .js file
+	watch(jsIndividualGlob).pipe(jsIndividualScripts());
+
+	//watch all combined .js files
+	gulp.watch(jsCombinedGlob, ['scripts-combined']);
+
+	//watch for changes on transpired templates, css, and js files
+	gulp.watch([
+		'craft/templates/**/*.twig',
+		'html/assets/js/**/*.min.js',
+		'html/assets/css/**/*.min.css'
+	], function(event) {
+		gulp.src(event.path)
+			.pipe(plumber())
+			.pipe(livereload())
+			.pipe(notify({
+				title: notifyInfo.title,
+				icon: notifyInfo.icon,
+				message: event.type + ': ' + event.path.replace(__dirname, '').replace(/\\/g, '/') + ' was reloaded',
+				sound: 'Pop'
+			})
+		);
+	});
+});
+
+//default task - one time styles and scripts
+gulp.task('default', ['styles', 'scripts-individual', 'scripts-combined']);
diff --git a/3) gulp.png b/3) gulp.png
Original file line number	Diff line number	Diff line change
		@@ -1 +0,0 @@
		Add an image named gulp.png to your projects root. The image should be 150px by 150px.