Patternlab interaction

[andresgalante]

Hi, I know that this things take a lot of time and effort, if you can complete the "Importing components and assets from Pattern Lab" section it'd help me a lot 😄

Thanks a lot and if let me know if I can help in anyway

[bradfrost]

@andresgalante I'll try to write this up in the correct place, but

I'm afraid I don't have time to get into too much detail here
But essentially the process is as follows:

Make sure the Pattern Lab and style guide repositories are sitting adjacent to each other, like so:

pattern-lab/
style-guide/

In the Pattern Lab repo, you'll have a Gulp or Grunt copy task that ports over the appropriate assets to the style guide repo, which you would run like:

gulp export-to-styleguide

This command will copy the following files and directories into the style guide project file structure:

• public/patterns/ => includes/patterns
• public/patterns/ => patterns
• public/icons.svg => icons.svg
• public/css/ => css/
• public/js/ => js/
• public/images => images/

The relevant part of the gulp file looks something like:

// This is the task that exports the results from Pattern Lab
// into the Jekyll style guide that lives outside of this repository
gulp.task('copy:export-to-styleguide', function (done) {

    // Export public/patterns directory to style guide's includes
    // This is used to include the actual code into the code samples
    gulp.src(['public/patterns/**/*', '!public/patterns/**/*.rendered.html'])
        .pipe(gulp.dest('../style-guide/_includes/patterns'));

    // Export public/patterns directory to style guide patterns directory
    // This is used to pipe the live patterns into the iframe
    gulp.src(['public/patterns/**/*', '!public/patterns/**/*.rendered.html'])
        .pipe(gulp.dest('../style-guide/patterns'));

    // Export css directory to style guide css directory
    gulp.src('public/css/**/*')
        .pipe(gulp.dest('../style-guide/css'));

    // Export js directory to style guide js directory
    gulp.src('public/js/**/*')
        .pipe(gulp.dest('../style-guide/js'));

    // Export icons to style guide root directory
    gulp.src('public/icons.svg')
        .pipe(gulp.dest('../style-guide'));

    // Export images directory to style guide images directory
    gulp.src('public/images/**/*')
        .pipe(gulp.dest('../style-guide/images'));

    // Export images directory to style guide images directory
    gulp.src('public/images/**/*')
        .pipe(gulp.dest('../style-guide/images'));

    done();
});

Hope that's helpful. Again, I'll try to write that up in a better place soon.

[andresgalante]

This is awesome, thank you very much for taking the time to guide me.

While I go through the process I'll document it and send a PR to the README.

Again, thanks a lot.

[solumspace]

Hello - I considered doing this through Grunt but wondered if there was a way to do this with the https://github.com/Comcast/patternlab-edition-node-webpack version with the build in Webpack.

[solumspace]

I ended up just using the patternlab node version and inside the style guide i'm copying files from patternlab. I am more familiar with Gruntjs so I used grunt-contrib-copy and thought i'd share the Gruntfile config for it here.

// copy over resources from patternlab
        copy: {
          main: {
            files: [
              // Export public/patterns directory to style guide's includes
              {expand: true, cwd: '../patternlab/public/patterns/', src: ['**/*'], dest: '_includes/patterns'},

              // Export public/patterns directory to style guide patterns directory
              {expand: true, cwd: '../patternlab/public/patterns/', src: ['**/*'], dest: 'patterns'},

              // Export css directory to style guide css directory
              {expand: true, cwd: '../patternlab/_sass/', src: ['**/*'], dest: '_sass'},

              // Export js directory to style guide js directory
              {expand: true, flatten: true, src: ['../patternlab/public/styleguide/js/patternlab-pattern.js'], dest: 'styleguide/js', filter: 'isFile'},

              // Export images directory to style guide images directory
              {expand: true, cwd: '../patternlab/public/images/', src: ['**/*'], dest: 'images'},

              // Export icons to style guide root directory
              {expand: true, flatten: true, src: ['../pattern-library/public/icons.svg'], dest: '.', filter: 'isFile'}

            ],
          },
        },

Thanks for all the hard work.