From 0927706c16e873d5115aa8127cba9dc4581115ff Mon Sep 17 00:00:00 2001 From: e2tha-e Date: Thu, 10 Sep 2015 10:49:09 -0400 Subject: [PATCH 01/10] more-flexible-mustache-partial-syntax --- builder/parameter_hunter.js | 4 ++-- builder/pattern_assembler.js | 11 +++++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/builder/parameter_hunter.js b/builder/parameter_hunter.js index 089b80055..69fff3eba 100644 --- a/builder/parameter_hunter.js +++ b/builder/parameter_hunter.js @@ -21,12 +21,12 @@ function findparameters(pattern, patternlab){ //find the {{> template-name(*) }} within patterns - var matches = pattern.template.match(/{{>([ ]+)?([A-Za-z0-9-]+)(\()(.+)(\))([ ]+)?}}/g); + var matches = pattern.template.match(/{{>([ ]+)?([\w\-\.\/~]+)(\()(.+)(\))([ ]+)?}}/g); if(matches !== null){ //compile this partial immeadiately, essentially consuming it. matches.forEach(function(pMatch, index, matches){ //find the partial's name - var partialName = pMatch.match(/([a-z-]+)/ig)[0]; + var partialName = pMatch.match(/([\w\-\.\/~]+)/g)[0]; if(patternlab.config.debug){ console.log('found patternParameters for ' + partialName); diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index 98b661783..7996d6f92 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -25,7 +25,7 @@ //find and return any {{> template-name }} within pattern function findPartials(pattern){ - var matches = pattern.template.match(/{{>([ ])?([A-Za-z0-9-]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g); + var matches = pattern.template.match(/{{>([ ])?([\w\-\.\/~]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g); return matches; } @@ -138,7 +138,7 @@ //do something with the regular old partials for(var i = 0; i < foundPatternPartials.length; i++){ - var partialKey = foundPatternPartials[i].replace(/{{>([ ])?([A-Za-z0-9-]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g, '$2'); + var partialKey = foundPatternPartials[i].replace(/{{>([ ])?([\w\-\.\/~]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g, '$2'); var partialPattern = getpatternbykey(partialKey, patternlab); currentPattern.extendedTemplate = currentPattern.extendedTemplate.replace(foundPatternPartials[i], partialPattern.extendedTemplate); } @@ -157,8 +157,11 @@ function getpatternbykey(key, patternlab){ for(var i = 0; i < patternlab.patterns.length; i++){ - if(patternlab.patterns[i].key === key){ - return patternlab.patterns[i]; + switch (key) { + case patternlab.patterns[i].key: + case patternlab.patterns[i].subdir + '/' + patternlab.patterns[i].fileName: + case patternlab.patterns[i].subdir + '/' + patternlab.patterns[i].fileName + '.mustache': + return patternlab.patterns[i]; } } throw 'Could not find pattern with key ' + key; From dedc09378573a328673b04c0e0e1de4668092ef4 Mon Sep 17 00:00:00 2001 From: e2tha-e Date: Thu, 10 Sep 2015 10:54:26 -0400 Subject: [PATCH 02/10] deleting space in control structure to match set standard --- builder/pattern_assembler.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index 7996d6f92..4e5ac71d2 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -157,7 +157,7 @@ function getpatternbykey(key, patternlab){ for(var i = 0; i < patternlab.patterns.length; i++){ - switch (key) { + switch(key) { case patternlab.patterns[i].key: case patternlab.patterns[i].subdir + '/' + patternlab.patterns[i].fileName: case patternlab.patterns[i].subdir + '/' + patternlab.patterns[i].fileName + '.mustache': From c68968fa038ed01110daaf98d83128c2aa071336 Mon Sep 17 00:00:00 2001 From: e2tha-e Date: Thu, 10 Sep 2015 14:53:13 -0400 Subject: [PATCH 03/10] deleting space in control structure to match set standard --- builder/pattern_assembler.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index 4e5ac71d2..48cd0359a 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -157,7 +157,7 @@ function getpatternbykey(key, patternlab){ for(var i = 0; i < patternlab.patterns.length; i++){ - switch(key) { + switch(key){ case patternlab.patterns[i].key: case patternlab.patterns[i].subdir + '/' + patternlab.patterns[i].fileName: case patternlab.patterns[i].subdir + '/' + patternlab.patterns[i].fileName + '.mustache': From 9f510b6123feaeda8d4295f587bd74e02321debf Mon Sep 17 00:00:00 2001 From: e2tha-e Date: Fri, 11 Sep 2015 16:46:14 -0400 Subject: [PATCH 04/10] unit tests for verbose mustache partials --- test/parameter_hunter_tests.js | 146 +++++++++++++++++++++++++++++++- test/pattern_assembler_tests.js | 17 ++++ 2 files changed, 162 insertions(+), 1 deletion(-) diff --git a/test/parameter_hunter_tests.js b/test/parameter_hunter_tests.js index 16bb8e202..a7192bd48 100644 --- a/test/parameter_hunter_tests.js +++ b/test/parameter_hunter_tests.js @@ -149,6 +149,150 @@ test.done(); }, - }; + 'pattern hunter finds and extends templates with verbose partials' : function(test){ + + //setup current pattern from what we would have during execution + var currentPattern = { + "fileName": "01-sticky-comment", + "subdir": "02-organisms/02-comments", + "name": "02-organisms-02-comments-01-sticky-comment", + "data": null, + "jsonFileData": {}, + "patternName": "sticky-comment", + "patternLink": "02-organisms-02-comments-01-sticky-comment/02-organisms-02-comments-01-sticky-comment.html", + "patternGroup": "organisms", + "patternSubGroup": "comments", + "flatPatternPath": "02-organisms-02-comments", + "key": "organisms-sticky-comment", + "template": "{{> 01-molecules/06-components/02-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}", + "patternPartial": "", + "lineage": [ + ], + "lineageIndex": [ + ], + "lineageR": [ + ], + "lineageRIndex": [ + ], + "patternState": "", + "extendedTemplate": "{{> 01-molecules/06-components/02-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}" + }; + var patternlab = { + patterns: [ + { + "fileName": "02-single-comment", + "subdir": "01-molecules/06-components", + "name": "01-molecules-06-components-02-single-comment", + "data": null, + "jsonFileData": {}, + "patternName": "single-comment", + "patternLink": "01-molecules-06-components-02-single-comment/01-molecules-06-components-02-single-comment.html", + "patternGroup": "molecules", + "patternSubGroup": "components", + "flatPatternPath": "01-molecules-06-components", + "key": "molecules-single-comment", + "template": "

{{description}}

", + "patternPartial": "", + "lineage": [ + ], + "lineageIndex": [ + ], + "lineageR": [ + ], + "lineageRIndex": [ + ], + "patternState": "", + "extendedTemplate": "

{{description}}

" + } + ], + config: { + debug: false + }, + data: { + description: 'Not a quote from a smart man' + } + }; + + var parameter_hunter = new ph(); + + parameter_hunter.find_parameters(currentPattern, patternlab); + test.equals(currentPattern.extendedTemplate, '

A life is like a garden. Perfect moments can be had, but not preserved, except in memory.

'); + + test.done(); + }, + + 'pattern hunter finds and extends templates with fully-pathed partials' : function(test){ + + //setup current pattern from what we would have during execution + var currentPattern = { + "fileName": "01-sticky-comment", + "subdir": "02-organisms/02-comments", + "name": "02-organisms-02-comments-01-sticky-comment", + "data": null, + "jsonFileData": {}, + "patternName": "sticky-comment", + "patternLink": "02-organisms-02-comments-01-sticky-comment/02-organisms-02-comments-01-sticky-comment.html", + "patternGroup": "organisms", + "patternSubGroup": "comments", + "flatPatternPath": "02-organisms-02-comments", + "key": "organisms-sticky-comment", + "template": "{{> 01-molecules/06-components/02-single-comment.mustache(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}", + "patternPartial": "", + "lineage": [ + ], + "lineageIndex": [ + ], + "lineageR": [ + ], + "lineageRIndex": [ + ], + "patternState": "", + "extendedTemplate": "{{> 01-molecules/06-components/02-single-comment.mustache(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}" + }; + var patternlab = { + patterns: [ + { + "fileName": "02-single-comment", + "subdir": "01-molecules/06-components", + "name": "01-molecules-06-components-02-single-comment", + "data": null, + "jsonFileData": {}, + "patternName": "single-comment", + "patternLink": "01-molecules-06-components-02-single-comment/01-molecules-06-components-02-single-comment.html", + "patternGroup": "molecules", + "patternSubGroup": "components", + "flatPatternPath": "01-molecules-06-components", + "key": "molecules-single-comment", + "template": "

{{description}}

", + "patternPartial": "", + "lineage": [ + ], + "lineageIndex": [ + ], + "lineageR": [ + ], + "lineageRIndex": [ + ], + "patternState": "", + "extendedTemplate": "

{{description}}

" + } + ], + config: { + debug: false + }, + data: { + description: 'Not a quote from a smart man' + } + }; + + var parameter_hunter = new ph(); + + parameter_hunter.find_parameters(currentPattern, patternlab); + test.equals(currentPattern.extendedTemplate, '

A life is like a garden. Perfect moments can be had, but not preserved, except in memory.

'); + + test.done(); + } + + }; }()); diff --git a/test/pattern_assembler_tests.js b/test/pattern_assembler_tests.js index 361b6f15d..6ea9199c8 100644 --- a/test/pattern_assembler_tests.js +++ b/test/pattern_assembler_tests.js @@ -18,6 +18,23 @@ test.equals(results[0], '{{> molecules-comment-header}}'); test.equals(results[1], '{{> molecules-single-comment(description: \'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.\') }}'); + test.done(); + }, + + 'find_pattern_partials finds verbose partials' : function(test){ + + //setup current pattern from what we would have during execution + var currentPattern = { + "template": "

{{> 01-molecules/06-components/03-comment-header.mustache }}

{{> 01-molecules/06-components/02-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}
", + }; + + var pattern_assembler = new pa(); + + var results = pattern_assembler.find_pattern_partials(currentPattern); + test.equals(results.length, 2); + test.equals(results[0], '{{> 01-molecules/06-components/03-comment-header.mustache }}'); + test.equals(results[1], '{{> 01-molecules/06-components/02-single-comment(description: \'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.\') }}'); + test.done(); } From c77d61e198ce5eabdde9cac077ab507963bb1552 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Tue, 15 Sep 2015 00:19:22 -0500 Subject: [PATCH 05/10] converted project over to browsersync --- Gruntfile.js | 83 ++++----- builder/lineage_hunter.js | 2 +- builder/list_item_hunter.js | 2 +- builder/media_hunter.js | 2 +- builder/object_factory.js | 2 +- builder/parameter_hunter.js | 2 +- builder/pattern_assembler.js | 2 +- builder/pattern_exporter.js | 2 +- builder/patternlab.js | 16 +- builder/patternlab_grunt.js | 2 +- builder/pseudopattern_hunter.js | 2 +- config.json | 5 +- package.json | 23 ++- public/WHAR_INDEX | 3 - public/listeners/synclisteners.js | 162 ------------------ public/styleguide/js/styleguide.js | 2 +- .../partials/ishControls.mustache | 9 +- 17 files changed, 80 insertions(+), 241 deletions(-) delete mode 100644 public/WHAR_INDEX delete mode 100644 public/listeners/synclisteners.js diff --git a/Gruntfile.js b/Gruntfile.js index f0708fab1..f46c661d9 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -3,10 +3,6 @@ module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), - clean: { - options: { force: true }, - files: ['./public/patterns'] - }, concat: { options: { stripBanners: true, @@ -63,36 +59,33 @@ module.exports = function(grunt) { { expand: true, cwd: './source/fonts/', src: '*', dest: './public/fonts/'}, { expand: true, cwd: './source/_data/', src: 'annotations.js', dest: './public/data/' } ] - } - }, - jshint: { - options: { - "curly": true, - "eqnull": true, - "eqeqeq": true, - "undef": true, - "forin": true, - //"unused": true, - "node": true }, - patternlab: ['Gruntfile.js', './builder/lib/patternlab.js'] + css: { + files: [ + { expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' } + ] + } }, watch: { - // scss: { //scss can be watched if you like - // options: { - // livereload: true - // }, - // files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'], - // tasks: ['default'] - // }, all: { - options: { - livereload: true - }, files: [ - 'source/_patterns/**/*.mustache', - 'source/_patterns/**/*.json', - 'source/_data/*.json' + 'source/css/**/*.css', + 'public/styleguide/css/*.css', + 'source/_patterns/**/*.mustache', + 'source/_patterns/**/*.json', + 'source/_data/*.json' + ], + tasks: ['default'] + }, + scss: { + files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'], + tasks: ['sass', 'copy:css','bsReload:css'] + }, + patterns: { + files: [ + 'source/_patterns/**/*.mustache', + 'source/_patterns/**/*.json', + 'source/_data/*.json' ], tasks: ['default'] } @@ -114,16 +107,24 @@ module.exports = function(grunt) { nodeunit: { all: ['test/*_tests.js'] }, - connect: { - app:{ + browserSync: { + dev: { options: { - port: 9001, - base: './public', - hostname: 'localhost', - open: true, - livereload: 35729 + server: './public', + watchTask: true, + plugins: [ + { + module: 'bs-html-injector', + options: { + files: './public/index.html' + } + } + ] } } + }, + bsReload: { + css: './public/**/*.css' } }); @@ -134,11 +135,15 @@ module.exports = function(grunt) { grunt.task.loadTasks('./builder/'); //if you choose to use scss, or any preprocessor, you can add it here - grunt.registerTask('default', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy']); + grunt.registerTask('default', ['patternlab', /*'sass',*/ 'copy:main']); //travis CI task - grunt.registerTask('travis', ['nodeunit', 'clean', 'concat', 'patternlab', /*'sass',*/ 'copy']); + grunt.registerTask('travis', ['nodeunit', 'patternlab']); + + //TODO: this line is more efficient, but you cannot run concurrent watch tasks without another dependency. + //grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'browserSync', 'watch:patterns', 'watch:scss']); + grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'browserSync', 'watch:all']); - grunt.registerTask('serve', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'connect', 'watch']); + grunt.registerTask('build', ['nodeunit', 'concat']); }; diff --git a/builder/lineage_hunter.js b/builder/lineage_hunter.js index 47bc9c473..7c9f5038f 100644 --- a/builder/lineage_hunter.js +++ b/builder/lineage_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/list_item_hunter.js b/builder/list_item_hunter.js index dd251bda3..cc357f48d 100644 --- a/builder/list_item_hunter.js +++ b/builder/list_item_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/media_hunter.js b/builder/media_hunter.js index 289a78bb9..247a96042 100644 --- a/builder/media_hunter.js +++ b/builder/media_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/object_factory.js b/builder/object_factory.js index 6725abe75..38582ab65 100644 --- a/builder/object_factory.js +++ b/builder/object_factory.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/parameter_hunter.js b/builder/parameter_hunter.js index 089b80055..8aad41594 100644 --- a/builder/parameter_hunter.js +++ b/builder/parameter_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index 98b661783..1264029ba 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/pattern_exporter.js b/builder/pattern_exporter.js index 78560b631..71c19b616 100644 --- a/builder/pattern_exporter.js +++ b/builder/pattern_exporter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/patternlab.js b/builder/patternlab.js index d819cff43..254fd4cf4 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. @@ -36,7 +36,7 @@ var patternlab_engine = function () { console.log('==============================='); console.log('Command Line Arguments'); console.log('patternlab:only_patterns'); - console.log(' > Compiles the patterns only, outputting to ./public/patterns'); + console.log(' > Compiles the patterns only, outputting to config.patterns.public'); console.log('patternlab:v'); console.log(' > Retrieve the version of patternlab-node you have installed'); console.log('patternlab:help'); @@ -89,6 +89,10 @@ var patternlab_engine = function () { pattern_assembler.process_pattern_file(file, patternlab); }); + + //delete the contents of config.patterns.public before writing + fs.emptyDirSync(patternlab.config.patterns.public); + //render all patterns last, so lineageR works patternlab.patterns.forEach(function(pattern, index, patterns){ //render the pattern, but first consolidate any data we may have @@ -101,13 +105,13 @@ var patternlab_engine = function () { var patternFooter = pattern_assembler.renderPattern(patternlab.footer, pattern); //write the compiled template to the public patterns directory - fs.outputFileSync('./public/patterns/' + pattern.patternLink, patternlab.header + pattern.patternPartial + patternFooter); + fs.outputFileSync(patternlab.config.patterns.public + pattern.patternLink, patternlab.header + pattern.patternPartial + patternFooter); //write the mustache file too - fs.outputFileSync('./public/patterns/' + pattern.patternLink.replace('.html', '.mustache'), entity_encoder.encode(pattern.template)); + fs.outputFileSync(patternlab.config.patterns.public + pattern.patternLink.replace('.html', '.mustache'), entity_encoder.encode(pattern.template)); //write the encoded version too - fs.outputFileSync('./public/patterns/' + pattern.patternLink.replace('.html', '.escaped.html'), entity_encoder.encode(pattern.patternPartial)); + fs.outputFileSync(patternlab.config.patterns.public + pattern.patternLink.replace('.html', '.escaped.html'), entity_encoder.encode(pattern.patternPartial)); }); //export patterns if necessary @@ -154,7 +158,7 @@ var patternlab_engine = function () { var viewAllTemplate = fs.readFileSync('./source/_patternlab-files/viewall.mustache', 'utf8'); var viewAllHtml = pattern_assembler.renderPattern(viewAllTemplate, {partials: viewAllPatterns, patternPartial: patternPartial}); - fs.outputFileSync('./public/patterns/' + pattern.flatPatternPath + '/index.html', viewAllHtml); + fs.outputFileSync(patternlab.config.patterns.public + pattern.flatPatternPath + '/index.html', viewAllHtml); } } diff --git a/builder/patternlab_grunt.js b/builder/patternlab_grunt.js index 72fccc8ff..80d569a09 100644 --- a/builder/patternlab_grunt.js +++ b/builder/patternlab_grunt.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/pseudopattern_hunter.js b/builder/pseudopattern_hunter.js index b5513e458..9f0a33a4e 100644 --- a/builder/pseudopattern_hunter.js +++ b/builder/pseudopattern_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/config.json b/config.json index f0b2f6a74..798df20c7 100644 --- a/config.json +++ b/config.json @@ -5,8 +5,6 @@ }, "ignored-extensions" : ["scss", "DS_Store", "less"], "ignored-directories" : ["scss"], - "contentSyncPort" : 8002, - "navSyncPort" : 8003, "debug": true, "ishControlsVisible": { "s": true, @@ -23,8 +21,7 @@ "views-code": true, "views-new": true, "tools-all": true, - "tools-follow": false, - "tools-reload": false, + "tools-sync": true, "tools-shortcuts": true, "tools-docs": true }, diff --git a/package.json b/package.json index 8e0a247ad..74051a636 100644 --- a/package.json +++ b/package.json @@ -1,23 +1,22 @@ { "name": "patternlab-node", "description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).", - "version": "0.11.0", + "version": "0.12.0", "devDependencies": { + "bs-html-injector": "^2.0.4", + "diveSync": "^0.2.1", + "fs-extra": "^0.24.0", + "glob": "^4.3.5", "grunt": "~0.4.0", - "grunt-contrib-watch": "^0.6.1", - "grunt-contrib-sass": "^0.8.1", - "grunt-contrib-copy": "^0.7.0", - "grunt-contrib-jshint": "^0.10.0", - "grunt-contrib-clean": "^0.6.0", + "grunt-browser-sync": "^2.1.3", "grunt-contrib-concat": "^0.5.0", + "grunt-contrib-copy": "^0.7.0", "grunt-contrib-nodeunit": "^0.4.1", - "grunt-contrib-connect": "^0.9.0", - "mustache": "^1.0.0", - "matchdep": "^0.3.0", - "fs-extra": "^0.14.0", - "diveSync": "^0.2.1", + "grunt-contrib-sass": "^0.8.1", + "grunt-contrib-watch": "^0.6.1", "html-entities": "^1.1.1", - "glob": "^4.3.5" + "matchdep": "^0.3.0", + "mustache": "^1.0.0" }, "keywords": [ "Pattern Lab", diff --git a/public/WHAR_INDEX b/public/WHAR_INDEX deleted file mode 100644 index bf59a26ad..000000000 --- a/public/WHAR_INDEX +++ /dev/null @@ -1,3 +0,0 @@ -If you're seeing a listing of files rather than the main home page for Pattern Lab -then you probably forgot to generate the site first. Please go into scripts/ and -double-click generateSite.command. \ No newline at end of file diff --git a/public/listeners/synclisteners.js b/public/listeners/synclisteners.js deleted file mode 100644 index 218bdfa3f..000000000 --- a/public/listeners/synclisteners.js +++ /dev/null @@ -1,162 +0,0 @@ - -/*! - * Sync Listeners, v0.1 - * - * Copyright (c) 2013 Dave Olsen, http://dmolsen.com - * Licensed under the MIT license - * - * The JavaScript component of the WebSocket set-up that supports syncing - * navigation between browsers and content updates with the server. - * - * The WebSocket test is from Modernizr. It might be a little too strict for our purposes. - * https://github.com/Modernizr/Modernizr/blob/master/feature-detects/websockets.js - * - */ - -var wsn; -var wsnConnected = false; -var wsc; -var wscConnected = false; -var dataPrevious = 0; -var host = (window.location.hostname !== '') ? window.location.hostname : '127.0.0.1'; - -// handle page updates from one browser to another -function connectNavSync() { - - if ('WebSocket' in window && window.WebSocket.CLOSING === 2) { - - var navSyncCopy = "Page Follow"; - wsn = new WebSocket("ws://"+host+":"+navSyncPort+"/navsync"); - - // when trying to open a connection to WebSocket update the pattern lab nav bar - wsn.onopen = function (event) { - wsnConnected = true; - $('#navSyncButton').attr("data-state","on"); - $('#navSyncButton').addClass("connected"); - $('#navSyncButton').html(navSyncCopy+' On'); - } - - // when closing a connection (or failing to make a connection) to WebSocket update the pattern lab nav bar - wsn.onclose = function (event) { - wsnConnected = false; - $('#navSyncButton').attr("data-state","off"); - if ($('#navSyncButton').hasClass("connected")) { - $('#navSyncButton').removeClass("connected"); - } - $('#navSyncButton').html(navSyncCopy+' Disabled'); - } - - // when receiving a message from WebSocket update the iframe source - wsn.onmessage = function (event) { - - var data = JSON.parse(event.data); - var vpLocation = document.getElementById('sg-viewport').contentWindow.location.href; - var mLocation = "http://"+host+data.url; - - if (vpLocation != mLocation) { - - document.getElementById('sg-viewport').contentWindow.location.replace(mLocation); - - // make sure the pop doesn't fire and push the pattern - urlHandler.doPop = false; - urlHandler.pushPattern(data.patternpartial); - - // reset the defaults - urlHandler.doPop = true; - urlHandler.skipBack = false; - - } - } - - // when there's an error update the pattern lab nav bar - wsn.onerror = function (event) { - wsnConnected = false; - $('#navSyncButton').attr("data-state","off"); - if ($('#navSyncButton').hasClass("connected")) { - $('#navSyncButton').removeClass("connected"); - } - $('#navSyncButton').html(navSyncCopy+' Disabled'); - } - - } - -} -connectNavSync(); - -// handle content updates generated by the watch -function connectContentSync() { - - if ('WebSocket' in window && window.WebSocket.CLOSING === 2) { - - var dc = true; - var contentSyncCopy = "Auto-reload"; - - wsc = new WebSocket("ws://"+host+":"+contentSyncPort+"/contentsync"); - - // when trying to open a connection to WebSocket update the pattern lab nav bar - wsc.onopen = function (event) { - wscConnected = true; - $('#contentSyncButton').attr("data-state","on"); - $('#contentSyncButton').addClass("connected"); - $('#contentSyncButton').html(contentSyncCopy+' On'); - } - - // when closing a connection (or failing to make a connection) to WebSocket update the pattern lab nav bar - wsc.onclose = function (event) { - wscConnected = false; - $('#contentSyncButton').attr("data-state","off"); - if ($('#contentSyncButton').hasClass("connected")) { - $('#contentSyncButton').removeClass("connected"); - } - $('#contentSyncButton').html(contentSyncCopy+' Disabled'); - } - - // when receiving a message from WebSocket reload the current frame adding the received timestamp - // as a request var to, hopefully, bust caches... cachi(?) - wsc.onmessage = function (event) { - document.getElementById('sg-viewport').contentWindow.location.reload(); - } - - // when there's an error update the pattern lab nav bar - wsc.onerror = function (event) { - wscConnected = false; - $('#contentSyncButton').attr("data-state","off"); - if ($('#contentSyncButton').hasClass("connected")) { - $('#contentSyncButton').removeClass("connected"); - } - $('#contentSyncButton').html(contentSyncCopy+' Disabled'); - } - - } - -} -connectContentSync(); - -// handle when a user manually turns navSync and contentSync on & off -$('#navSyncButton').click(function() { - if ($(this).attr("data-state") == "on") { - wsn.close(); - $(this).attr("data-state","off"); - $(this).removeClass("connected"); - $(this).html('Nav Sync Off'); - } else { - connectNavSync(); - $(this).attr("data-state","on"); - $(this).addClass("connected"); - $(this).html('Nav Sync On'); - } -}); - -$('#contentSyncButton').click(function() { - if ($(this).attr("data-state") == "on") { - wsc.close(); - $(this).attr("data-state","off"); - $(this).removeClass("connected"); - $(this).html('Content Sync Off'); - } else { - connectContentSync(); - $(this).attr("data-state","on"); - $(this).addClass("connected"); - $(this).html('Content Sync On'); - } -}); diff --git a/public/styleguide/js/styleguide.js b/public/styleguide/js/styleguide.js index 05d7cb276..44adb6561 100644 --- a/public/styleguide/js/styleguide.js +++ b/public/styleguide/js/styleguide.js @@ -554,7 +554,7 @@ function receiveIframeMessage(event) { urlHandler.pushPattern(data.patternpartial, data.path); } - if (wsnConnected) { + if (this.wsnConnected) { var iFramePath = urlHandler.getFileName(data.patternpartial); wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+event.data.patternpartial+'" }' ); } diff --git a/source/_patternlab-files/partials/ishControls.mustache b/source/_patternlab-files/partials/ishControls.mustache index acec6f2b3..6c0a70b68 100644 --- a/source/_patternlab-files/partials/ishControls.mustache +++ b/source/_patternlab-files/partials/ishControls.mustache @@ -5,7 +5,7 @@
  • - Size px / + Size px / em
    @@ -51,15 +51,14 @@
  • Tools
      - {{# ishControlsVisible.tools-follow }}
    • Page Follow
    • {{/ ishControlsVisible.tools-follow }} - {{# ishControlsVisible.tools-reload }}
    • Auto-reload
    • {{/ ishControlsVisible.tools-reload }} + {{# ishControlsVisible.tools-sync }}
    • BrowserSync UI
    • {{/ ishControlsVisible.tools-sync }} {{# ishControlsVisible.tools-shortcuts }}
    • Keyboard Shortcuts{{/ ishControlsVisible.tools-shortcuts }} {{# ishControlsVisible.tools-docs }}
    • Pattern Lab Docs{{/ ishControlsVisible.tools-docs }}
  • {{/ ishControlsVisible.tools-all }} - + - \ No newline at end of file + From 3576870d3994755b8bfa12325b6d98ac1a3e833a Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 16 Sep 2015 23:52:04 -0500 Subject: [PATCH 06/10] both gulp and grunt configs - with no sass on by default --- Gruntfile.js | 36 ++++----- builder/pattern_assembler.js | 5 +- builder/patternlab.js | 26 ++++--- builder/patternlab_grunt.js | 4 +- builder/patternlab_gulp.js | 26 +++++++ gulpfile.js | 143 +++++++++++++++++++++++++++++++++++ package.gulp.json | 41 ++++++++++ source/css/style.scss | 21 ++++- 8 files changed, 265 insertions(+), 37 deletions(-) create mode 100644 builder/patternlab_gulp.js create mode 100644 gulpfile.js create mode 100644 package.gulp.json diff --git a/Gruntfile.js b/Gruntfile.js index f46c661d9..c8f9e603f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -77,10 +77,10 @@ module.exports = function(grunt) { ], tasks: ['default'] }, - scss: { - files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'], - tasks: ['sass', 'copy:css','bsReload:css'] - }, + // scss: { + // files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'], + // tasks: ['sass', 'copy:css','bsReload:css'] + // }, patterns: { files: [ 'source/_patterns/**/*.mustache', @@ -90,20 +90,20 @@ module.exports = function(grunt) { tasks: ['default'] } }, - sass: { - build: { - options: { - style: 'expanded', - precision: 8 - }, - files: { - './source/css/style.css': './source/css/style.scss', - './public/styleguide/css/static.css': './public/styleguide/css/static.scss', - './public/styleguide/css/styleguide.css': './public/styleguide/css/styleguide.scss', - './public/styleguide/css/styleguide-specific.css': './public/styleguide/css/styleguide-specific.scss' - } - } - }, + // sass: { + // build: { + // options: { + // style: 'expanded', + // precision: 8 + // }, + // files: { + // './source/css/style.css': './source/css/style.scss', + // './public/styleguide/css/static.css': './public/styleguide/css/static.scss', + // './public/styleguide/css/styleguide.css': './public/styleguide/css/styleguide.scss', + // './public/styleguide/css/styleguide-specific.css': './public/styleguide/css/styleguide-specific.scss' + // } + // } + // }, nodeunit: { all: ['test/*_tests.js'] }, diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index 1264029ba..b441972c7 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -164,10 +164,7 @@ throw 'Could not find pattern with key ' + key; } - /* - * Recursively merge properties of two objects - * http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically - */ + var self = this; function mergeData(obj1, obj2) { for (var p in obj2) { diff --git a/builder/patternlab.js b/builder/patternlab.js index 254fd4cf4..80f8d75f4 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v0.12.0 - 2015 - * +/* + * patternlab-node - v0.12.0 - 2015 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ @@ -54,7 +54,7 @@ var patternlab_engine = function () { } } - function buildPatterns(callback){ + function buildPatterns(deletePatternDir){ patternlab.data = fs.readJSONSync('./source/_data/data.json'); patternlab.listitems = fs.readJSONSync('./source/_data/listitems.json'); patternlab.header = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/header.html', 'utf8'); @@ -91,7 +91,9 @@ var patternlab_engine = function () { }); //delete the contents of config.patterns.public before writing - fs.emptyDirSync(patternlab.config.patterns.public); + if(deletePatternDir){ + fs.emptyDirSync(patternlab.config.patterns.public); + } //render all patterns last, so lineageR works patternlab.patterns.forEach(function(pattern, index, patterns){ @@ -346,16 +348,16 @@ var patternlab_engine = function () { version: function(){ return getVersion(); }, - build: function(){ - buildPatterns(); + build: function(deletePatternDir){ + buildPatterns(deletePatternDir); buildFrontEnd(); printDebug(); }, help: function(){ help(); }, - build_patterns_only: function(){ - buildPatterns(); + build_patterns_only: function(deletePatternDir){ + buildPatterns(deletePatternDir); printDebug(); } }; diff --git a/builder/patternlab_grunt.js b/builder/patternlab_grunt.js index 80d569a09..744421a1b 100644 --- a/builder/patternlab_grunt.js +++ b/builder/patternlab_grunt.js @@ -16,7 +16,7 @@ module.exports = function(grunt) { var patternlab = patternlab_engine(); if(arguments.length === 0){ - patternlab.build(); + patternlab.build(true); } if(arg && arg === 'v'){ @@ -24,7 +24,7 @@ module.exports = function(grunt) { } if(arg && arg === "only_patterns"){ - patternlab.build_patterns_only(); + patternlab.build_patterns_only(true); } if(arg && arg === "help"){ diff --git a/builder/patternlab_gulp.js b/builder/patternlab_gulp.js new file mode 100644 index 000000000..5cbeb2440 --- /dev/null +++ b/builder/patternlab_gulp.js @@ -0,0 +1,26 @@ +var patternlab_engine = require('./patternlab.js'); + +module.exports = function(gulp) { + + gulp.task('patternlab', ['clean'], function(cb){ + var patternlab = patternlab_engine(); + patternlab.build(false); + cb(); + }); + + gulp.task('patternlab:version', function(){ + var patternlab = patternlab_engine(); + patternlab.version(); + }) + + gulp.task('patternlab:only_patterns', ['clean'], function(){ + var patternlab = patternlab_engine(); + patternlab.build_patterns_only(false); + }) + + gulp.task('patternlab:help', function(){ + var patternlab = patternlab_engine(); + patternlab.help(); + }) + +} diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 000000000..ec9800baf --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,143 @@ +// Shoutout to oscar-g for starting this at https://github.com/oscar-g/patternlab-node/tree/dev-gulp + +var pkg = require('./package.json'), + gulp = require('gulp'), + eol = require('os').EOL, + del = require('del'), + strip_banner = require('gulp-strip-banner'), + header = require('gulp-header'), + nodeunit = require('gulp-nodeunit'), + sass = require('gulp-sass'), + browserSync = require('browser-sync').create(); + +require('gulp-load')(gulp); +var banner = [ '/** ', + ' * <%= pkg.name %> - v<%= pkg.version %> - <%= today %>', + ' * ', + ' * <%= pkg.author %>, and the web community.', + ' * Licensed under the <%= pkg.license %> license.', + ' * ', + ' * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.', + ' * ', ' **/'].join(eol); + +//load patternlab-node tasks +gulp.loadTasks(__dirname+'/builder/patternlab_gulp.js'); + +//clean patterns dir +gulp.task('clean', function(cb){ + del.sync(['./public/patterns/*'], {force: true}); + cb(); +}) + +//build the banner +gulp.task('banner', function(){ + return gulp.src([ + './builder/patternlab.js', + './builder/object_factory.js', + './builder/lineage_hunter.js', + './builder/media_hunter.js', + './builder/patternlab_grunt.js', + './builder/parameter_hunter.js', + './builder/pattern_exporter.js', + './builder/pattern_assembler.js', + './builder/pseudopattern_hunter.js', + './builder/list_item_hunter.js' + ]) + .pipe(strip_banner()) + .pipe(header( banner, { + pkg : pkg, + today : new Date().getFullYear() } + )) + .pipe(gulp.dest('./builder')); +}) + +//copy tasks +gulp.task('cp:js', function(){ + return gulp.src('**/*.js', {cwd:'./source/js'}) + .pipe(gulp.dest('./public/js')) +}); +gulp.task('cp:img', function(){ + return gulp.src( + [ '**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg' ], + {cwd:'./source/images'} ) + .pipe(gulp.dest('./public/images')) +}); +gulp.task('cp:font', function(){ + return gulp.src('*', {cwd:'./source/fonts'}) + .pipe(gulp.dest('./public/fonts')) +}); +gulp.task('cp:data', function(){ + return gulp.src('annotations.js', {cwd:'./source/_data'}) + .pipe(gulp.dest('./public/data')) +}) +gulp.task('cp:css', function(){ + return gulp.src('./source/css/style.css') + .pipe(gulp.dest('./public/css')) + .pipe(browserSync.stream()); +}) + +//server and watch tasks +gulp.task('connect', ['lab'], function(){ + browserSync.init({ + server: { + baseDir: './public/' + } + }); + gulp.watch('./source/css/style.css', ['cp:css']); + + //suggested watches if you use scss + // gulp.watch('./source/css/**/*.scss', ['sass:style']); + // gulp.watch('./public/styleguide/*.scss', ['sass:styleguide']); + + gulp.watch([ + './source/_patterns/**/*.mustache', + './source/_patterns/**/*.json', + './source/_data/*.json' ], + ['lab-pipe'], function(){ + browserSync.reload(); + }); + +}) + +//unit test +gulp.task('nodeunit', function(){ + return gulp.src('./test/**/*_tests.js') + .pipe(nodeunit()); +}) + +//sass tasks, turn on if you want to use +// gulp.task('sass:style', function(){ +// return gulp.src('./source/css/*.scss') +// .pipe(sass({ +// outputStyle: 'expanded', +// precision: 8 +// })) +// .pipe(gulp.dest('./public/css')) +// .pipe(browserSync.stream()); +// }) +// gulp.task('sass:styleguide', function(){ +// return gulp.src('./public/styleguide/css/*.scss') +// .pipe(sass({ +// outputStyle: 'expanded', +// precision: 8 +// })) +// .pipe(gulp.dest('./public/styleguide/css')) +// .pipe(browserSync.stream()); +// }) + +gulp.task('lab-pipe', ['lab'], function(cb){ + cb(); + browserSync.reload(); +}) + +gulp.task('default', ['lab']); + +gulp.task('assets', ['cp:js', 'cp:img', 'cp:font', 'cp:data', /*'sass:style', 'sass:styleguide'*/]); +gulp.task('prelab', ['clean', 'banner', 'assets']); +gulp.task('lab', ['prelab', 'patternlab'], function(cb){cb();}); +gulp.task('patterns', ['patternlab:only_patterns']); +gulp.task('serve', ['lab', 'connect']); +gulp.task('travis', ['lab', 'nodeunit']); + +gulp.task('version', ['patternlab:version']); +gulp.task('help', ['patternlab:help']); diff --git a/package.gulp.json b/package.gulp.json new file mode 100644 index 000000000..34b55129e --- /dev/null +++ b/package.gulp.json @@ -0,0 +1,41 @@ +{ + "name": "patternlab-node", + "description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).", + "version": "0.12.0", + "devDependencies": { + "browser-sync": "^2.8.2", + "del": "^1.2.1", + "diveSync": "^0.2.1", + "fs-extra": "^0.14.0", + "glob": "^4.3.5", + "gulp": "^3.8.8", + "gulp-connect": "^2.0.6", + "gulp-copy": "0.0.2", + "gulp-header": "^1.0.5", + "gulp-load": "^0.1.1", + "gulp-nodeunit": "0.0.5", + "gulp-sass": "^0.7.3", + "gulp-strip-banner": "0.0.2", + "html-entities": "^1.1.1", + "mustache": "^1.0.0" + }, + "keywords": [ + "Pattern Lab", + "Atomic Web Design", + "Node", + "Grunt", + "Javascript" + ], + "repository": { + "type": "git", + "url": "git://github.com/pattern-lab/patternlab-node.git" + }, + "author": "Brian Muenzenmeyer", + "license": "MIT", + "scripts": { + "test": "grunt travis --verbose" + }, + "engines": { + "node": ">=0.1" + } +} diff --git a/source/css/style.scss b/source/css/style.scss index 60e5210c3..761b1d3d3 100644 --- a/source/css/style.scss +++ b/source/css/style.scss @@ -1,5 +1,24 @@ /* - + ,, ,, ,, + .M"""bgd mm db `7MM mm mm `7MM OO OO OO +,MI "Y MM MM MM MM MM 88 88 88 +`MMb. mmMMmm ,pW"Wq.`7MMpdMAo. `7Mb,od8 `7MM .P"Ybmmm MMpMMMb.mmMMmm mmMMmm MMpMMMb. .gP"Ya `7Mb,od8 .gP"Ya || || || + `YMMNq. MM 6W' `Wb MM `Wb MM' "' MM :MI I8 MM MM MM MM MM MM ,M' Yb MM' "',M' Yb || || || +. `MM MM 8M M8 MM M8 MM MM WmmmP" MM MM MM MM MM MM 8M"""""" MM 8M"""""" `' `' `' +Mb dM MM YA. ,A9 MM ,AP MM MM 8M MM MM MM MM MM MM YM. , MM YM. , ,, ,, ,, +P"Ybmmd" `Mbmo`Ybmd9' MMbmmd' .JMML. .JMML.YMMMMMb .JMML JMML.`Mbmo `Mbmo.JMML JMML.`Mbmmd'.JMML. `Mbmmd' db db db + MM 6' dP + .JMML. Ybmmmd' +Pattern Lab doesn't have any CSS requirements, which means you can write your styles however you want. Hooray! +You can use Sass, Less, vanilla CSS, or some other crazy thing I haven't heard of yet. +So please don't use these styles. They're just here to put together the demo, and nothing more. +They're intentionally gray, boring, and crappy because you're supposed to do this stuff yourself. +Atomic design is philosophically complimentary with these CSS approaches: +* SMACSS by Jonathan Snook http://smacss.com/ +* OOCSS by Nicole Sullivan http://oocss.org/ +* BEM CSS Methology : http://bem.info/method/ +* CSS Guidelines by Harry Roberts : https://github.com/csswizardry/CSS-Guidelines +So feel free to use any of these approaches. Or don't. It's totally up to you. */ From 469a5a849bb26ccba87046383d4f2b142319fdf1 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Thu, 17 Sep 2015 00:00:42 -0500 Subject: [PATCH 07/10] Updated README to include BrowserSync --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c72b197a6..a54ddd4fa 100644 --- a/README.md +++ b/README.md @@ -102,8 +102,10 @@ You can also exclude complete directories by prepending the directory name with ##### Verbose Mode `patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets. -##### Server -Running `grunt serve` will compile the patternlab front end and host it on http://localhost:9001 by default. Page will reload on any saved source code change. +##### Server & BrowserSync +Running `grunt serve` will compile the patternlab front end and host it by default on http://localhost:3000 via [BrowserSync](http://www.browsersync.io/docs/). After it starts, templates, `data.json`, and scss/css changes in your source code will be automatically injected into the page. + +You'll notice that if you have this open across different browsers, we do our best to keep the front end in sync, but there is a known issue with synced navigation using the main menu. ### Advanced Pattern Library Features From c832ee7b32c6c77e14e7aa48f2e91668ed0afdce Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Thu, 17 Sep 2015 01:07:30 -0500 Subject: [PATCH 08/10] v0.12.0 release - gulp support removed sass from the default offerings updated README with a TON of goodness --- CHANGELOG | 8 ++++ CONTRIBUTING.md | 9 ++-- README.md | 103 +++++++++++++++++++++++++++------------------- config.json | 2 +- gulpfile.js | 2 +- package.gulp.json | 1 - package.json | 1 - 7 files changed, 77 insertions(+), 49 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 85124e76e..61030a5f2 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,5 +1,13 @@ THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT. +PL-node-v0.12.0 + - ADD: Gulp support arrives with an optional configuration + - ADD: Instructions how to install and run with Gulp + - DEL: Deleted the sass modules from `package.json` files + - CHG: Commented out all sass tasks in Grunt and Gulp files + - CHG: Changed static web server provider to BrowserSync + - CHG: Replaced the Style Guide toolbar Auto-Reload and Page Follow with a link to the BrowserSync UI + PL-node-v0.11.0 - ADD: Ignore pattern directories that start with an underscore. - ADD: Support for lists with the listItems variable diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 276a2af37..dcaef2d3d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -4,6 +4,9 @@ If you'd like to contribute to patternlab - node, please do so! There is always No pull request is too small. ##Guidelines -1. Please keep your pull requests concise -2. _ALWAYS_ submit it against the [dev branch](https://github.com/pattern-lab/patternlab-node/tree/dev). If this does not occur, I will first, try to redirect you gently, second, port over your contribution manually if time allows, and/or third, close your pull request. -3. If you can, add some unit tests using the existing patterns \ No newline at end of file +1. Please keep your pull requests concise and limited to **ONE** substantive change at a time. +2. _ALWAYS_ submit pull requests against the [dev branch](https://github.com/pattern-lab/patternlab-node/tree/dev). If this does not occur, I will first, try to redirect you gently, second, port over your contribution manually if time allows, and/or third, close your pull request. +3. If you can, add some unit tests using the existing patterns + +##Coding style +Regarding code style like indentation and whitespace, follow the conventions you see used in the source already. Add enough source code comments to help the next person. diff --git a/README.md b/README.md index a54ddd4fa..bf1a97caa 100644 --- a/README.md +++ b/README.md @@ -2,21 +2,59 @@ ## About the Node Version of Pattern Lab -The Node version of Pattern Lab is, at its core, a static site generator. It combines platform-agnostic assets, like the [Mustache](http://mustache.github.io/)-based patterns and the JavaScript-based viewer, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site. By making it a static site generator, the Node version of Pattern Lab strongly separates patterns, data, and presentation from build logic. The Node version is a work in progress, the [PHP version](https://github.com/pattern-lab/patternlab-php) should be seen as a reference for other developers to improve upon as they build their own Pattern Lab Builders in their language of choice. +The Node version of [Pattern Lab](http://patternlab.io/) is, at its core, a static site generator. It combines platform-agnostic assets, like the Mustache-based patterns, the JavaScript-based viewer, and the self-contained webserver, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site. -### Getting Started +This repository contains the vanilla builder logic, grunt and gulp configurations, and some sample template/css/data to illustrate the powe and flexibility of the tool. -To run patternlab-node, run the following from the command line at the root of whichever directory you want to initialize your project in: +### Download -1. `npm install` -2. `npm install -g grunt-cli` -3. `grunt` +* Download the [latest release of patternlab-node](https://github.com/pattern-lab/patternlab-node/releases/latest) from Github +* Via npm, run `npm install patternlab-node` (Note this will auto install the grunt version currently. see below) -This creates all patterns, the styleguide, and the pattern lab site. +### Choose Your Adventure! Now Vanilla, Grunt & Gulp + +This repository ships with two `package.json` files, a `Gruntfile.js`, and a `gulpfile.js`. The default is grunt currently. The core builder is not dependent on either. + +**HELP WANTED** Please help me test both of the configurations by [reporting](https://github.com/pattern-lab/patternlab-node/blob/dev/CONTRIBUTING.md) any issues encountered. + +### Getting Started - Grunt + +To run patternlab-node using grunt, do the following in the directory you downloaded and extracted the zipped release: + +1. Run `npm install` from the command line +2. Optionally, delete `package.gulp.json`, `gulpfile.js`, and `builder/patternlab_gulp.js` files if you are certain you dont need it. +* Not deleting `builder/patternlab_gulp.js` may cause a harmless error when running grunt. Delete it. +3. Run `grunt` or `grunt serve` from the command line + +This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `grunt serve` to see have BrowserSync spin up and serve the files to you. + +### Getting Started - Gulp + +To run patternlab-node using gulp, you need to swap out the default grunt configuration. Do the following in the directory you downloaded and extracted the zipped release: + +1. Rename `package.json` to `package.grunt.json` or delete it if you don't intend on going back +2. Rename `package.gulp.json` to `package.json` +3. Run `npm install` from the command line +4. Run `gulp` or `gulp serve` from the command line + +This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `grunt serve` to see have BrowserSync spin up and serve the files to you. + +### There and Back Again, or Switching Between Grunt and Gulp + +It's not expected to toggle between the two build systems, but for those migrating between the two configs, here's some general guidelines: + +* Make sure your `package.json` files are correct per the Getting Started sections. +* Run `npm cache clear` before installation +* Delete the contents of `./node_modules` if you want a cleaner installation. +* Regarding speed, Gulp is faster. BrowserSync takes a bit longer than the old static server to spin up, but its capabilities far outweigh the startup cost. + +### Upgrading + +You can find some simple upgrade documenation in it's current home here (unreleased but confirmed to work): [https://github.com/pattern-lab/website/blob/dev/patternlabsite/docs/node/upgrading.md](https://github.com/pattern-lab/website/blob/dev/patternlabsite/docs/node/upgrading.md) ### Command Line Interface -The following are grunt task arguments you may execute: +The following are grunt/gulp task arguments you may execute: ##### `patternlab` With no arguments, patternlab runs the full builder, compiling patterns, and constructing the front-end site. @@ -30,10 +68,15 @@ Retrieve the version of patternlab-node you have installed ##### `patternlab:help` Get more information about patternlab-node, pattern lab in general, and where to report issues. -### Config Options +### Further Configuration ##### Watching Changes -To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt watch`. The `Gruntfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy. +To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt|gulp watch` or `grunt|gulp serve`. The `Gruntfile|Gulpfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy. + +##### Preprocessor Support +The patternlab-node release package ships with some `.scss` files utilized in the creation of the style guide and sample templates, but these are not required. The compilation tasks are commented out in the `Gruntfiles|Gulpfiles` but can be uncommented or changed to meet your needs. Sass modules are note included in `package.json` files - the prevailing thought being if you are familiar enough with preprocessors, you can use the instructions for [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass) / [gulp-sass](https://github.com/dlmanning/gulp-sass) / _preprocessor of choice_ to install them. + +**NOTE:** You may run into issues installing gulp-sass if you don't have the latest Visual Studio on Windows. See [here](https://github.com/sass/node-sass/issues/469) for more information and [this query](https://github.com/sass/node-sass/issues?utf8=%E2%9C%93&q=is%3Aissue+install) for a slew of installation problems related to gulp-sass. ##### Nav Bar Controls If you don't have a need for some of the nav-bar tools in the patternlab frontend, you can turn them off in `config.json`. @@ -99,7 +142,7 @@ If you'd like to exclude an individual pattern you can do so by prepending the f You can also exclude complete directories by prepending the directory name with an underscore, like: `/_experiment/...` -##### Verbose Mode +##### Debug Mode `patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets. ##### Server & BrowserSync @@ -107,6 +150,13 @@ Running `grunt serve` will compile the patternlab front end and host it by defau You'll notice that if you have this open across different browsers, we do our best to keep the front end in sync, but there is a known issue with synced navigation using the main menu. +### Roadmap + + +A roadmap exists for Pattern Lab Node. Check it out [here](https://github.com/pattern-lab/patternlab-node/issues/134). The Node version of Pattern Lab is maintained by [@bmuenzenmeyer](https://twitter.com/bmuenzenmeyer) and contributors. Pull requests welcome, but please take a moment to read the [guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/CONTRIBUTING.md). + +Dave Olsen has also published the [specification](https://github.com/pattern-lab/the-spec/blob/draft/SPEC.md) for Pattern Lab ports. Development will be oriented toward compliance with this as the spec and the port mature together. Post v1 work will focus on other pattern engines and a plugin architecture. + ### Advanced Pattern Library Features ##### Pattern Parameters @@ -192,37 +242,6 @@ This would compile to: As you can see, it's a much easier way of linking patterns to one another. - -=== - -The Node version of Pattern Lab is maintained by [@bmuenzenmeyer](https://twitter.com/bmuenzenmeyer) and contributors. Pull requests welcome, but please take a moment to read the [guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/CONTRIBUTING.md). - -### Upgrading - -You can find some simple upgrade documenation in it's current home here (unreleased but confirmed to work): [https://github.com/pattern-lab/website/blob/dev/patternlabsite/docs/node/upgrading.md](https://github.com/pattern-lab/website/blob/dev/patternlabsite/docs/node/upgrading.md) - -### ROADMAP - -A roadmap exists for Pattern Lab Node. Check it out [here](https://github.com/pattern-lab/patternlab-node/issues/134) - -Dave Olsen has also published the [specification](https://github.com/pattern-lab/the-spec/blob/draft/SPEC.md) for Pattern Lab ports. Development will be oriented toward compliance with this as the spec and the port mature together. - -### Is Pattern Lab a Platform or a Build Tool? - -A lot of good conversation has revolved around whether Pattern Lab is a platform or a tool in the toolbox, part of a larger solution. It's my goal to #1) adhere to the specification and #2) meet the needs of both use cases. - -If you want to only build the patterns, alter your `Gruntfile.js` patternlab task to the following: - -``` -grunt.registerTask('default', ['clean', 'concat', 'patternlab:only_patterns', /*'sass',*/ 'copy']); -``` - -This will output compiled patterns to ./public/patterns/ - -### Where is the Gulp Version? - -The core patternlab engine is free of any dependencies to grunt, allowing users to integrate with gulp if desired. Future efforts here will orient towards [this gulp implementation](https://github.com/oscar-g/patternlab-node/tree/dev-gulp) by [oscar-g](https://github.com/oscar-g). - === ## Working with Patterns diff --git a/config.json b/config.json index 798df20c7..ff787019b 100644 --- a/config.json +++ b/config.json @@ -5,7 +5,7 @@ }, "ignored-extensions" : ["scss", "DS_Store", "less"], "ignored-directories" : ["scss"], - "debug": true, + "debug": false, "ishControlsVisible": { "s": true, "m": true, diff --git a/gulpfile.js b/gulpfile.js index ec9800baf..9b61e7b3f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,4 +1,4 @@ -// Shoutout to oscar-g for starting this at https://github.com/oscar-g/patternlab-node/tree/dev-gulp +// Special thanks to oscar-g (https://github.com/oscar-g) for starting this at https://github.com/oscar-g/patternlab-node/tree/dev-gulp var pkg = require('./package.json'), gulp = require('gulp'), diff --git a/package.gulp.json b/package.gulp.json index 34b55129e..36406357a 100644 --- a/package.gulp.json +++ b/package.gulp.json @@ -14,7 +14,6 @@ "gulp-header": "^1.0.5", "gulp-load": "^0.1.1", "gulp-nodeunit": "0.0.5", - "gulp-sass": "^0.7.3", "gulp-strip-banner": "0.0.2", "html-entities": "^1.1.1", "mustache": "^1.0.0" diff --git a/package.json b/package.json index 74051a636..1d97710a9 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,6 @@ "grunt-contrib-concat": "^0.5.0", "grunt-contrib-copy": "^0.7.0", "grunt-contrib-nodeunit": "^0.4.1", - "grunt-contrib-sass": "^0.8.1", "grunt-contrib-watch": "^0.6.1", "html-entities": "^1.1.1", "matchdep": "^0.3.0", From c39bbe093e3548817a9dea0c669ec9f62da3a20c Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Sat, 19 Sep 2015 23:21:05 -0500 Subject: [PATCH 09/10] final removal of sass from gulpfile. closes #57 closes #102 closes #103 --- CHANGELOG | 1 + README.md | 14 +++++++------- gulpfile.js | 2 +- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 61030a5f2..4e3afee22 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -7,6 +7,7 @@ PL-node-v0.12.0 - CHG: Commented out all sass tasks in Grunt and Gulp files - CHG: Changed static web server provider to BrowserSync - CHG: Replaced the Style Guide toolbar Auto-Reload and Page Follow with a link to the BrowserSync UI + - THX: Thanks @oscar-g for the initial work on the gulpfile! PL-node-v0.11.0 - ADD: Ignore pattern directories that start with an underscore. diff --git a/README.md b/README.md index bf1a97caa..5e3c0fb10 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,9 @@ ## About the Node Version of Pattern Lab -The Node version of [Pattern Lab](http://patternlab.io/) is, at its core, a static site generator. It combines platform-agnostic assets, like the Mustache-based patterns, the JavaScript-based viewer, and the self-contained webserver, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site. +The Node version of [Pattern Lab](http://patternlab.io/) is, at its core, a static site generator. It combines platform-agnostic assets, like the Mustache-based patterns, the JavaScript-based viewer, and the self-contained webserver, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site. -This repository contains the vanilla builder logic, grunt and gulp configurations, and some sample template/css/data to illustrate the powe and flexibility of the tool. +This repository contains the vanilla builder logic, grunt and gulp configurations, and some sample template/css/data to illustrate the power and flexibility of the tool. ### Download @@ -22,7 +22,7 @@ This repository ships with two `package.json` files, a `Gruntfile.js`, and a `gu To run patternlab-node using grunt, do the following in the directory you downloaded and extracted the zipped release: 1. Run `npm install` from the command line -2. Optionally, delete `package.gulp.json`, `gulpfile.js`, and `builder/patternlab_gulp.js` files if you are certain you dont need it. +2. Optionally, delete `package.gulp.json`, `gulpfile.js`, and `builder/patternlab_gulp.js` files if you are certain you don't need it. * Not deleting `builder/patternlab_gulp.js` may cause a harmless error when running grunt. Delete it. 3. Run `grunt` or `grunt serve` from the command line @@ -33,7 +33,7 @@ This creates all patterns, the styleguide, and the pattern lab site. It's strong To run patternlab-node using gulp, you need to swap out the default grunt configuration. Do the following in the directory you downloaded and extracted the zipped release: 1. Rename `package.json` to `package.grunt.json` or delete it if you don't intend on going back -2. Rename `package.gulp.json` to `package.json` +2. Rename `package.gulp.json` to `package.json` 3. Run `npm install` from the command line 4. Run `gulp` or `gulp serve` from the command line @@ -74,7 +74,7 @@ Get more information about patternlab-node, pattern lab in general, and where to To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt|gulp watch` or `grunt|gulp serve`. The `Gruntfile|Gulpfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy. ##### Preprocessor Support -The patternlab-node release package ships with some `.scss` files utilized in the creation of the style guide and sample templates, but these are not required. The compilation tasks are commented out in the `Gruntfiles|Gulpfiles` but can be uncommented or changed to meet your needs. Sass modules are note included in `package.json` files - the prevailing thought being if you are familiar enough with preprocessors, you can use the instructions for [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass) / [gulp-sass](https://github.com/dlmanning/gulp-sass) / _preprocessor of choice_ to install them. +The patternlab-node release package ships with some `.scss` files utilized in the creation of the style guide and sample templates, but these are not required. The compilation tasks are commented out in the `Gruntfiles|Gulpfiles` but can be uncommented or changed to meet your needs. Sass modules are not included in `package.json` files - the prevailing thought being if you are familiar enough with preprocessors, you can use the instructions for [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass) / [gulp-sass](https://github.com/dlmanning/gulp-sass) / _preprocessor of choice_ to install them. Uncomment the preprocessor configuration to fully utilize the example templates, css and style guide. **NOTE:** You may run into issues installing gulp-sass if you don't have the latest Visual Studio on Windows. See [here](https://github.com/sass/node-sass/issues/469) for more information and [this query](https://github.com/sass/node-sass/issues?utf8=%E2%9C%93&q=is%3Aissue+install) for a slew of installation problems related to gulp-sass. @@ -146,9 +146,9 @@ You can also exclude complete directories by prepending the directory name with `patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets. ##### Server & BrowserSync -Running `grunt serve` will compile the patternlab front end and host it by default on http://localhost:3000 via [BrowserSync](http://www.browsersync.io/docs/). After it starts, templates, `data.json`, and scss/css changes in your source code will be automatically injected into the page. +Running `grunt serve` will compile the patternlab front end and host it by default on http://localhost:3000 via [BrowserSync](http://www.browsersync.io/docs/). After it starts, templates, `data.json`, and scss/css changes in your source code will be automatically injected into the page. -You'll notice that if you have this open across different browsers, we do our best to keep the front end in sync, but there is a known issue with synced navigation using the main menu. +You'll notice that if you have this open across different browsers, we do our best to keep the front end in sync, but there is a known issue with synced navigation using the main menu. ### Roadmap diff --git a/gulpfile.js b/gulpfile.js index 9b61e7b3f..8007b8410 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -7,7 +7,7 @@ var pkg = require('./package.json'), strip_banner = require('gulp-strip-banner'), header = require('gulp-header'), nodeunit = require('gulp-nodeunit'), - sass = require('gulp-sass'), + //sass = require('gulp-sass'), browserSync = require('browser-sync').create(); require('gulp-load')(gulp); From 1192071580c5b49053d8e30a425121390dc6d7ad Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Sun, 20 Sep 2015 00:57:50 -0500 Subject: [PATCH 10/10] updated CHANGELOG --- CHANGELOG | 2 ++ README.md | 8 ++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 4e3afee22..9a3abb751 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -8,6 +8,8 @@ PL-node-v0.12.0 - CHG: Changed static web server provider to BrowserSync - CHG: Replaced the Style Guide toolbar Auto-Reload and Page Follow with a link to the BrowserSync UI - THX: Thanks @oscar-g for the initial work on the gulpfile! + - ADD: An alternative, more verbose syntax for pattern partial inclusion + - THX: Thanks @e2tha-e for the thoughtful addition with unit test coverage PL-node-v0.11.0 - ADD: Ignore pattern directories that start with an underscore. diff --git a/README.md b/README.md index 5e3c0fb10..336d031fb 100644 --- a/README.md +++ b/README.md @@ -79,9 +79,9 @@ The patternlab-node release package ships with some `.scss` files utilized in th **NOTE:** You may run into issues installing gulp-sass if you don't have the latest Visual Studio on Windows. See [here](https://github.com/sass/node-sass/issues/469) for more information and [this query](https://github.com/sass/node-sass/issues?utf8=%E2%9C%93&q=is%3Aissue+install) for a slew of installation problems related to gulp-sass. ##### Nav Bar Controls -If you don't have a need for some of the nav-bar tools in the patternlab frontend, you can turn them off in `config.json`. +If you don't have a need for some of the nav-bar tools in the Pattern Lab frontend, you can turn them off in `config.json`. -The current selection is as follows. It reflects support versus patternlab-php. +The current selection is as follows. ``` "ishControlsVisible": { @@ -146,9 +146,9 @@ You can also exclude complete directories by prepending the directory name with `patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets. ##### Server & BrowserSync -Running `grunt serve` will compile the patternlab front end and host it by default on http://localhost:3000 via [BrowserSync](http://www.browsersync.io/docs/). After it starts, templates, `data.json`, and scss/css changes in your source code will be automatically injected into the page. +Running `grunt serve` or `gulp serve` will compile the Pattern Lab frontend and host it by default on http://localhost:3000 via [BrowserSync](http://www.browsersync.io/docs/). After it starts, templates, `data.json`, and scss/css changes in your source code will be automatically injected into the page. -You'll notice that if you have this open across different browsers, we do our best to keep the front end in sync, but there is a known issue with synced navigation using the main menu. +You'll notice that if you have this open across different browsers, we do our best to keep the frontend in sync, but there is a known issue with synced navigation using the main menu. ### Roadmap