Как скопировать ассеты из node_modules в публичную директорию средствами gulp или webpack?

Question

[Кирилл Текорд]

Разрабатываю приложение на PHP, во фронтенд разработке я динозавр. У меня есть несколько библиотек, подключенных через npm. Мне нужно скопировать некоторые папки из node_modules в публичную папку проекта public/assets с сохранением структуры вложенных папок. Пример папок которые хочу скопировать:

- node_modules\vue\dist\
- node_modules\bootstrap\dist\

На выходе хочу получить такую структуру:

- public/assets/vue/dist
- public/assets/bootstrap/dist

Подскажите как это сделать средствами gulp или webpack, желательно чисто имеющимися средствами, без дополнительных плагинов.

И какие вообще есть практики для паблишенга ассетов? В основном встречаю сборку всего в 1 файл, примеры пестрят плагинами, туториалы написаны в разные года и из-за бурного развития инструментов представленный там код часто не работает, поэтому испытываю трудности в изучении.

Comments

[Кирилл Текорд]

Разобрался, сделал через gulp:

gulp.task("publish-vendor-assets", () => {
        return gulp.src([
            './../node_modules/**//vue/dist/*.*'
        ]).pipe(gulp.dest('./web/assets'))
    });

Answer 1

[Игорь Забродин]

Пример части конфигурации для webpack версии 4 (но и на предыдущих работает):

output: {
    path: resolve(__dirname, './dist'),
    publicPath: mode === 'development' ? '/' : 'static/',
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|ico|woff2|ttf|eot)(\?.*$|$)/,
        loader: 'file-loader',
        exclude: /node_modules/,
        options: {
          name: '[path][name].[ext]?[hash]',
          publicPath: mode === 'development' ? '' : './static'
        }
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)(\?.*$|$)/,
        loader: 'file-loader',
        options: {
          regExp: /node_modules/,
          name: '[name].[ext]?[hash]',
          publicPath: mode === 'development' ? '' : './static/img',
          outputPath: 'static/img'
        }
      }
    ]
  }

Первый лоадер для собственных ассетов, второй для node_modules.
В моем случае нужно было переместить статику и получить правильные пути для неё в css из такого (без второго лоадера):

{
  background: transparent url(./static/_/node_modules/fancybox/dist/img/blank.gif);
}

В такое:

{
  background: transparent url(./static/img/blank.gif);
}

Эта конфигурация простая, статики не много и у меня не стояло задачи каким то образом ее оптимизировать (использовать url-loader например, разделять шрифты и графику и т.п.).

Comments

[Кирилл Текорд]

Спасибо за ответ! На вебпаке довольно громоздко получается, на gulp'е уже в пару строчек получилось сделать.

[Игорь Забродин]

Webpack и gulp все же для разных задач предназначены - первый бандлер, второй таск менеджер. И порой webpack действительно может быть оверкиллом, тут уже от задач и проекта зависит.