freshyill · May 30, 2018 23:15 · Aug 15, 2014 · Jul 2, 2014 · Jul 2, 2014
diff --git a/readme.markdown b/readme.markdown
@@ -17,21 +17,24 @@ You have a few options for running Gulp with the builder.
 
 ### Production mode 
 
-This compresses images and styles, combines media queries, and concatenates and uglifies javascript.
+This compresses images and styles, combines media queries, and concatenates and uglifies javascript (you'll need to do this on two terminal windows).
 
-`gulp & php core/builder -w`
+`gulp`
 
-You can also run them separately in two terminals:
+`php core/builder.php -w`
 
-`gulp`
 
-`php core/builder -w`
+You can also run them together in one terminal (but I don't recommend it):
+
+`gulp & php core/builder.php -w`
 
 ### Development mode
 
 Images are compressed, styles are expanded and generated with a Sass sourcemap, and javascript is only concatenated.
 
-`gulp --dev & php core/builder -w`
+`gulp --dev`
+
+`php core/builder.php -w`
 
 
 ## Other notes

diff --git a/gulpfile.js b/gulpfile.js
@@ -46,7 +46,7 @@ var gulp         = require('gulp'),
     isProduction = true,
     sassStyle    = 'compressed',
     sourceMap    = false,
-    devUrl       = 'patternlab-playground.dev';
+    devUrl       = 'patternlab.dev';
 
 if ($.util.env.dev === true) {
     sassStyle    = 'expanded';

diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,177 @@
+//
+// Paths
+//
+
+var basePaths = {
+  src: 'source/',
+  dest: 'source/'
+};
+
+var paths = {
+  styles: {
+    src:        'source/css/',
+    publicDest: 'public/css/'
+  },
+  scripts: {
+    src:        'source/js/',
+    libSrc:     'source/js/lib/',
+    publicDest: 'public/js/'
+  },
+  images: {
+    src:        'source/images/',
+    publicDest: 'public/images/'
+  },
+  patterns: {
+    src:        'source/_patterns/'
+  }
+};
+
+var srcFiles = {
+  styles:    paths.styles.src   + '**/*.scss',
+  scripts:   paths.scripts.src  + '**/*.js',
+  jsLibs:    paths.scripts.libSrc  + '**/*.js',
+  images:    paths.images.src   + '**/*.*',
+  patterns:  paths.patterns.src + '**/*.*'
+};
+
+
+//
+// Gulp variables
+//
+var gulp         = require('gulp'),
+    $            = require('gulp-load-plugins')(),
+    del          = require('del'),
+    browserSync  = require('browser-sync'),
+    reload       = browserSync.reload,
+    isProduction = true,
+    sassStyle    = 'compressed',
+    sourceMap    = false,
+    devUrl       = 'patternlab-playground.dev';
+
+if ($.util.env.dev === true) {
+    sassStyle    = 'expanded';
+    sourceMap    = true;
+    isProduction = false;
+}
+
+var changeEvent = function(evt) {
+  $.util.log('File', $.util.colors.cyan(evt.path.replace(new RegExp('/.*(?=/' + basePaths.src + ')/'), '')), 'was', $.util.colors.magenta(evt.type));
+};
+
+
+//
+// Styles
+//
+gulp.task('styles', function () {
+  return gulp.src(srcFiles.styles)
+    .pipe($.rubySass({
+      style: sassStyle,
+      sourcemap: sourceMap,
+      precision: 10,
+      compass: true
+    }))
+    .pipe($.autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4', 'Firefox >= 4'))
+    .pipe(isProduction ? $.combineMediaQueries({ log: true }) : $.util.noop())
+    .pipe(isProduction ? $.csso() : $.util.noop())
+    .pipe($.size())
+    .pipe(gulp.dest(paths.styles.publicDest))
+    .pipe($.filter('*.css'))
+    .pipe($.notify('Styles task complete'))
+    .pipe(reload({ stream: true }));
+});
+
+
+//
+// Lint Scripts
+//
+gulp.task('jshint', function () {
+  return gulp.src([srcFiles.scripts, "!source/js/lib/**/*.js"])
+    .pipe(reload({stream: true, once: true}))
+    .pipe($.jshint())
+    .pipe($.jshint.reporter('jshint-stylish-ex'))
+    .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
+});
+
+
+//
+// Package Scripts
+//
+gulp.task('scripts', function () {
+  return gulp.src(srcFiles.scripts)
+    .pipe($.concat('app.js'))
+    .pipe(isProduction ? $.uglify() : $.util.noop())
+    .pipe($.size({title: 'scripts'}))
+    .pipe(gulp.dest(paths.scripts.publicDest))
+    .pipe($.filter('*.js'))
+    .pipe($.notify('Scripts task complete'))
+    .pipe(reload({ stream: true }));
+});
+
+
+//
+// Browser Sync
+//
+gulp.task('browserSync', function () {
+  browserSync.init(null, {
+    proxy: devUrl,
+    ghostMode: {
+      clicks: true,
+      scroll: true,
+      links: true,
+      forms: true
+    },
+    debugInfo: true
+  });
+});
+
+
+//
+// Browser Sync Reload
+//
+gulp.task('bs-reload', function () {
+  reload();
+});
+
+
+//
+// Images
+//
+gulp.task('images', function () {
+  return gulp.src(srcFiles.images)
+    .pipe($.cache($.imagemin({
+      optimizationLevel: 7,
+      progressive: true,
+      interlaced: true
+    })))
+    .pipe(gulp.dest(paths.images.publicDest))
+    .pipe($.size({title: 'images'}))
+    .pipe(reload({ stream: true }));
+});
+
+
+//
+// Watch
+//
+gulp.task('watch', ['styles', 'scripts', 'images', 'browserSync',], function () {
+  gulp.watch(srcFiles.styles, ['styles']).on('change', function(evt) {
+    changeEvent(evt);
+  });
+  gulp.watch(srcFiles.scripts, ['scripts']).on('change', function(evt) {
+    changeEvent(evt);
+});
+  gulp.watch(srcFiles.scripts, ['jshint']).on('change', function(evt) {
+    changeEvent(evt);
+  });
+  gulp.watch([srcFiles.patterns], ['bs-reload']).on('change', function(evt) {
+    changeEvent(evt);
+  });
+  gulp.watch(srcFiles.images, ['images']).on('change', function(evt) {
+    changeEvent(evt);
+  });
+});
+
+
+//
+// Default
+//
+gulp.task('default', ['watch']);
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "patternlab",
+  "description": "patternlab project files",
+  "version": "1.0.0",
+  "devDependencies": {
+    "browser-sync": "^1.1.1",
+    "browserify": "^4.2.0",
+    "del": "^0.1.1",
+    "gulp": "^3.8.2",
+    "gulp-autoprefixer": "0.0.7",
+    "gulp-cache": "^0.2.0",
+    "gulp-combine-media-queries": "0.0.1",
+    "gulp-concat": "^2.2.0",
+    "gulp-cssmin": "^0.1.6",
+    "gulp-csso": "^0.2.9",
+    "gulp-debug": "^0.3.0",
+    "gulp-filter": "^0.5.0",
+    "gulp-if": "^1.2.1",
+    "gulp-imagemin": "^0.6.1",
+    "gulp-jshint": "^1.6.3",
+    "gulp-load-plugins": "^0.5.3",
+    "gulp-notify": "^1.4.0",
+    "gulp-replace": "^0.3.0",
+    "gulp-ruby-sass": "^0.5.0",
+    "gulp-size": "^0.4.0",
+    "gulp-uglify": "^0.3.1",
+    "gulp-util": "^2.2.18",
+    "jshint-stylish-ex": "^0.2.0"
+  }
+}
diff --git a/readme.markdown b/readme.markdown
@@ -0,0 +1,53 @@
+# Gulp-Pattern Lab Helper
+
+Please note that this is a work in progress.
+
+This is a hopefully not-too-opinionated Gulpfile to help out with the PHP version of Pattern Lab. This isn't a full replacement for the PHP builder. You'll still need to run the builder to handle the heavy lifting with the Mustache templates.
+
+## Getting Started
+
+1. [Install](http://patternlab.io/docs/installation.html) and [generate](http://patternlab.io/docs/first-run.html) Pattern Lab.
+2. [Install node](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager) if you don't already have it.
+3. Drop in `gulpfile.js`, `package.json`, `.jshintrc` and `.stylishcolors`.
+4. `npm install` to install dependencies
+
+## Running Gulp and Pattern Lab
+
+You have a few options for running Gulp with the builder.
+
+### Production mode 
+
+This compresses images and styles, combines media queries, and concatenates and uglifies javascript.
+
+`gulp & php core/builder -w`
+
+You can also run them separately in two terminals:
+
+`gulp`
+
+`php core/builder -w`
+
+### Development mode
+
+Images are compressed, styles are expanded and generated with a Sass sourcemap, and javascript is only concatenated.
+
+`gulp --dev & php core/builder -w`
+
+
+## Other notes
+
+* JSHint is only run when you save scripts, not by default when watching
+* You can run any of the tasks individually:
+    * `gulp` 
+    * `gulp styles`
+    * `gulp jshint`
+    * `gulp scripts`
+    * `gulp images`
+
+## Acknowledgements
+
+This takes some inspiration from several excellent resources: 
+* Mike Street's [Advanced Gulp File](http://www.mikestreety.co.uk/blog/an-advanced-gulpjs-file)
+* Google's [Web Starter Kit](https://developers.google.com/web/starter-kit/).
+* Dan Tello's [Gulp + Browserify: The Everything Post](http://viget.com/extend/gulp-browserify-starter-faq)
+
No results found