Проблема с путями при сборке фронта (Gulp.js): как решить?

Question

[Артём Иннокентьев]

Структура такая:

static
├── build
│   ├── css
│   ├── fonts
│   ├── img
│   └── js
└── src
    ├── blocks
    ├── fonts
    └── img

Кусок gulpfile.js:

var path = {
        build: {
            js: 'static/build/js',
            css: 'static/build/css',
            fonts: 'static/build/fonts',
            img: 'static/build/img'

        },
        src: {
            vendor_fonts: ['bower_components/**/*.{svg,woff,eot,ttf}', 'semantic/**/*.{svg,woff,eot,ttf}'],
            vendor_img: ['bower_components/**/*.{png,jpg,jpeg,gif}', 'semantic/**/*.{png,jpg,jpeg,gif}']

        }
};

gulp.task('vendor:img', function(){
    return gulp.src(path.src.vendor_img)
        .pipe(imagemin({
            progressive: true,
            interlaced: true,
            use: [pngguant()]
        }))
        .pipe(gulp.dest(path.build.img))
});

gulp.task('vendor:fonts', function() {
    gulp.src(path.src.vendor_fonts)
        .pipe(gulp.dest(path.build.fonts))
});

При сборке сторонних пакетов (к примеру, fotorama или semantic ui) у них прописаны относительные пути - как итог, в main.css попадают относительные пути и сервер их не находит.

Что можно сделать?

P.S. Костыль с копированием файлов в build - плохое решение.

Answer 1

[ChickenGrinder]

1. Паттерн в src делится на две части base + relative (base - это все что до звездочек, relative - остальное)
2. Итоговый путь в dest записывается как relative
3. base можно изменить указавать опцию base в src() (gulp.src('a/**/b', {base: '.'}))
Исходя из этих пунктов - установить правильный паттерн или установите нужную опцию base.

Если у вас проблема в путях к шрифтам (картинкам) в итоговом css вместо url('images/etc') надо url('../images/etc), то здесь нужно искать gulp плагин по запросу "rebase" (либо postcss plugin)

Comments

[Павел Коковин]

Огромное спасибище! Всё не мог понять как это работает :) Если не трудно, объясни еще пожалуйста как cwd в dest работает :) А то возможно я костыляю у себя в проекте по жесткому

Answer 2

[abberati]

Прежде чем говнокодить в gulp

Ответ на ваш вопрос в третьем уроке - потоки vynil fs.

Comments

[Артём Иннокентьев]

не думаю, что vynif fs могут помочь мне переписать относительные пути к изображения либо шрифтам

[abberati]

Артём Иннокентьев: это не относительные пути, это синтаксис модуля minimatch, который используется в gulp для работы с файловой системой vynil fs. урок не посмотрели ведь, не так ли?

Answer 3

[Владимир Кашутин]

var rename = require("gulp-rename")
gulp.task('vendor:img', function(){
    return gulp.src(path.src.vendor_img)
    .pipe(imagemin({
        progressive: true,
        interlaced: true,
        use: [pngguant()]
    }))
    .pipe(rename(function (path){
       path.dirname = 'build/'
    }))
    .pipe(gulp.dest(path.build.img))
});

Comments

[Артём Иннокентьев]

благодарю, но уже давно перешел на webpack и вам советую)