tdaubs · August 29, 2015 14:06 · Sep 25, 2014 · Sep 25, 2014 · Jul 24, 2014 · Jul 24, 2014
diff --git a/Gulp with ExpressionEngine → 1) gulp_w_expressionengine.readme b/Gulp with ExpressionEngine → 1) gulp_w_expressionengine.readme
diff --git a/1) readme.md → Gulp with ExpressionEngine b/1) readme.md → Gulp with ExpressionEngine
diff --git a/1) readme.md b/1) readme.md
@@ -45,7 +45,17 @@ Copy the gulp.js file (below) to the base of your site. The provided gulp.js fil
   * (gulp.png)[https://dl.dropboxusercontent.com/u/12922578/gulp.png]
 
 
+## Start Growl
+
+Make sure Growl is running, as notification will appear in it whenever the browser is livereloaded or whenever there is an error.
+
+
 ## Run Gulp
 
 * To just compile the scripts and SCSS one time, simply run the default command `gulp`. You can also run any of the other task names, like `gulp styles`.
-* To watch the templates, .scss, and .js files for changes, and to automatically compile and minify the relevant files, run the command `gulp live`. If the livereload browser extensions are installed and enabled, the browser will automatically refresh when any changes are made to style and javascript files in the *src* directory, or to any template files in the *templates* directory.
+* To watch the templates, .scss, and .js files for changes, and to automatically compile and minify the relevant files, run the command `gulp live`. If the livereload browser extensions are installed and enabled, the browser will automatically refresh when any changes are made to style and javascript files in the *src* directory, or to any template files in the *templates* directory.
+
+
+## Customize
+
+You can change the title and image that show up in the Growl messages, by editing the `notifyInfo` object values. :)
diff --git a/1) readme.md b/1) readme.md
@@ -15,7 +15,7 @@ I freaking love working with technologies like Grunt and Gulp, and wanted to sha
 
 If a package.json file already exists with list of all of the dependencies that Gulp will need for the project, then you can simply switch to the project root directory in the site terminal and run the command `npm install`. This only needs to happen once so that the dependencies can be downloaded for the project.
 
-If a package.json file does not exist, switch to the project root directory for the site in a terminal. For this configuration, you can install gulp and the needed dependencies using the command `npm install gulp-compass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-rename gulp-livereload tiny-lr gulp-cache --save-dev`. You only need to do this once so that the dependencies can be downloaded for the project.
+If a package.json file does not exist, switch to the project root directory for the site in a terminal. For this configuration, you can install gulp and the needed dependencies using the command `npm install gulp gulp-compass gulp-autoprefixer gulp-minify-css gulp-uglify gulp-rename gulp-concat gulp-notify gulp-livereload gulp-plumber --save-dev`. You only need to do this once so that the dependencies can be downloaded for the project.
 
 
 ## Add the gulp.js file
@@ -42,6 +42,7 @@ Copy the gulp.js file (below) to the base of your site. The provided gulp.js fil
   * templates/ (EE templates)
   * gulpfile.js
   * package.json (will be added when gulp is installed via CLI)
+  * (gulp.png)[https://dl.dropboxusercontent.com/u/12922578/gulp.png]
 
 
 ## Run Gulp

diff --git a/2) gulpfile.js b/2) gulpfile.js
@@ -1,22 +1,34 @@
 //load plugins
-var gulp = require('gulp'),
-	compass = require('gulp-compass'),
-	autoprefixer = require('gulp-autoprefixer'),
-	minifycss = require('gulp-minify-css'),
-	//jshint = require('gulp-jshint'),
-	uglify = require('gulp-uglify'),
-	imagemin = require('gulp-imagemin'),
-	rename = require('gulp-rename'),
-	concat = require('gulp-concat'),
-	notify = require('gulp-notify'),
-	cache = require('gulp-cache'),
-	refresh = require('gulp-livereload'),
-	lr = require('tiny-lr'),
-	server = lr();
+var gulp             = require('gulp'),
+	compass          = require('gulp-compass'),
+	autoprefixer     = require('gulp-autoprefixer'),
+	minifycss        = require('gulp-minify-css'),
+	uglify           = require('gulp-uglify'),
+	rename           = require('gulp-rename'),
+	concat           = require('gulp-concat'),
+	notify           = require('gulp-notify'),
+	livereload       = require('gulp-livereload'),
+	plumber          = require('gulp-plumber'),
+	path             = require('path');
+
+//the title and icon that will be used for the Grunt notifications
+var notifyInfo = {
+	title: 'Gulp',
+	icon: path.join(__dirname, 'gulp.png')
+};
+
+//error notification settings for plumber
+var plumberErrorHandler = { errorHandler: notify.onError({
+		title: notifyInfo.title,
+		icon: notifyInfo.icon,
+		message: "Error: <%= error.message %>"
+	})
+};
 
 //styles
 gulp.task('styles', function() {
 	return gulp.src(['src/scss/**/*.scss'])
+		.pipe(plumber(plumberErrorHandler))
 		.pipe(compass({
 			css: 'html/css',
 			sass: 'src/scss',
@@ -26,70 +38,40 @@ gulp.task('styles', function() {
 		.pipe(gulp.dest('html/css'))
 		.pipe(rename({ suffix: '.min' }))
 		.pipe(minifycss())
-		.pipe(gulp.dest('html/css'))
-		.pipe(refresh(server));
+		.pipe(gulp.dest('html/css'));
 });
 
 //scripts
 gulp.task('scripts', function() {
 	return gulp.src('src/js/**/*.js')
-		//.pipe(jshint('.jshintrc'))
-		//.pipe(jshint.reporter('default'))
+		.pipe(plumber(plumberErrorHandler))
 		.pipe(concat('main.js'))
 		.pipe(gulp.dest('html/js'))
 		.pipe(rename({ suffix: '.min' }))
 		.pipe(uglify())
-		.pipe(gulp.dest('html/js'))
-		.pipe(refresh(server));
-});
-
-//html
-gulp.task('html', function() {
-	return gulp.src('templates/**/*.html')
-		.pipe(refresh(server));
-});
-
-//images
-gulp.task('images', function() {
-	return gulp.src('html/images/**/*')
-		.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
-		.pipe(refresh(server))
-		.pipe(gulp.dest('html/images'));
-});
-
-//default task
-gulp.task('default', [], function() {
-	gulp.run('styles', 'scripts' ); //, 'images');
-});
-
-gulp.task('livereload', function(){
-	server.listen(35729, function(err){
-		if(err) return console.log(err);
-	});
+		.pipe(gulp.dest('html/js'));
 });
 
 //watch
 gulp.task('live', function() {
-	gulp.run('livereload', 'styles');
+	livereload.listen();
 
 	//watch .scss files
-	gulp.watch('src/scss/**/*.scss', function(event) {
-		gulp.run('styles');
-	});
+	gulp.watch('src/scss/**/*.scss', ['styles']);
 
 	//watch .js files
-	gulp.watch('src/js/**/*.js', function(event) {
-		gulp.run('scripts');
-	});
-
-	//watch image files
-	//gulp.watch('html/images/**/*', function(event) {
-	//	console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
-	//	gulp.run('images');
-	//});
+	gulp.watch('src/js/**/*.js', ['scripts']);
 
-	//watch template files
-	gulp.watch('templates/**/*.html', function(event) {
-		gulp.run('html');
+	//reload when a template file, the minified css, or the minified js file changes
+	gulp.watch('templates/**/*.html', 'html/css/styles.min.css', 'html/js/main.min.js', function(event) {
+		gulp.src(event.path)
+			.pipe(plumber())
+			.pipe(livereload())
+			.pipe(notify({
+				title: notifyInfo.title,
+				icon: notifyInfo.icon,
+				message: event.path.replace(__dirname, '').replace(/\\/g, '/') + ' was ' + event.type + ' and reloaded'
+			})
+		);
 	});
 });
diff --git a/2) gulp.js → 2) gulpfile.js b/2) gulp.js → 2) gulpfile.js
diff --git a/1) readme.md b/1) readme.md
@@ -1,18 +1,31 @@
-### Install Node.js
+# How to set up Gulp with an ExpressionEngine project
+
+I freaking love working with technologies like Grunt and Gulp, and wanted to share how to get my current EE front-end workflow set up. With a few tweaks, this can also be used with virtually any other sites (I've used it with Laravel, static sites, Craft, etc).
+
+## Install Node.js
 
 * If Node is not yet installed on the machine, it will need to be [installed](http://nodejs.org/download/)
 
 
-### Install Gulp
+## Install Gulp (if needed)
 
 * 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`
-* To install Gulp for the project (this only needs to happen once), switch to the root directory for the site in a terminal. For my configuration, you can install gulp and the dependencies using the command `npm install gulp-compass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-rename gulp-livereload tiny-lr gulp-cache --save-dev`. Again, you only need to do this once.
-* Make sure and copy the gulp.js file to the base of your site. The provided gulp.js file is set up for the following file configuration
 
-### Project Directory Structure
+### Install Gulp for the project (if needed)
+
+If a package.json file already exists with list of all of the dependencies that Gulp will need for the project, then you can simply switch to the project root directory in the site terminal and run the command `npm install`. This only needs to happen once so that the dependencies can be downloaded for the project.
+
+If a package.json file does not exist, switch to the project root directory for the site in a terminal. For this configuration, you can install gulp and the needed dependencies using the command `npm install gulp-compass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-rename gulp-livereload tiny-lr gulp-cache --save-dev`. You only need to do this once so that the dependencies can be downloaded for the project.
+
+
+## Add the gulp.js file
+
+Copy the gulp.js file (below) to the base of your site. The provided gulp.js file is set up to work with the following project directory structure.
+
+
+## Project Directory Structure
 
 * project root/
-  * config/ ([Master Config](https://github.com/focuslabllc/ee-master-config) files)
   * html/ (web root)
     * css/
     * js/
@@ -31,7 +44,7 @@
   * package.json (will be added when gulp is installed via CLI)
 
 
-### Run Gulp
+## Run Gulp
 
-* To just compile the scripts and SCSS one time, simply run the command `gulp`. You can also run any of the other task names, like `gulp styles`.
-* To watch the templates, .scss, and .js files for changes, and to automatically compile and minify the relevant files, run the command `gulp live`. If the livereload browser extensions are installed and enabled, the browser will automatically refresh when any changes are made.
+* To just compile the scripts and SCSS one time, simply run the default command `gulp`. You can also run any of the other task names, like `gulp styles`.
+* To watch the templates, .scss, and .js files for changes, and to automatically compile and minify the relevant files, run the command `gulp live`. If the livereload browser extensions are installed and enabled, the browser will automatically refresh when any changes are made to style and javascript files in the *src* directory, or to any template files in the *templates* directory.
diff --git a/readme.md → 1) readme.md b/readme.md → 1) readme.md
diff --git a/gulp.js → 2) gulp.js b/gulp.js → 2) gulp.js
diff --git a/3) .gitignore b/3) .gitignore
@@ -0,0 +1,5 @@
+#node files
+/node_modules/*
+
+#sass cache files
+.sass-cache
diff --git a/readme.md b/readme.md
@@ -9,7 +9,7 @@
 * To install Gulp for the project (this only needs to happen once), switch to the root directory for the site in a terminal. For my configuration, you can install gulp and the dependencies using the command `npm install gulp-compass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-rename gulp-livereload tiny-lr gulp-cache --save-dev`. Again, you only need to do this once.
 * Make sure and copy the gulp.js file to the base of your site. The provided gulp.js file is set up for the following file configuration
 
-### Project Structure
+### Project Directory Structure
 
 * project root/
   * config/ ([Master Config](https://github.com/focuslabllc/ee-master-config) files)
@@ -33,9 +33,5 @@
 
 ### Run Gulp
 
-* To just compile the scripts and SCSS one time, simply run the command `gulp`.
-* To watch the templates, .scss, and .js files for changes, and to automatically compile and minify the relevant files, run the command `gulp live`. If the livereload browser extensions are installed and enabled, the browser will automatically refresh when any changes are made.
-
-
-
-## Directory Structure
+* To just compile the scripts and SCSS one time, simply run the command `gulp`. You can also run any of the other task names, like `gulp styles`.
+* To watch the templates, .scss, and .js files for changes, and to automatically compile and minify the relevant files, run the command `gulp live`. If the livereload browser extensions are installed and enabled, the browser will automatically refresh when any changes are made.
diff --git a/readme.md b/readme.md
@@ -11,23 +11,24 @@
 
 ### Project Structure
 
-config ([Master Config](https://github.com/focuslabllc/ee-master-config) files)
-html (web root)
-+css
-+js
-+images
-src
-+js
-++plugins.js
-++site.js
-++[various .js files]
-+scss
-++[various .scss files]
-++styles.scss
-system (EE system folder)
-templates (EE templates)
-gulpfile.js
-package.json (will be added when gulp is installed via CLI)
+* project root/
+  * config/ ([Master Config](https://github.com/focuslabllc/ee-master-config) files)
+  * html/ (web root)
+    * css/
+    * js/
+    * images/
+  * src/
+    * js/
+      * plugins.js
+      * site.js
+      * [various .js files]
+    * scss/
+      * [various .scss files]
+      * styles.scss
+  * system/ (EE system folder)
+  * templates/ (EE templates)
+  * gulpfile.js
+  * package.json (will be added when gulp is installed via CLI)
 
 
 ### Run Gulp

diff --git a/readme.md b/readme.md
@@ -13,17 +13,17 @@
 
 config ([Master Config](https://github.com/focuslabllc/ee-master-config) files)
 html (web root)
-=css
-=js
-=images
++css
++js
++images
 src
-=js
-==plugins.js
-==site.js
-==[various .js files]
-=scss
-==[various .scss files]
-==styles.scss
++js
+++plugins.js
+++site.js
+++[various .js files]
++scss
+++[various .scss files]
+++styles.scss
 system (EE system folder)
 templates (EE templates)
 gulpfile.js

diff --git a/readme.md b/readme.md
@@ -9,29 +9,25 @@
 * To install Gulp for the project (this only needs to happen once), switch to the root directory for the site in a terminal. For my configuration, you can install gulp and the dependencies using the command `npm install gulp-compass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-rename gulp-livereload tiny-lr gulp-cache --save-dev`. Again, you only need to do this once.
 * Make sure and copy the gulp.js file to the base of your site. The provided gulp.js file is set up for the following file configuration
 
--base
---config
-
-++html (web root)
-+++css
-+++js
-+++images
-
-++src
-+++js
-++++plugins.js
-++++site.js
-+++scss
-++++[various .scss files]
-++++styles.scss
-
-++system (EE system folder)
-
-++templates (EE templates)
-
-++gulpfile.js
-
-++package.json (will be added when gulp is installed via CLI)
+### Project Structure
+
+config ([Master Config](https://github.com/focuslabllc/ee-master-config) files)
+html (web root)
+=css
+=js
+=images
+src
+=js
+==plugins.js
+==site.js
+==[various .js files]
+=scss
+==[various .scss files]
+==styles.scss
+system (EE system folder)
+templates (EE templates)
+gulpfile.js
+package.json (will be added when gulp is installed via CLI)
 
 
 ### Run Gulp

diff --git a/readme.md b/readme.md
@@ -9,8 +9,8 @@
 * To install Gulp for the project (this only needs to happen once), switch to the root directory for the site in a terminal. For my configuration, you can install gulp and the dependencies using the command `npm install gulp-compass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-rename gulp-livereload tiny-lr gulp-cache --save-dev`. Again, you only need to do this once.
 * Make sure and copy the gulp.js file to the base of your site. The provided gulp.js file is set up for the following file configuration
 
-+base
-++config
+-base
+--config
 
 ++html (web root)
 +++css

diff --git a/gulp.js b/gulp.js
@@ -0,0 +1,95 @@
+//load plugins
+var gulp = require('gulp'),
+	compass = require('gulp-compass'),
+	autoprefixer = require('gulp-autoprefixer'),
+	minifycss = require('gulp-minify-css'),
+	//jshint = require('gulp-jshint'),
+	uglify = require('gulp-uglify'),
+	imagemin = require('gulp-imagemin'),
+	rename = require('gulp-rename'),
+	concat = require('gulp-concat'),
+	notify = require('gulp-notify'),
+	cache = require('gulp-cache'),
+	refresh = require('gulp-livereload'),
+	lr = require('tiny-lr'),
+	server = lr();
+
+//styles
+gulp.task('styles', function() {
+	return gulp.src(['src/scss/**/*.scss'])
+		.pipe(compass({
+			css: 'html/css',
+			sass: 'src/scss',
+			image: 'html/images'
+		}))
+		.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
+		.pipe(gulp.dest('html/css'))
+		.pipe(rename({ suffix: '.min' }))
+		.pipe(minifycss())
+		.pipe(gulp.dest('html/css'))
+		.pipe(refresh(server));
+});
+
+//scripts
+gulp.task('scripts', function() {
+	return gulp.src('src/js/**/*.js')
+		//.pipe(jshint('.jshintrc'))
+		//.pipe(jshint.reporter('default'))
+		.pipe(concat('main.js'))
+		.pipe(gulp.dest('html/js'))
+		.pipe(rename({ suffix: '.min' }))
+		.pipe(uglify())
+		.pipe(gulp.dest('html/js'))
+		.pipe(refresh(server));
+});
+
+//html
+gulp.task('html', function() {
+	return gulp.src('templates/**/*.html')
+		.pipe(refresh(server));
+});
+
+//images
+gulp.task('images', function() {
+	return gulp.src('html/images/**/*')
+		.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
+		.pipe(refresh(server))
+		.pipe(gulp.dest('html/images'));
+});
+
+//default task
+gulp.task('default', [], function() {
+	gulp.run('styles', 'scripts' ); //, 'images');
+});
+
+gulp.task('livereload', function(){
+	server.listen(35729, function(err){
+		if(err) return console.log(err);
+	});
+});
+
+//watch
+gulp.task('live', function() {
+	gulp.run('livereload', 'styles');
+
+	//watch .scss files
+	gulp.watch('src/scss/**/*.scss', function(event) {
+		gulp.run('styles');
+	});
+
+	//watch .js files
+	gulp.watch('src/js/**/*.js', function(event) {
+		gulp.run('scripts');
+	});
+
+	//watch image files
+	//gulp.watch('html/images/**/*', function(event) {
+	//	console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
+	//	gulp.run('images');
+	//});
+
+	//watch template files
+	gulp.watch('templates/**/*.html', function(event) {
+		gulp.run('html');
+	});
+});
diff --git a/readme.md b/readme.md
@@ -0,0 +1,44 @@
+### Install Node.js
+
+* If Node is not yet installed on the machine, it will need to be [installed](http://nodejs.org/download/)
+
+
+### Install Gulp
+
+* 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`
+* To install Gulp for the project (this only needs to happen once), switch to the root directory for the site in a terminal. For my configuration, you can install gulp and the dependencies using the command `npm install gulp-compass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-rename gulp-livereload tiny-lr gulp-cache --save-dev`. Again, you only need to do this once.
+* Make sure and copy the gulp.js file to the base of your site. The provided gulp.js file is set up for the following file configuration
+
++base
+++config
+
+++html (web root)
++++css
++++js
++++images
+
+++src
++++js
+++++plugins.js
+++++site.js
++++scss
+++++[various .scss files]
+++++styles.scss
+
+++system (EE system folder)
+
+++templates (EE templates)
+
+++gulpfile.js
+
+++package.json (will be added when gulp is installed via CLI)
+
+
+### Run Gulp
+
+* To just compile the scripts and SCSS one time, simply run the command `gulp`.
+* To watch the templates, .scss, and .js files for changes, and to automatically compile and minify the relevant files, run the command `gulp live`. If the livereload browser extensions are installed and enabled, the browser will automatically refresh when any changes are made.
+
+
+
+## Directory Structure