Merge pull request #46 from pattern-lab/dev

v1.1.0

packages/edition-node-gulp/README.md

@@ -13,12 +13,14 @@ The Gulp Edition comes with the following components:
 
 ## Prerequisites
 
-Pattern Lab Node uses [Node](https://nodejs.org) and  [npm](https://www.npmjs.com/) to manage project dependencies, and [gulp](http://gulpjs.com/) to run tasks and interface with core.
+Pattern Lab Node uses [Node](https://nodejs.org) and [npm](https://www.npmjs.com/) to manage project dependencies, and [gulp](http://gulpjs.com/) to run tasks and interface with core.
 
 Please follow the directions for [installing Node](https://nodejs.org/en/download/) on the Node website. This should include `npm`.
 
 It's also highly recommended that you [install gulp](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) globally.
 
+* Note: The Gulp Edition uses Gulp 4, which may require a new global install of the CLI tool Gulp uses. Follow the [gulp upgrade instructions](https://github.com/pattern-lab/edition-node-gulp/wiki/Updating-to-Gulp-4) if you already have gulp installed and need to upgrade.
+
 ## Installing
 
 There are two methods for downloading and installing the Gulp Edition:

packages/edition-node-gulp/gulpfile.js

@@ -3,61 +3,13 @@
  * EDITION-NODE-GULP
  * The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
 ******************************************************/
-var pkg = require('./package.json'),
-    gulp = require('gulp'),
-    path = require('path'),
-    browserSync = require('browser-sync').create(),
-    argv = require('minimist')(process.argv.slice(2));;
+var gulp = require('gulp'),
+  path = require('path'),
+  browserSync = require('browser-sync').create(),
+  argv = require('minimist')(process.argv.slice(2));
 
 /******************************************************
- * PATTERN LAB CONFIGURATION
-******************************************************/
-//read all paths from our namespaced config file
-var config = require('./patternlab-config.json'),
-    pl = require('patternlab-node')(config);
-
-function paths() {
-  return config.paths;
-}
-
-function getConfiguredCleanOption() {
-  return config.cleanPublic;
-}
-
-gulp.task('patternlab', ['pl-prelab'], function (done) {
-  pl.build(getConfiguredCleanOption());
-  done();
-});
-
-gulp.task('patternlab:version', function (done) {
-  pl.version();
-  done();
-});
-
-gulp.task('patternlab:help', function (done) {
-  console.log(getConfiguredCleanOption());
-  pl.help();
-  done();
-});
-
-
-gulp.task('patternlab:patternsonly', function (done) {
-  pl.patternsonly(getConfiguredCleanOption());
-  done();
-});
-
-gulp.task('patternlab:starterkit-list', function (done) {
-  pl.liststarterkits();
-  done();
-});
-
-gulp.task('patternlab:starterkit-load', function (done) {
-  pl.loadstarterkit(argv.kit);
-  done();
-});
-
-/******************************************************
- * COPY TASKS
+ * COPY TASKS - stream assets from source to destination
 ******************************************************/
 // JS copy
 gulp.task('pl-copy:js', function(){
@@ -67,9 +19,7 @@ gulp.task('pl-copy:js', function(){
 
 // Images copy
 gulp.task('pl-copy:img', function(){
-  return gulp.src(
-    [ '**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg'  ],
-    {cwd: path.resolve(paths().source.images)} )
+  return gulp.src('*',{cwd: path.resolve(paths().source.images)} )
     .pipe(gulp.dest(path.resolve(paths().public.images)));
 });
 
@@ -85,12 +35,6 @@ gulp.task('pl-copy:font', function(){
     .pipe(gulp.dest(path.resolve(paths().public.fonts)));
 });
 
-// Data copy
-gulp.task('pl-copy:data', function(){
-  return gulp.src('annotations.js', {cwd: path.resolve(paths().source.data)})
-    .pipe(gulp.dest(path.resolve(paths().public.data)));
-});
-
 // CSS Copy
 gulp.task('pl-copy:css', function(){
   return gulp.src(path.resolve(paths().source.css, '*.css'))
@@ -116,6 +60,67 @@ gulp.task('pl-copy:styleguide-css', function(){
     .pipe(browserSync.stream());
 });
 
+/******************************************************
+ * PATTERN LAB CONFIGURATION - API with core library
+******************************************************/
+//read all paths from our namespaced config file
+var config = require('./patternlab-config.json'),
+  patternlab = require('patternlab-node')(config);
+
+function paths() {
+  return config.paths;
+}
+
+function getConfiguredCleanOption() {
+  return config.cleanPublic;
+}
+
+function build(done) {
+  patternlab.build(done, getConfiguredCleanOption());
+}
+
+gulp.task('pl-assets', gulp.series(
+  gulp.parallel(
+    'pl-copy:js',
+    'pl-copy:img',
+    'pl-copy:favicon',
+    'pl-copy:font',
+    'pl-copy:css',
+    'pl-copy:styleguide',
+    'pl-copy:styleguide-css'
+  ),
+  function(done){
+    done();
+  })
+);
+
+gulp.task('patternlab:version', function (done) {
+  patternlab.version();
+  done();
+});
+
+gulp.task('patternlab:help', function (done) {
+  patternlab.help();
+  done();
+});
+
+gulp.task('patternlab:patternsonly', function (done) {
+  patternlab.patternsonly(done, getConfiguredCleanOption());
+});
+
+gulp.task('patternlab:liststarterkits', function (done) {
+  patternlab.liststarterkits();
+  done();
+});
+
+gulp.task('patternlab:loadstarterkit', function (done) {
+  patternlab.loadstarterkit(argv.kit, argv.clean);
+  done();
+});
+
+gulp.task('pl-build', gulp.series('pl-assets', build, function(done){
+  done();
+}));
 
 /******************************************************
  * SERVER AND WATCH TASKS
@@ -131,7 +136,28 @@ function getTemplateWatches() {
   });
 }
 
-gulp.task('pl-connect', ['pl-build'], function() {
+function reload() {
+  browserSync.reload();
+}
+
+function watch() {
+  gulp.watch(path.resolve(paths().source.css, '**/*.css')).on('change', gulp.series('pl-copy:css', reload));
+  gulp.watch(path.resolve(paths().source.styleguide, '**/*.*')).on('change', gulp.series('pl-copy:styleguide', 'pl-copy:styleguide-css', reload));
+
+  var patternWatches = [
+    path.resolve(paths().source.patterns, '**/*.json'),
+    path.resolve(paths().source.patterns, '**/*.md'),
+    path.resolve(paths().source.data, '*.json'),
+    path.resolve(paths().source.fonts + '/*'),
+    path.resolve(paths().source.images + '/*'),
+    path.resolve(paths().source.meta, '*'),
+    path.resolve(paths().source.annotations + '/*')
+  ].concat(getTemplateWatches());
+
+  gulp.watch(patternWatches).on('change', gulp.series(build, reload));
+}
+
+gulp.task('pl-connect', gulp.series(function(done) {
   browserSync.init({
     server: {
       baseDir: path.resolve(paths().public.root)
@@ -158,39 +184,15 @@ gulp.task('pl-connect', ['pl-build'], function() {
         'text-align: center'
       ]
     }
+  }, function(){
+    console.log('PATTERN LAB NODE WATCHING FOR CHANGES');
   });
-  gulp.watch(path.resolve(paths().source.css, '**/*.css'), ['pl-copy:css']);
-
-  gulp.watch(path.resolve(paths().source.styleguide, '**/*.*'), ['pl-copy:styleguide', 'pl-copy:styleguide-css']);
-
-  var patternWatches = [
-    path.resolve(paths().source.patterns, '**/*.json'),
-    path.resolve(paths().source.patterns, '**/*.md'),
-    path.resolve(paths().source.data, '*.json'),
-    path.resolve(paths().source.fonts + '/*'),
-    path.resolve(paths().source.images + '/*'),
-    path.resolve(paths().source.meta, '*'),
-    path.resolve(paths().source.annotations + '/*')
-  ].concat(getTemplateWatches());
-
-  gulp.watch(patternWatches, ['pl-pipe'], function () { browserSync.reload(); });
-});
-
-gulp.task('pl-pipe', ['pl-build'], function(cb){
-  cb();
-  browserSync.reload();
-});
+  done();
+}));
 
 /******************************************************
- * COMPOUND AND ALIASED TASKS
+ * COMPOUND TASKS
 ******************************************************/
-gulp.task('default', ['pl-build']);
-
-gulp.task('pl-assets', ['pl-copy:js', 'pl-copy:img', 'pl-copy:favicon', 'pl-copy:font', 'pl-copy:data', 'pl-copy:css', 'pl-copy:styleguide', 'pl-copy:styleguide-css' ]);
-gulp.task('pl-prelab', ['pl-assets']);
-gulp.task('pl-build', ['pl-prelab', 'patternlab'], function(cb){cb();});
-gulp.task('pl-serve', ['pl-build', 'pl-connect']);
-
-//Aliases
-gulp.task('pl-help', ['patternlab:help']);
-gulp.task('pl-patterns', ['patternlab:patternsonly']);
+gulp.task('default', gulp.series('pl-build'));
+gulp.task('patternlab:watch', gulp.series('pl-build', watch));
+gulp.task('patternlab:serve', gulp.series('pl-build', 'pl-connect', watch));

packages/edition-node-gulp/package.json

@@ -4,11 +4,11 @@
   "version": "1.0.0",
   "dependencies": {
     "browser-sync": "^2.11.2",
-    "gulp": "^3.9.1",
+    "gulp": "gulpjs/gulp#4.0",
     "minimist": "^1.2.0",
     "patternlab-node": "pattern-lab/patternlab-node#v2.0.0-alpha",
-    "styleguidekit-assets-default": "pattern-lab/styleguidekit-assets-default#feature-panels",
-    "styleguidekit-mustache-default": "pattern-lab/styleguidekit-mustache-default#feature-panels"
+    "styleguidekit-assets-default": "pattern-lab/styleguidekit-assets-default#dev",
+    "styleguidekit-mustache-default": "pattern-lab/styleguidekit-mustache-default#dev"
   },
   "keywords": [
     "Pattern Lab",

packages/edition-node-gulp/patternlab-config.json

@@ -26,10 +26,9 @@
     }
   },
   "styleGuideExcludes": [
-    "templates",
-    "pages"
   ],
   "defaultPattern": "all",
+  "defaultShowPatternInfo": true,
   "cleanPublic" : true,
   "patternExtension": "mustache",
   "ignored-extensions" : ["scss", "DS_Store", "less"],
@@ -56,13 +55,9 @@
   "ishMaximum": "2600",
   "patternStateCascade": ["inprogress", "inreview", "complete"],
   "patternStates": {
-    "molecules-single-comment" : "complete",
-    "organisms-sticky-comment" : "inreview",
-    "templates-article" : "complete"
   },
   "patternExportPatternPartials": [],
   "patternExportDirectory": "./pattern_exports/",
-  "baseurl" : "",
   "cacheBust": true,
   "starterkitSubDir": "dist"
 }

packages/edition-node-gulp/source/_annotations/annotations.js

@@ -1,34 +1,9 @@
 var comments = {
-"comments" : [
-	{
-		"el": "header[role=banner]",
-		"title" : "Masthead",
-		"comment": "The main header of the site doesn't take up too much screen real estate in order to keep the focus on the core content. It's using a linear CSS gradient instead of a background image to give greater design flexibility and reduce HTTP requests."
-	},
-	{
-		"el": ".logo",
-		"title" : "Logo",
-		"comment": "The logo image is an SVG file, which ensures that the logo displays crisply even on high resolution displays. A PNG fallback is provided for browsers that don't support SVG images.</p><p>Further reading: <a href=\"http://bradfrostweb.com/blog/mobile/hi-res-optimization/\">Optimizing Web Experiences for High Resolution Screens</a></p>"
-	},
-	{
-		"el": "#nav",
-		"title" : "Navigation",
-		"comment": "<p>Navigation for adaptive web experiences can be tricky. Top navigations are typical on desktop sites, but mobile screen sizes don't give us the luxury of space. We're dealing with this situation by creating a simple menu anchor that toggles the main navigation on small screens. This is just one method. <a href=\"http://bagcheck.com/\">Bagcheck</a> and <a href=\"http://contentsmagazine.com/\">Contents Magazine</a> add an anchor in the header that jumps users to the navigation which is placed in the footer. This solution works well because it doesn't require any Javascript in order to work. Other methods exist too. For example, <a href=\"http://m.espn.com\">ESPN's mobile navigation</a> overlays the main content of the page.</p><p>The nav is only hidden when a certain level of javascript is supported in order to ensure that users with little/poor javascript support can still access the navigation. Once the screen size is large enough to accommodate the nav, we show the main navigation links and hide the menu anchor.<p><p>See also: <a href=\"http://bradfrostweb.com/blog/web/responsive-nav-patterns/\">Responsive Navigation Patterns</a></p>"
-	},
-	{
-		"el": ".search-form",
-		"title" : "Search",
-		"comment": "<p>Search is an incredibly important priority, especially for mobile. It is a great idea to give users the ability to jump directly to what they are looking for without forcing them to wade through your site's navigation. Check out the <a href=\"http://burton.com\">Burton</a> and <a href=\"http://yelp.com\">Yelp</a> mobile sites for great examples of experiences that prioritize search.</p><p>We're also using the <a href=\"http://dev.w3.org/html5/markup/input.search.html\">HTML5 search input type</a>, which is great for mobile devices that can <a href=\"http://diveintohtml5.info/forms.html\">bring up the appropriate virtual keyboard</a> for many smartphones. And like the main header navigation, we're hiding the search form on small screens to save space. Clicking the search anchor toggles the form. </p>"
-	},
-	{
-		"el": ".article-header h1",
-		"title" : "Article Header",
-		"comment": "<p>The article header should be no more than 140 characters. </p>"
-	},
-	{
-		"el": ".block-hero",
-		"title" : "Hero",
-		"comment": "<p>The hero area highlights one major story using a large image and a captivating headline.</p>"
-	}
-]
-};
+	"comments" : [
+		{
+			"el": "#colors",
+			"title" : "Special Markup and Styling",
+			"comment": "This code uses pattern-scaffolding.css in the `source/css/` directory."
+		}
+	]
+};

packages/edition-node-gulp/source/_meta/_00-head.mustache

@@ -4,13 +4,13 @@
 		<title>{{ title }}</title>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width" />
-		
+
 		<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
+		<link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
 
 		<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
 		{{{ patternLabHead }}}
 		<!-- End Pattern Lab -->
-	
+
 	</head>
-	<body class="{{ bodyClass }}">	
-
+	<body class="{{ bodyClass }}">

packages/edition-node-gulp/source/_patterns/00-atoms/01-global/00-colors.md

@@ -0,0 +1,3 @@
+## Humble Beginnings
+
+Don't you love a good grayscale?

packages/edition-node-gulp/source/_patterns/00-atoms/01-global/00-colors.mustache

@@ -1,4 +1,4 @@
-<ul class="sg-colors">
+<ul class="sg-colors" id="colors">
 	<li>
 		<span class="sg-swatch" style="background: #ffffff;"></span>
 		<span class="sg-label">#ffffff</span>