Gulp-Pattern Lab Helper

readme.markdown

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 and generate Pattern Lab.
2. Install node 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 (you'll need to do this on two terminal windows).

gulp

php core/builder.php -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.php -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
• Google's Web Starter Kit.
• Dan Tello's Gulp + Browserify: The Everything Post

gulpfile.js

//
// 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.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']);

package.json

{
  "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"
  }
}

Thanks for the shout-out. Glad I could help!