How to build a separate npm library file with Gulp and Browserify?

R

Ramil2016-03-09 12:44:42

gulp.js

Ramil, 2016-03-09 12:44:42

There was a task to collect all the npm libraries used in the application into a separate vendor.min.js.
Now everything is collected in one bundle.min.js file:

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

I looked in the direction of browserify-shim, but did not understand how this could help in my case. Please tell me how to solve this problem.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

N

Nick V, 2016-03-09
@half-life

I will write how it happens for me, maybe something will be useful to you.
I use bower to install packages . To build all the js and css from the ones installed by bower, I use main-bower-files for gulp. This is what bower.json looks like

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/*.*"
      ]
    }
  }
}

In overrides we write those files that main-bower-files will cling to.
Next task in 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

As a result, there will be two files vendor.min.js and vendor.min.css.