how to copy node_modules files to build folder

Question

how to copy node_modules files to build folder

lorvent opened this issue 5 years ago · 20 comments

lorvent commented 5 years ago

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.

Answer 1 · 2019-12-31T12:23:16.000Z

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...

Answer 2 · 2019-12-31T20:26:20.000Z

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:

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.

Answer 3 · 2020-01-01T05:44:43.000Z

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.

Answer 4 · 2020-01-01T09:27:31.000Z

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:

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()
    )
  ])
}

Answer 5 · 2020-01-01T10:59:12.000Z

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 😃

Answer 6 · 2020-01-01T11:00:46.000Z

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.

Answer 7 · 2020-01-01T11:39:11.000Z

I am glad to help you.

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

I can't promise, but no.

Answer 8 · 2020-01-01T11:51:15.000Z

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

Answer 9 · 2020-01-01T17:03:59.000Z

thanks, will try to use it.

Answer 10 · 2021-01-30T18:47:54.000Z

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?

Answer 11 · 2021-01-31T07:23:15.000Z

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

Answer 12 · 2021-01-31T17:00:58.000Z

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.

Answer 13 · 2021-02-01T15:07:42.000Z

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().

Answer 14 · 2021-02-01T15:21:05.000Z

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

Answer 15 · 2021-02-01T15:41:09.000Z

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

Answer 16 · 2021-02-01T16:35:13.000Z

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.

Answer 17 · 2021-02-02T16:33:59.000Z

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

Thanks for your hard work!

Answer 18 · 2021-05-24T11:16:11.000Z

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

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

Answer 19 · 2021-06-07T01:41:31.000Z

Cool. Please feel free to close this issue.

Answer 20 · 2021-06-07T04:30:01.000Z

any chance you could implement this in repo?

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

thanks