Как собрать отдельный файл npm библиотек с помощью Gulp и Browserify?

Question

[Рамиль]

Появилась задача все используемые в приложении npm-библиотеки собирать в отдельный vendor.min.js.
Сейчас все собирается в один файл bundle.min.js:

gulp.task "scripts", ->
  bundle = browserify
    entries: './src/app.coffee'
    extensions: ['.coffee']
    insertGlobals: true

  bundle.transform coffeeify
    .bundle()
    .pipe plumber()
    .pipe source "bundle.min.js"
    .pipe buffer()
    .pipe sourcemaps.init()
    .pipe uglify()
    .pipe sourcemaps.write()
    .pipe gulp.dest "./build/js"
    .on "end", browserSync.reload
    .on "error", gutil.log

Посмотрел в сторону browserify-shim, но не понял как это может помочь в моем случае. Подскажите как можно решить данную проблему.

Answer 1

[Ник В]

Я напишу как это у меня происходит, возможно что-нибудь будет Вам полезно.
Для установки пакетов я использую bower. Для сборки всех js и css из установленных bower'ом я использую main-bower-files для gulp'а. Вот так выглядит bower.json

bower.json

{
  "name": "Name",
  "description": "Description",
  "main": "index.js",
  "authors": [
    "Author"
  ],
  "license": "ISC",
  "moduleType": [],
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "3.0.0-beta1",
    "bootstrap": "v4.0.0-alpha.2",
    "gsap": "greensock#^1.18.2",
    "tether": "^1.1.1",
    "font-awesome": "fontawesome#^4.5.0"
  },
  "overrides": {
    "jquery": {
      "main": [
        "*/**/jquery.min.js"
      ]
    },
    "bootstrap": {
      "main": [
        "*/**/bootstrap.min.{js,css}"
      ]
    },
    "gsap": {
      "main": [
        "*/**/TweenMax.min.js"
      ]
    },
    "tether": {
      "main": [
        "*/**/tether.min.{js,css}"
      ]
    },
    "font-awesome": {
      "main": [
        "*/**/font-awesome.min.css",
        "fonts/*.*"
      ]
    }
  }
}

В overrides записываем те файлы которые будет цеплять main-bower-files.
Дальше таск в gulp'е

gulpfile

gulp.task 'vendors', ->
  jsFilter = gulpFilter '*.js',
    restore: true
  cssFilter = gulpFilter '*.css',
    restore: true
  fontFilter = gulpFilter '*.{otf,eot,svg,ttf,woff,woff2}',
    restore: true

  combiner(
    gulp.src do mainBowerFiles
    jsFilter
    gulpIf isDevelopment, do sourcemaps.init
    concat 'vendor.min.js'
    gulpIf isDevelopment, do sourcemaps.write
    gulp.dest path.build.js
  ).on 'error', handleError

  combiner(
    gulp.src do mainBowerFiles
    cssFilter
    gulpIf isDevelopment, do sourcemaps.init
    concat 'vendor.min.css'
    gulpIf isDevelopment, do sourcemaps.write
    gulp.dest path.build.css
  ).on 'error', handleError

  combiner(
    gulp.src do mainBowerFiles
    fontFilter
    gulp.dest path.build.fonts
  ).on 'error', handleError

В итоге будут два файлика vendor.min.js и vendor.min.css.

Comments

[Рамиль]

Сейчас у меня task vendor так и собирает. Но проблема немного в другом. У меня есть главный файл app.coffee, который подключает дополнительные модули, как собственные, так и сторонние (например Angular). Browserify все это склеивает и получается один огромный файл bundle.min.js Так вот я хочу что бы все сторонние модули собирались в vendor.min.js, а мои модули в bundle.min.js. Можно ли вообще такое сделать? И правильное ли это решение?

[Ник В]

Так, как у меня такой необходимости не возникало, то больше ничего не могу Вам посоветовать, кроме того, что бы посмотреть в сторону webpack'а. Мне кaжется, что он на 100% удовлетворит ваши потребности. Вот очень хороший скринкаст нему.