2015-09-13 3 views
1

У меня возникли проблемы с этим полезным инструментом, и я не знаю, что делать дальше, поэтому я пришел сюда, чтобы попросить о вашей помощи.gulp-inject дает неправильный относительный путь

Это моя структура каталогов:

- Project root 
|- dist 
    |-css 
    |-js 

|- source 
    |- css 
    |- js 
    |-index.html 

|-gulpfile.js 
|-index.html 

Итак, я использую глотка, чтобы ввести мой CSS, JS из исходной папки, в мой DIST папку, уменьшенная, сцепляются и т.д. Затем, инъекционные, что в мой index.html в исходной папке и плюнуть в корневую папку проекта. Это код:

//Injects assets (css,js) into index.html automatically 
gulp.task('inject',['sass','concat-css','concat-js'],function(){ 
    //Target to inject 
    var target = gulp.src('source/index.html'); 


    //Sources to be injected 

    var cssFiles = gulp.src('./dist/assets/css/*.css',{read:false}); 
    var jsFiles = gulp.src('./dist/assets/js/*.js',{read:false}); 
    //Merge resources into one 
    var sources = es.merge(cssFiles,jsFiles); 


    //Injecting bower.json dependencies and other resources 

    return target.pipe(inject(sources),{ 
     ignorePath:'dist/', 
     addRootSlash:false 
    }) 
     .pipe(wiredep({ignorePath:'../'})) 
     .pipe(gulp.dest('./')); 

    }); 

Вопрос заключается в том, что путь к папке DIST на index.html, как это:

"/dist/css/stylesheet.css" 

Причинение ошибку, потому что он должен быть: `" расстояние /css/stylesheet.css "

Как вы можете видеть в коде, я использовал параметры ввода, ignorePath, addRootSlash, relative: true и ничего не работает. То же самое происходило с wiredep, но этот принимает параметры ignorePath, поэтому все в порядке.

Заранее за вашу помощь.

+1

У меня такая же проблема. При удаче? – dmr07

+0

@ danm07 К сожалению, нет, я заканчиваю hardcoding ссылку на источник html, потому что это никак не изменится. В папке dist всегда будет файл stylesheet.css, поэтому я жестко запрограммировал эту суку и ушел с этой проблемой. Я закончил тем, что использовал wiredep вместо gulp-inject btw. – user2430929

ответ

6

Похоже, вы ошибочно положили опции inject в качестве второго параметра функции pipe. Попробуйте:

target.pipe(inject(sources, { ignorePath: 'dist/', addRootSlash: false })) 
+2

Вы не имеете в виду 'target.pipe (inject (sources, {ignorePath: 'dist /', addRootSlash: false}))'? –

+0

Да, отсутствовала конечная скобка, хороший глаз –

1

Вы должны установить относительную опцию в впрыснуть так:

inject(sources, { relative: true }) 
1

вы можете использовать два параметра спосо глотком инъецировать: ignorePath и addRootSlash

var injectOptions = { 
    addRootSlash: false, 
    ignorePath: 'dist/' 
}; 
target.pipe(inject(sources),injectOptions) 
0

Я знаю, это старый. Но для всех с той же проблемой, как в моем случае.

Установка

var options = { 
    relative: false, 
    addRootSlash: false, 
    ignorePath: 'dist/', 
    addPrefix: './js' 
}; 
return gulp.src(['./index.html']) 
    .pipe(inject(stream, options)) 
    .pipe(gulp.dest('temp/')); 

делает трюк для меня. Мне пришлось удалить путь, установив «ignorePath», а затем «removeRootSlash» и «addPrefix» для целевой папки.

См. Раздел «Дополнительные примеры» в разделе npm gulp-inject и номер addPrefix.

Смежные вопросы