Breakdown grunt|gulp tasks, update README.md and unit tests now run through npm directly

Author: tbouron

Gruntfile.js

@@ -2,6 +2,10 @@ module.exports = function(grunt) {
 
 	var config = require('./config.json');
 
+	grunt.initConfig({});
+
 	// Load grunt tasks to the current grunt and inject the local configuration
-	require('./builder/patternlab_grunt')(grunt, config);
+	require('./builder/grunt-build')(grunt, config);
+
+	grunt.registerTask('default', ['patternlab', 'copy:pl_main', 'copy:pl_styleguide']);
 };

README.md

@@ -22,37 +22,34 @@ Make sure you are running your terminal/command line session as administrator. T
 
 ### 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.
+This repository ships a `Gruntfile.js`, and a `gulpfile.js`. The default is grunt currently. The core builder and tests are not dependent on either.
 
 ### 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 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
+2. Optionally, delete `gulpfile.js`, `builder/gulp-core.js`, `builder/gulp-build.js` and `builder/gulp-extra.js` files if you are certain you don't need it.
+3. Run `grunt` or `grunt pl: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 have BrowserSync spin up and serve the files to you.
+This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `grunt pl:serve` to 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
+1. Run `npm install` from the command line
+2. Optionally, delete `Gruntfile.js`, `builder/grunt-core.js` and `builder/grunt-build.js` files if you are certain you don't need it.
+4. Run `gulp` or `gulp pl:serve` from the command line
 
-This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `gulp serve` to have BrowserSync spin up and serve the files to you.
+This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `gulp pl:serve` to 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.
+* Don't delete any files related to grunt or gulp. That's it!
+* The `package.json` includes all dependencies for gulp **and** grunt so you can switch between the two without doing anything.
 * 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
@@ -78,7 +75,7 @@ Get more information about patternlab-node, pattern lab in general, and where to
 ### Further Configuration
 
 ##### Watching Changes
-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.
+To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt watch|gulp pl:connect` or `grunt|gulp pl:serve`. The `Gruntfile|Gulpfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy.
 
 ##### Configurable Paths
 Pattern Lab Node ships with a particular source and public workflow intended to separate the code you work on with the code generated for consumption elsewhere. If you wish to change any paths, you may do so within `config.json`. The contents are here:

builder/grunt-build.js

@@ -0,0 +1,167 @@
+/*
+ * patternlab-node - v1.1.0 - 2016
+ *
+ * Brian Muenzenmeyer, and the web community.
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
+ *
+ */
+
+// IMPORTANT: Remember that `./` matches the root of the grunt file that requires this one!
+// However, this does not apply to the `require('...')`
+module.exports = function(grunt, config) {
+    var path = require('path');
+
+    // Load CORE tasks
+    require('./grunt-core')(grunt, config);
+
+    // Load all grunt tasks
+    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
+
+    // Project configuration.
+    grunt.config.merge({
+        pkg: grunt.file.readJSON('package.json'),
+        concat: {
+            options: {
+                stripBanners: true,
+                banner: '/* \n * <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy") %> \n * \n * <%= pkg.author %>, and the web community.\n * Licensed under the <%= pkg.license %> license. \n * \n * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. \n *\n */\n\n',
+            },
+            pl_patternlab: {
+                src: './builder/patternlab.js',
+                dest: './builder/patternlab.js'
+            },
+            pl_object_factory: {
+                src: './builder/object_factory.js',
+                dest: './builder/object_factory.js'
+            },
+            pl_lineage: {
+                src: './builder/lineage_hunter.js',
+                dest: './builder/lineage_hunter.js'
+            },
+            pl_media_hunter: {
+                src: './builder/media_hunter.js',
+                dest: './builder/media_hunter.js'
+            },
+            pl_patternlab_grunt: {
+                src: './builder/patternlab_grunt.js',
+                dest: './builder/patternlab_grunt.js'
+            },
+            pl_patternlab_gulp: {
+                src: './builder/patternlab_gulp.js',
+                dest: './builder/patternlab_gulp.js'
+            },
+            pl_parameter_hunter: {
+                src: './builder/parameter_hunter.js',
+                dest: './builder/parameter_hunter.js'
+            },
+            pl_pattern_exporter: {
+                src: './builder/pattern_exporter.js',
+                dest: './builder/pattern_exporter.js'
+            },
+            pl_pattern_assembler: {
+                src: './builder/pattern_assembler.js',
+                dest: './builder/pattern_assembler.js'
+            },
+            pl_pseudopattern_hunter: {
+                src: './builder/pseudopattern_hunter.js',
+                dest: './builder/pseudopattern_hunter.js'
+            },
+            pl_list_item_hunter: {
+                src: './builder/list_item_hunter.js',
+                dest: './builder/list_item_hunter.js'
+            },
+            pl_style_modifier_hunter: {
+                src: './builder/style_modifier_hunter.js',
+                dest: './builder/style_modifier_hunter.js'
+            }
+        },
+        copy: {
+            pl_main: {
+                files: [
+                    {
+                        expand: true,
+                        cwd: path.resolve(config.paths.source.js),
+                        src: '*.js',
+                        dest: path.resolve(config.paths.public.js)
+                    },
+                    {
+                        expand: true,
+                        cwd: path.resolve(config.paths.source.css),
+                        src: '*.css',
+                        dest: path.resolve(config.paths.public.css)
+                    },
+                    {
+                        expand: true,
+                        cwd: path.resolve(config.paths.source.images),
+                        src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'],
+                        dest: path.resolve(config.paths.public.images)
+                    },
+                    {
+                        expand: true,
+                        cwd: path.resolve(config.paths.source.fonts),
+                        src: '*',
+                        dest: path.resolve(config.paths.public.fonts)
+                    },
+                    {
+                        expand: true,
+                        cwd: path.resolve(config.paths.source.data),
+                        src: 'annotations.js',
+                        dest: path.resolve(config.paths.public.data)
+                    }
+                ]
+            },
+            pl_styleguide: {
+                files: [
+                    {
+                        expand: true,
+                        cwd: path.resolve(config.paths.source.styleguide),
+                        src: ['*.*', '**/*.*'],
+                        dest: path.resolve(config.paths.public.styleguide)
+                    }
+                ]
+            }
+        },
+        watch: {
+            pl_all: {
+                files: [
+                    path.resolve(config.paths.source.css + '**/*.css'),
+                    path.resolve(config.paths.source.styleguide + 'css/*.css'),
+                    path.resolve(config.paths.source.patterns + '**/*.mustache'),
+                    path.resolve(config.paths.source.patterns + '**/*.json'),
+                    path.resolve(config.paths.source.fonts + '/*'),
+                    path.resolve(config.paths.source.images + '/*'),
+                    path.resolve(config.paths.source.data + '*.json')
+                ],
+                tasks: ['default', 'bsReload:pl_css']
+            }
+        },
+        browserSync: {
+            pl_dev: {
+                options: {
+                    server:  path.resolve(config.paths.public.root),
+                    watchTask: true,
+                    watchOptions: {
+                        ignoreInitial: true,
+                        ignored: '*.html'
+                    },
+                    plugins: [
+                        {
+                            module: 'bs-html-injector',
+                            options: {
+                                files: [path.resolve(config.paths.public.root + '/index.html'), path.resolve(config.paths.public.styleguide + '/styleguide.html')]
+                            }
+                        }
+                    ]
+                }
+            }
+        },
+        bsReload: {
+            pl_css: path.resolve(config.paths.public.root + '**/*.css')
+        }
+    });
+
+    grunt.registerTask('pl:serve', ['patternlab', 'copy:pl_main', 'copy:pl_styleguide', 'browserSync', 'watch:pl_all']);
+
+    grunt.registerTask('pl:build', ['concat']);
+};

builder/grunt-core.js

@@ -0,0 +1,37 @@
+/*
+ * patternlab-node - v1.1.0 - 2016
+ *
+ * Brian Muenzenmeyer, and the web community.
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
+ *
+ */
+
+// IMPORTANT: Remember that `./` matches the root of the grunt file that requires this one!
+// However, this does not apply to the `require('...')`
+module.exports = function(grunt, config) {
+    var patternlab = require('./patternlab.js')(config);
+
+    grunt.registerTask('patternlab', 'create design systems with atomic design', function(arg) {
+        if(arguments.length === 0){
+            patternlab.build(true);
+        }
+
+        if(arg && arg === 'v'){
+            patternlab.version();
+        }
+
+        if(arg && arg === "only_patterns"){
+            patternlab.build_patterns_only(true);
+        }
+
+        if(arg && arg === "help"){
+            patternlab.help();
+        }
+
+        if(arg && (arg !== "v" && arg !=="only_patterns" && arg !=="help")){
+            patternlab.help();
+        }
+    });
+};

builder/gulp-build.js

@@ -0,0 +1,100 @@
+/*
+ * patternlab-node - v1.1.0 - 2016
+ *
+ * Brian Muenzenmeyer, and the web community.
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
+ *
+ */
+
+// IMPORTANT: Remember that `./` matches the root of the gulp file that requires this one!
+// However, this does not apply to the `require('...')`
+module.exports = function(gulp, config) {
+    var path = require('path'),
+        browserSync = require('browser-sync').create();
+
+    // Load CORE tasks
+    require('./gulp-core')(gulp, config);
+
+    // COPY TASKS
+
+    // JS copy
+    gulp.task('pl:cp:js', function(){
+        return gulp.src('**/*.js', {cwd: path.resolve(config.paths.source.js)} )
+            .pipe(gulp.dest(path.resolve(config.paths.public.js)));
+    });
+
+    // Images copy
+    gulp.task('pl:cp:img', function(){
+        return gulp.src(
+            [ '**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg'  ],
+            {cwd: path.resolve(config.paths.source.images)} )
+            .pipe(gulp.dest(path.resolve(config.paths.public.images)));
+    });
+
+    // Fonts copy
+    gulp.task('pl:cp:font', function(){
+        return gulp.src('*', {cwd: path.resolve(config.paths.source.fonts)})
+            .pipe(gulp.dest(path.resolve(config.paths.public.images)));
+    });
+
+    // Data copy
+    gulp.task('pl:cp:data', function(){
+        return gulp.src('annotations.js', {cwd: path.resolve(config.paths.source.data)})
+            .pipe(gulp.dest(path.resolve(config.paths.public.data)));
+    });
+
+    // CSS Copy
+    gulp.task('pl:cp:css', function(){
+        return gulp.src(path.resolve(config.paths.source.css, 'style.css'))
+            .pipe(gulp.dest(path.resolve(config.paths.public.css)))
+            .pipe(browserSync.stream());
+    });
+
+    // Styleguide Copy
+    gulp.task('pl:cp:styleguide', function(){
+        return gulp.src(
+            [ '**/*'],
+            {cwd: path.resolve(config.paths.source.styleguide)} )
+            .pipe(gulp.dest(path.resolve(config.paths.public.styleguide)))
+            .pipe(browserSync.stream());
+    });
+
+    //server and watch tasks
+    gulp.task('pl:connect', ['pl:lab'], function(){
+        browserSync.init({
+            server: {
+                baseDir: path.resolve(config.paths.public.root)
+            }
+        });
+        gulp.watch(path.resolve(config.paths.source.css, '**/*.css'), ['pl:cp:css']);
+
+        gulp.watch(path.resolve(config.paths.source.styleguide, '**/*.*'), ['pl:cp:styleguide']);
+
+        gulp.watch(
+            [
+                path.resolve(config.paths.source.patterns, '**/*.mustache'),
+                path.resolve(config.paths.source.patterns, '**/*.json'),
+                path.resolve(config.paths.source.data, '*.json'),
+                path.resolve(config.paths.source.fonts + '/*'),
+                path.resolve(config.paths.source.images + '/*'),
+                path.resolve(config.paths.source.data + '*.json')
+            ],
+            ['pl:lab-pipe'],
+            function () { browserSync.reload(); }
+        );
+
+    });
+
+    gulp.task('pl:lab-pipe', ['pl:lab'], function(cb){
+        cb();
+        browserSync.reload();
+    });
+
+    gulp.task('pl:assets', ['pl:cp:js', 'pl:cp:img', 'pl:cp:font', 'pl:cp:data', 'pl:cp:css', 'pl:cp:styleguide' ]);
+    gulp.task('pl:prelab', ['pl:clean', 'pl:assets']);
+    gulp.task('pl:lab', ['pl:prelab', 'patternlab'], function(cb){cb();});
+    gulp.task('pl:patterns', ['patternlab:only_patterns']);
+    gulp.task('pl:serve', ['pl:lab', 'pl:connect']);
+};