How to organize the assembly of js modules using Gulp?

Question

JavaScript

While learning javascript, I came across a small problem. I have a gulp project where I collect my small projects, see changes, etc. But only recently I realized that with js modules, in order to assemble them into one, things are a little different.
I know that many, if not most, build modules with webpack (honestly, I haven’t got my hands on it yet). But is there any way to organize this with Gulp? I want to Galp, because I'm not an experienced js developer yet, and I still can't use all the features of the same webpack, because of my lack of knowledge. I tried to do it with the help of browserify, but it works only halfway, watch change tracking does not work. The assembly happens, but always an error comes out. I don’t understand how to do it, I sat all day and don’t get it) Maybe someone has an approximate config for clarity?

Answer 1

I collect for example like this, everything is ok, I'm not complaining

// ~ Compile JS ~
var jsFilter = gulpFilter('**/*.js');

// Concat vendor JS (uglify for production)
gulp.task('js:vendor', function() {
    gulp.src(mainBowerFiles({
          "overrides": {
              "jquery": {
                  "main": "./dist/jquery.min.js"
              },

            "magnific-popup": {
                  "main": "./dist/jquery.magnific-popup.min.js"
              },

             "slick-carousel": {
                  "main": "./slick/slick.min.js"
              },

              "readmore-js": {
                  "main": "./readmore.js"
              }
          }
  }))
      .pipe(jsFilter)
      .pipe(concat('vendor.js'))
      .pipe(gulpIf(env !== 'dev', uglify()))
    .pipe(size())
      .pipe(gulp.dest(outputDir + 'js'))
});

// Concat own JS (uglify for production)
gulp.task('js', function() {
    gulp.src(src.js)
        .pipe(jsHint())
        .pipe(jsHint.reporter('default'))
        .pipe(concat('script.js'))
        .pipe(gulpIf(env !== 'dev', uglify()))
        .pipe(gulp.dest(outputDir + 'js'))
      .pipe(size())
        .pipe(connect.reload());
});

Answer 2

Example for gulp + webpack builds
https://github.com/zoxon/gulp-front/blob/master/gu...