Как в gulp с помощью main-bower-files разложить файлы библеотек по папкам?

Question

[AlexRas]

Здравствуйте, подскажите как можно разложить файлы библиотек по их папкам, напрмер:

Если использовать такой таск, то все файлы упадут в одну папку lib

gulp.task('bower', function() {
    gulp.src(mainBowerFiles({
            "overrides": {
                "jquery": {
                    "main": "./dist/jquery.min.js"
                },
                "bootstrap-grid": {
                    "main": [
                        './dist/bootstrap-grid.min.css'
                    ]
                }
            }
        }))
        .pipe(gulp.dest('./lib/'))
});

Как сделать так чтобы файлы упали в свои папки, тоесть:
lib
- jquery
-- jquery.min.js
- bootstrap-grid
-- bootstrap-grid.min.css

Comments

[AlexRas]

Stepanya: чтобы все в куче не валялось, если библиотек будет много, то получится каша в папке lib

Answer 1

[AlexRas]

Сделал так, може у кого есть лучше варианты?

gulp.task('bower', function() {
    var mainBowerFilesArr = mainBowerFiles({
            'overrides': {
                'jquery': {
                    'main': './dist/jquery.min.js'
                },
                'bootstrap-grid': {
                    'main': './dist/bootstrap-grid.min.css'
                }
            }
        }).map( function(path) {
            return path;
        });

    for (var i = mainBowerFilesArr.length - 1; i >= 0; i--) {
        var p = mainBowerFilesArr[i].substring(mainBowerFilesArr[i].indexOf('bower_components'));
        var f = p.split('\\')[1]+'/';
        gulp.src(p).pipe(gulp.dest(path.build.lib+f));
    }
});

Answer 2

[sergey]

Зачем такое писать, потом кашу будете черпаком вылавливать?
Вот простой рабочий пример, на выходе файлы объединяются в vendor.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"
              },

              "jquery.maskedinput": {
                  "main": "./dist/jquery.maskedinput.min.js"
              },
	
	          "jqueryrotate": {
		          "main": "./jQueryRotate.js"
	          }
          }
  }))
      .pipe(jsFilter)
      .pipe(concat('vendor.js'))
      .pipe(gulpIf(env !== 'dev', uglify()))
      .pipe(gulp.dest(outputDir + 'js'))
});

во втором случае таск по вашему js коду

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(connect.reload());
});

в проект в итоге подключается два файла: main.js и vendor.js

Comments

[AlexRas]

Подскажите тогда еще один момент. То что написали подойдет для библиотек где есть js и css, а как быть например с картинками? Их пути прописаны в css, то получается картинки нужно кидать в папку с css файлом?

[sergey]

AlexRas:

// Compress images and move 'em to output dir
gulp.task('images', function() {
    return gulp.src(src.images)
        .pipe(imageMin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(outputDir + 'img'))
        .pipe(connect.reload())
});

[sergey]

AlexRas: зачем картинки кидать в css? для картинок я Вам написал выше

[AlexRas]

SM: Вот на примере fancybox - joxi.ru/Rmz14Ls0YbNErO
В css прописаны пути к картинкам и прописаны они относительно css файла

[sergey]

AlexRas: учите gulp, вот вам таск css и там вы уже прописывает шрифты к примеру

// Concat vendor CSS (uglify for production)
gulp.task('styles:vendor', function() {
  gulp.src(mainBowerFiles({
          "overrides": {
              "normalize.css": {
                  "main": "./normalize.css"
              },

              "magnific-popup": {
                  "main": "./dist/magnific-popup.css"
              },

              "slick-carousel": {
                  "main": [
                      "./slick/slick.css",
                      "./slick/slick-theme.css",
                      "./slick/fonts/!*.*"
                  ]
              }
          }
  }))
  .pipe(cssFilter)
  .pipe(concat('vendor.css'))
  .pipe(gulpIf(env !== 'dev', minifyCSS()))
  .pipe(gulp.dest(outputDir + 'css'))
});

картинки в любом случае в таске image

[sergey]

AlexRas: вы что-то не то читаете, не важно что вы подключаете fancybox, slick slider или другую библиотеку, вы подключаете обычно их два файла: *.js и *.css и все, больше ничего, в редких случаях шрифты еще

[AlexRas]

SM: ну я не могу один момент понять, ведь у них есть картинки и если я объединю все в одно, то пути к картинкам в css будут неправильными

[sergey]

AlexRas: если подключаете правильно, то все будет ок, можете вообще эти картинки себе забросить в папку image, и уже оттуда к ним прописывать пути

[AlexRas]

SM: то есть нужно править файлы библиотеки в любом случае?

[sergey]

AlexRas: Вот к примеру подключение фансибокс, и что то тут не видно никаких картинок fancyapps.com/fancybox

[sergey]

AlexRas: зачем?

[sergey]

AlexRas: вы у себя в своих стилях можете править что угодно, в библиотеках ничего

[AlexRas]

SM: Чтобы исправить пути к картинкам вместо 'fancybox_sprite.png' написать '../image/fancybox_sprite.png'

[sergey]

AlexRas: да, но пишите это в своем main.css, а не в библиотеке

[AlexRas]

SM: Спасибо) Я не знаю как я до этого не смог додуматься)