Add gulp files and folders

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+*.log
+node_modules
+.sass-cache

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Kyle Brumm
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,37 @@
+Gulp Project Setup
+=============================
+
+A starter setup for a gulp project including:
++ JS (lint, minify, and concat)
++ SASS (compile)
++ CSS (minify)
++ Autoprefixer (Vendor Prefixes)
++ Images (image compression)
++ BrowserSync (css injection)
+
+## Requirements
+
+To use this you'll need the following installed:
+
++ [NodeJS](http://nodejs.org) - use the installer
++ [GulpJS](https://github.com/gulpjs/gulp) - `$ npm install -g gulp`
+
+## Setup
+
+1. `$ git clone [email protected]:kjbrum/Gulp-Project-Starter-Setup.git` or download it into a directory of your choice.
+2. Then run `$ npm install` inside that directory. (This should install all the plugins needed)
+
+## Usage
+
+1. To start the browser syncing and file watching, just run `$ gulp` in the project directory.
+2. Folders and file paths can be changed in gulpfile.js
+
+**Note:** For WordPress projects, install Gulp into the theme directory
+
+## Build Task
+
++ The build task should be ran when your project is ready for production.
++ What does the build task do differently?
+  + Compress your images
+  + Minify your CSS and not create sourcemaps
+  + Not start BrowserSync

gulpfile.js

@@ -0,0 +1,164 @@
+// Gulp
+var gulp = require('gulp');
+
+// Plugins
+var autoprefixer = require('gulp-autoprefixer');
+var browserSync = require('browser-sync');
+var cache = require('gulp-cache');
+var concat = require('gulp-concat');
+var del = require('del');
+var imagemin = require('gulp-imagemin');
+var jshint = require('gulp-jshint');
+var minifyCSS = require('gulp-minify-css');
+var notify = require('gulp-notify'); // Requires Growl on Windows
+var plumber = require('gulp-plumber');
+var rename = require('gulp-rename');
+var runSequence = require('run-sequence');
+var sass = require('gulp-ruby-sass'); // Requires Ruby
+var uglify = require('gulp-uglify');
+
+// Define our Paths
+var paths = {
+	scripts: 'js/**/*.js',
+	styles: 'sass/**/*.scss',
+	fonts: 'sass/fonts/*',
+	images: 'img/**/*.{png,jpg,jpeg,gif}'
+};
+
+var destPaths = {
+	scripts: 'build/js',
+	styles: 'build/css',
+	fonts: 'build/fonts',
+	images: 'build/img/'
+};
+
+// Error Handling
+// Send error to notification center with gulp-notify
+var handleErrors = function() {
+	notify.onError({
+		title: "Compile Error",
+		message: "<%= error.message %>"
+	}).apply(this, arguments);
+	this.emit('end');
+};
+
+// Compile our SASS
+gulp.task('styles', function() {
+	return gulp.src(paths.styles)
+		.pipe(plumber())
+		.pipe(sass({sourcemap: true, sourcemapPath: paths.styles}))
+		.pipe(autoprefixer())
+		.pipe(gulp.dest(destPaths.styles))
+		.pipe(notify('Styles task complete!'));
+});
+
+// Compile and Minify our SASS for Build
+gulp.task('build-styles', function() {
+	return gulp.src(paths.styles)
+		.pipe(plumber())
+		.pipe(sass())
+		.pipe(autoprefixer({
+			cascade: false
+		}))
+		.pipe(minifyCSS())
+		.pipe(gulp.dest(destPaths.styles))
+		.pipe(notify('Build styles task complete!'));
+});
+
+
+// Lint, Minify, and Concat our JS
+gulp.task('scripts', function() {
+	return gulp.src(paths.scripts)
+		.pipe(plumber())
+		.pipe(jshint())
+		.pipe(jshint.reporter('default'))
+		.pipe(uglify())
+		.pipe(concat('main.min.js'))
+		.pipe(gulp.dest(destPaths.scripts))
+		.pipe(notify('Scripts tasks complete!'));
+});
+
+// Clean Images Folder
+gulp.task('clean-images', function(cb) {
+	del([destPaths.images], cb);
+});
+
+// Move Images to Build Folder
+gulp.task('images', ['clean-images'], function() {
+	return gulp.src(paths.images)
+		.pipe(plumber())
+		.pipe(gulp.dest(destPaths.images))
+		.pipe(notify('Image optimized!'));
+});
+
+// Compress Images for Build
+gulp.task('build-images', function() {
+	return gulp.src(paths.images)
+		.pipe(plumber())
+		.pipe(imagemin({
+			progressive: true,
+			interlaced: true
+		}))
+		.pipe(gulp.dest(destPaths.images))
+		.pipe(notify('Image optimized!'));
+});
+
+// Watch for changes made to files
+gulp.task('watch', function() {
+	gulp.watch(paths.scripts, ['scripts']);
+	gulp.watch(paths.styles, ['styles']);
+	gulp.watch(paths.images, ['images'])
+});
+
+// Browser Sync - autoreload the browser
+// Additional Settings: http://www.browsersync.io/docs/options/
+gulp.task('browser-sync', function () {
+	var files = [
+		'**/*.html',
+		'**/*.php',
+		'build/css/style.css',
+		'build/js/main.min.js',
+		'build/img/**/*.{png,jpg,jpeg,gif}'
+	];
+	browserSync.init(files, {
+		// server: {
+		// 	baseDir: './'
+		// },
+		proxy: 'juice.github.dev', // Proxy for local dev sites
+		port: 5555, // Sets the port in which to serve the site
+		open: false, // Stops BS from opening a new browser window
+		// ghostMode: { // Disable ghosting features (Useful when sharing a link for people to troubleshoot)
+		// 	clicks: false,
+		// 	location: false,
+		// 	forms: false,
+		// 	scroll: false
+		// },
+		logPrefix: "Juice" // Display a different prefix in the command line
+	});
+});
+
+// Clean Build Folder
+gulp.task('clean', function(cb) {
+	del(['build'], cb);
+});
+
+// Clear the cache for everything
+gulp.task('clear-cache', function() {
+  cache.clearAll();
+});
+
+// Move Fonts to Build Folder
+gulp.task('move-fonts', function() {
+	gulp.src(paths.fonts)
+	.pipe(gulp.dest(destPaths.fonts));
+});
+
+// Default Task
+gulp.task('default', function(cb) {
+	runSequence('clean', 'clear-cache', 'images', 'scripts', 'styles', 'move-fonts', 'browser-sync', 'watch', cb);
+});
+
+// Build Task
+gulp.task('build', function(cb) {
+	runSequence('clean', 'clear-cache', 'build-images', 'build-styles', 'scripts', 'move-fonts', cb);
+});

index.html

@@ -1,17 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Juice: Mixins for life</title>
-    <link href="build/css/style.css" rel="stylesheet">
-
-  </head>
-  <body>
-    <h1>Juice.scss</h1>
-
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-    <script src="build/js/main.min.js"></script>
-  </body>
-</html>
+HTML goes here

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "Gulp-Project-Starter-Setup",
+  "version": "1.0.0",
+  "description": "Starter setup for using Gulp in a project.",
+  "license": "MIT",
+  "author": {
+    "name": "Kyle Brumm",
+    "email": "[email protected]",
+    "url": "http://kylebrumm.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:kjbrum/Gulp-Project-Starter-Setup.git"
+  },
+  "devDependencies": {
+    "browser-sync": "^1.3.3",
+    "del": "^0.1.3",
+    "gulp": "^3.8.7",
+    "gulp-autoprefixer": "^1.0.1",
+    "gulp-cache": "^0.2.0",
+    "gulp-concat": "^2.3.4",
+    "gulp-imagemin": "^0.6.2",
+    "gulp-jshint": "^1.8.4",
+    "gulp-minify-css": "^0.3.7",
+    "gulp-notify": "^1.4.2",
+    "gulp-plumber": "^0.6.4",
+    "gulp-rename": "^1.2.0",
+    "gulp-ruby-sass": "^0.7.1",
+    "gulp-uglify": "^0.3.1",
+    "run-sequence": "^0.3.6"
+  }
+}