Video folder not assets to DIST folder [solved]

rerege · March 19, 2019, 5:07pm

Hallo,
amateur question.
What can I asset my folder video? I read link in this forum, but there was solution via gulpfile.js, but it doesnt exist in my project.

my example:
resources/assets/video

after:
yarn build
yarn start

I get link to folder /dist/video/…mp4, but the folder dist contains only
images
scripts
(+styles in cache)

What can I add my folder video? config.js? If yes, how?

Thank you for help

Vana

alwaysblank · March 19, 2019, 5:17pm

The following section of webpack.config.js configures which files are copied during the build process (which I assume is all you want to do with your videos—if you need to process them in some way you would need to add a different loader to do that).

github.com

roots/sage/blob/f3e794a09374d2f110742d15b9b975490fcddbee/resources/assets/build/webpack.config.js#L146-L150


new CopyGlobsPlugin({
  pattern: config.copy,
  output: `[path]${assetsFilenames}.[ext]`,
  manifest: config.manifest,
}),

The following line in config.js allows you to specify a glob that is used to by the above code to determine which files to copy, so you’d want to adjust it to include your video directory and the files within it.

github.com

roots/sage/blob/f3e794a09374d2f110742d15b9b975490fcddbee/resources/assets/build/config.js#L16




const userConfig = merge(desire(`${__dirname}/../config`), desire(`${__dirname}/../config-local`));


const isProduction = !!((argv.env && argv.env.production) || argv.p);
const rootPath = (userConfig.paths && userConfig.paths.root)
  ? userConfig.paths.root
  : process.cwd();


const config = merge({
  open: true,
  copy: 'images/**/*',
  proxyUrl: 'http://localhost:3000',
  cacheBusting: '[name]_[hash]',
  paths: {
    root: rootPath,
    assets: path.join(rootPath, 'resources/assets'),
    dist: path.join(rootPath, 'dist'),
  },
  enabled: {
    sourceMaps: !isProduction,
    optimize: isProduction,

rerege · March 19, 2019, 5:39pm

uf, uf… yes, I want only copy from resources to dist…
So, how can I modify config.js?

const config = merge({
open: true,
copy: ‘images/**/*’,

copy: ‘video/**/*’, <<propably stupid !

proxyUrl: ‘http://localhost:3000’,

alwaysblank · March 19, 2019, 5:54pm

If you take a look at the source for copy-globs-webpack-plugin, the tool that’s being used to copy these files, you can see the format that it expects globs to be in:

github.com

QWp6t/copy-globs-webpack-plugin/blob/e8b7491f35f31ebbe7bb1d5c6c61b6c01d3c954f/src/CopyGlobsWebpackPlugin.js#L20-L32


class ArgsArrayError extends TypeError {
  constructor() {
    super(
      errorMsg(
        "[copy-globs] pattern cannot be an array.\n" +
          "For multiple folders, use something like:\n\n" +
          "  +(images|fonts)/**/*\n\n" +
          "See also: https://github.com/isaacs/node-glob#glob-primer\n"
      )
    );
    this.name = "ArgsArrayError";
  }
}

So in your case you would probably want:

copy: '(images|video)/**/*',

Globs are used quite a bit in the Sage webpack configuration, so I’d strongly recommend reading up on how they work: https://github.com/isaacs/node-glob#glob-primer

rerege · March 20, 2019, 9:42am

@alwaysblank
Hi Ben, thank you very much for your answer… Big help!
Finally for me was correct this coding writting: copy: '+(video|images)//*’,**

system · April 30, 2019, 5:07pm

This topic was automatically closed after 42 days. New replies are no longer allowed.