Could toolkit scripts be easier to create?

[tylersticka]

Currently, creating new toolkit scripts requires you to create a new file, then add a somewhat redundant item to config.js:

'drizzle/scripts/drizzle': './src/assets/drizzle/scripts/drizzle.js',
'toolkit/scripts/toolkit':  './src/assets/toolkit/scripts/toolkit.js',
'drizzle/scripts/some-page': './src/assets/toolkit/scripts/some-page.js'

It seems like this could be simplified, at least so that the toolkit/scripts directory doesn't need a new entry for every single root JS package. But I might be missing something.

[erikjung]

Regarding sandbox/demo page scripts, I'm wondering if webpack should even be used. It's purpose is to resolve modules and bundle them together...so it seems like adding more entries for individual pages is the wrong solution for simply making those scripts available.

What about figuring out some way to use the copy task to move the downloaded scripts into dist?

[gerardo-rodriguez]

Good point @erikjung. Seems worth considering for sure.

[tylersticka]

Yeah, that's probably a better idea.

I don't even know if we'd need to do anything.

I'm pretty sure as long as the path is static/assets/scripts/toolkit/, it'll just merge with whatever else the build outputs to that directory.

[ghost]

What about using a custom toolkit setup different from Drizzle, is that possible? With my own browser-sync, watch, sass and webpack gulp tasks? I saw you have a drizzle-builder package, would that be the way to go?

Really looking forward to using Drizzle, this looks like the tool we've been searching for for our pattern library!

[erikjung]

@guilambert

What about using a custom toolkit setup different from Drizzle, is that possible?

Yes, you could in theory use a clone of this repo (or your own starting point) and simply include the drizzle-builder package (which is just a Promise-returning function) to handle the template/data/content compilation.

We plan to rewrite the builder to be a bit more flexible in general (for example, allowing more template options other than Handlebars).

[ghost]

@erikjung Thank you! I will give it a try and let you know.

[ghost]

So basically just have a copy of the content src directory, and then have my own tasks setup at the root along with drizzle-builder to handle the compilation?

[ghost]

Update, added drizzle-builder to my devDeps, added the following to my gulpfile (drizzleConfig is the same as the cloudfour-patterns one):

const drizzle = require('drizzle-builder');
const drizzleConfig = require('./config');
// Register Drizzle builder task
gulp.task('drizzle', () => {
  const result = drizzle(drizzleConfig.drizzle);
  return result;
});

And I get this stack error when running gulp drizzle:

Error: Missing helper: "timestamp"
    at Object.<anonymous> (/Users/guillaume/Sites/drizzle/node_modules/handlebars/dist/cjs/handlebars/helpers/helper-missing.js:19:13)
    at eval (eval at createFunctionContext (/Users/guillaume/Sites/drizzle/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:254:23), <anonymous>:8:76)
    at prog (/Users/guillaume/Sites/drizzle/node_modules/handlebars/dist/cjs/handlebars/runtime.js:219:12)
    at execIteration (/Users/guillaume/Sites/drizzle/node_modules/handlebars/dist/cjs/handlebars/helpers/each.js:51:19)
    at Object.<anonymous> (/Users/guillaume/Sites/drizzle/node_modules/handlebars/dist/cjs/handlebars/helpers/each.js:61:13)
    at eval (eval at createFunctionContext (/Users/guillaume/Sites/drizzle/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:254:23), <anonymous>:8:31)
    at Object.prog [as fn] (/Users/guillaume/Sites/drizzle/node_modules/handlebars/dist/cjs/handlebars/runtime.js:219:12)
    at fn (/Users/guillaume/Sites/drizzle/node_modules/handlebars-layouts/index.js:41:17)
    at Object.applyAction (/Users/guillaume/Sites/drizzle/node_modules/handlebars-layouts/index.js:54:11)
    at Array.reduce (native)
    at Object.helpers.block (/Users/guillaume/Sites/drizzle/node_modules/handlebars-layouts/index.js:171:43)
    at eval (eval at createFunctionContext (/Users/guillaume/Sites/drizzle/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:254:23), <anonymous>:5:90)
    at prog (/Users/guillaume/Sites/drizzle/node_modules/handlebars/dist/cjs/handlebars/runtime.js:219:12)
    at Object.helpers.block (/Users/guillaume/Sites/drizzle/node_modules/handlebars-layouts/index.js:173:5)
    at Object.eval (eval at createFunctionContext (/Users/guillaume/Sites/drizzle/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:254:23), <anonymous>:12:72)
    at main (/Users/guillaume/Sites/drizzle/node_modules/handlebars/dist/cjs/handlebars/runtime.js:173:32)

Thought the timestamp helper came from @cloudfour/hbs-helpers so I also installed it, but still no chance. Any idea what I'm missing?

Thank you

[erikjung]

@guilambert

Thought the timestamp helper came from @cloudfour/hbs-helpers so I also installed it, but still no chance. Any idea what I'm missing?

In addition to including that helpers package, you'll also need to pass the helpers along to the helpers property of the builder config.

The assignment is done in the Drizzle Gulpfile like this:

const drizzle = require('drizzle-builder');
const helpers = require('@cloudfour/hbs-helpers');
const config = require('./config');

Object.assign(config.drizzle, { helpers });

(https://github.com/cloudfour/drizzle/blob/master/gulpfile.js#L11-L12)

[ghost]

Funny I just saw that while looking at the gulpfile just at this very moment :wink:

I will take another shot at it, thanks again!

[ghost]

Great the drizzle builder works now with that place.

Now I'm struggling with paths being outputted. My drizzle instance is located in resources/drizzle/, and I want to run the drizzle-builder from my root gulpfile.js:

const drizzle = require('drizzle-builder');
const helpers = require('@cloudfour/hbs-helpers');
const drizzleConfig = Object.assign({
  src: {
    data: {
      basedir: 'resources/drizzle/src/data',
      glob: 'resources/drizzle/src/data/**/*'
    },
    pages: {
      basedir: 'resources/drizzle/src/pages',
      glob: 'resources/drizzle/src/pages/**/*'
    },
    patterns: {
      basedir: 'resources/drizzle/src/patterns',
      glob: 'resources/drizzle/src/patterns/**/*.hbs'
    },
    templates: {
      basedir: 'resources/drizzle/src/templates',
      glob: 'resources/drizzle/src/templates/**/*.hbs'
    }
  },
  dest: {
    pages: './public/drizzle',
    patterns: './public/drizzle/patterns'
  }
}, { helpers });

// Register Drizzle builder task
gulp.task('drizzle', () => {
  const result = drizzle(drizzleConfig);
  return result;
});

I tried setting the basedir for each src by removing resources/drizzle/src/ but does not work. Both the path for building and the path outputted in those files are tied together, or is there a way I can have a custom "relative" path in the ouptut files for both pages and assets?

Thanks!

[erikjung]

@guilambert

Could you provide an example repo or a tree output of your directory structure? This path issue you're describing is likely something specific to the builder. Having something to test against will make this a bit easier to diagnose.

A few things to try:

1. Prefix your relative paths with ./ (e.g. ./resources/drizzle...)

2. Check how the relative paths are being resolved to absolute paths by adding this line to your gulp task:

   gulp.task('drizzle', () => {
    const result = drizzle(drizzleConfig);
    result.then(d => console.log(d.options.src));   // <==
    return result;
   });

[ghost]

Thanks @erikjung, will test that out and let you know. Appreciate the help, and hopefully I'll be able to give back soon to the project as I have ideas/suggestions for the project 😉

[tylersticka]

Related: cloudfour/core-gulp-tasks#55