Как организовать сборку модулей js при помощи Gulp?

Question

[Евгений Попов]

По мере изучения javascript, наткнулся на небольшую проблему. У меня есть gulp проект, где я собираю небольшие свои проекты, смотрю изменения и т.д. Но вот только недавно понял, что с модулями js, чтобы их собрать в единое, обстоят немного другие дела.

Знаю, что многие собирают модули при помощи webpack, если не большинство (честно, до него у меня руки еще не дошли). Но можно ли это как то организовать это при помощи Gulp? Хочу в Galp, так как я еще не опытный js разработчик, и всех возможностей того же webpack я пока не могу использовать, из за не знания. Пробывал сделать при помощи browserify, но работает наполовину, не работает слежка изменений watch. Сборка происходит, но выходит всегда ошибка. Не понимаю как сделать, целый день просидел и не врубаюсь) Может у кого то есть примерный конфиг для наглядности?

Comments

[kulaeff]

Если вы не знаете ни галпа, ни вебпака, то советую все-таки заюзать вебпак. К тому же он проще в изучении.

[Иван]

сам пока мало шарю в js,но что мешает собирать все js файлы в один?

[Евгений Попов]

kulaeff: с галпом немного знаком, его немного знаю, и поэтому задал этот вопрос. С вебпаком обязательно познакомлюсь, но позже. Вопрос времени)))

Answer 1

[sergey]

собираю к примеру вот так, все ок, не жалуюсь

// ~ 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());
});

Comments

[Islam Ibakaev]

gulp-useref (не вписывай файлы вручную)
gulp-load-plugins (для удобства подключения плагинов)

[Евгений Попов]

Но вы же просто собираете все вместе, конкатенация скриптов и все. Это я знаю как делать, с этим вопросов нет) Если разрабатывать модули на js, подключать их через импорт, то будет ошибка у вас. Или я что то не понимаю. Нужны другие плагины. Но вот как именно их подключить, не пойму

Answer 2

[Константин Величко]

Пример на сборки gulp + webpack
https://github.com/zoxon/gulp-front/blob/master/gu...

Comments

[Евгений Попов]

gulp.task('js', function(){
    return browserify({
        entries: ['./src/js/script.js']
    })
    .transform(babelify)  
    .bundle()
    .pipe(source('script.min.js'))
    .pipe(buffer()) // <----- convert from streaming to buffered vinyl file object
    .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .on('error', gutil.log)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(dirs.build + '/js'));
});

уже сделал так, для начала пойдет. Но все равно спасибо, думаю потом все равно на вебпак перейти.