how to copy node_modules files to build folder

[lorvent]

Hello,
can you tell me what is the proper code to write a css or js file from node_modules into build folder.

ex: bootstrap.min.js

thanks.

[lorvent]

we can use gulp.src().pipe() but can we have a good function like this

https://github.com/laravel/elixir/blob/master/src/tasks/recipes/copy.js

so that we can use a simple function like gulp.copy() instead of gulp.src.pipe...

[Takuya Fukuju]

Unfortunately, there is no way to do such a thing by default.

To copy the node_module files, you need to create a new task for that or manually copy them to the static directory. But I don't recommend it (and probably you don't need it).

The most common way to include vendor stylesheets is to use the @use rule. It gives you more control over vendor codes.

For example, to include Bootstrap's stylesheet add the following code to the assets/styles/main.scss:

@use 'node_modules/bootstrap/scss/bootstrap';

By using with clause, you can override the default value of its variables:

@use 'node_modules/bootstrap/scss/bootstrap' with (
  $body-bg: #123456
);

Further reading:

• https://getbootstrap.com/docs/4.4/getting-started/theming/
• http://www.sass-lang.com/documentation/at-rules/use#configuring-modules

To output to a separate file, create a new entry point anywhere in assets/styles/ and add the @use statement there. Also, don't forget to load it from HTML, of course.

The same is true for how to include vendor scripts. Just import them at any entry point.

[lorvent]

thanks for the response,
but unfortunately my requierment is different.

i use 100s of npm packages and i don't want to include all of them in all pages so i include them in the pages where they are required, also i copy only few files from each package.

and i can't reference from node_modules so i copy them to dist/vendors folder using copy command as in the link i sent above.

so i am looking for similar command/function like gulp.copy('node_modules/package/file.js','dist/vendors/package/file.js')

do you think you can implement something similar? or can guide me a way of doing it.

so basically i need a function, which i can use multiple times.

[Takuya Fukuju]

I am not interested in implementing additional features for this case.

Does CDN not meet your requirement? (e.g. jsDelivr, unpkg)

Or, webpack's SplitChunksPlugin also helps you. Check this out:

• https://webpack.js.org/plugins/split-chunks-plugin/
• https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css

If you really want to copy the files, you can use the cpx package like this:

gulpfile.js/tasks/vendors.js

import path from 'path'

import cpx from 'cpx'

import config from '../../config'

export default function vendors() {
  return Promise.all([
    cpx.copy(
      'node_modules/swiper/css/swiper.min.css',
      path.join(config.get('distDir'), config.get('site.basePath'), 'vendors'),
      Promise.resolve()
    ),
    cpx.copy(
      'node_modules/swiper/js/swiper.min.js',
      path.join(config.get('distDir'), config.get('site.basePath'), 'vendors'),
      Promise.resolve()
    )
  ])
}

[lorvent]

i don't want to use CDN,

i want to avoid webpack thats why i am sticking to gulp most of the time (its not that i don't like webpack but gulp is easier to explain and use)

thanks for the vendors.js idea, that is what i want.

Also thanks for the fast response, eventhough elixir meets all my requirement, i want to use something more modern gulp4 based and after spending hours on many different repos, i had to decide between yours and another and your response makes me stick with yours 😃

[lorvent]

BTW, are you planning to add/improve anything into repo anytime soon?

beacause once i start making changes, i may not be able to pull from upstream.

[Takuya Fukuju]

I am glad to help you.

BTW, are you planning to add/improve anything into repo anytime soon?

I can't promise, but no.

[Takuya Fukuju]

FYI, I noticed that ncp is more popular than cpx.

https://www.npmtrends.com/copy-vs-copyfiles-vs-cp-vs-cpx-vs-ncp-vs-npm-build-tools

[lorvent]

thanks, will try to use it.

[lorvent]

Hello, just want to bump on this issue.

can we have an elegant, verbose option like https://github.com/laravel/elixir/blob/master/src/tasks/recipes/copy.js here?

is that possible?

[Takuya Fukuju]

Hi lorvent.

What do you mean by "elegant, verbose option"? What do you actually want to do?

FWIW, gulp's tasks only take a callback as its argument. https://gulpjs.com/docs/en/getting-started/async-completion#using-an-error-first-callback

[lorvent]

Hello, i mean...... above allows to do something like
gulp.copy(src_path,dest_path) any no. of times in a gulpfile.js

so we can have something like that or in a js/json...we specify all src and dest paths and it copies files accordingly.

thanks.

[Takuya Fukuju]

Hmm, there are many possible solutions. How about this?

gulpfile.js/tasks/vendors.js

const cpx = require('cpx')

const filePaths = [
  {
    src: 'node_modules/sanitize.css/sanitize.css',
    dest: 'dist/dir1',
  },
  {
    src: 'node_modules/sanitize.css/forms.css',
    dest: 'dist/dir2',
  },
]

function vendors() {
  return Promise.all(
    filePaths.map(
      (filePath) =>
        new Promise((resolve) => cpx.copy(filePath.src, filePath.dest, resolve))
    )
  )
}

module.exports = vendors

You can also move out filePaths to external JSON file and then read it with fs.readFileSync() and JSON.parse().

[lorvent]

Exactly something like this is, what i am looking for 😃

[lorvent]

to avoid making another issue, i am asking another question here itself.

does it already have feature to remove un-used css?
i.e. using anything like purgecss/cssnano etc?

thanks

[Takuya Fukuju]

No, unfortunately, the current project structure is not fully compatible with PurgeCSS. It will be some complicated work is required to adopt it. That said, it might be worth investigating.

It doesn't use cssnano but uses CSSO and clean-css for the same purpose instead.

[lorvent]

Oh, Glad to hear that...it already had some option available already 💯

Thanks for your hard work!

[lorvent]

Hello, i guess this plugin is straight forward for this job

https://www.npmjs.com/package/fs-copy-file-sync

[Takuya Fukuju]

Cool. Please feel free to close this issue.

[lorvent]

any chance you could implement this in repo?

otherwise feel free to close it and i will try to implement myself.

thanks