I’m currently using both Bower and Gulp in a Laravel project to manage front end dependencies. I’m downloading all bower dependencies on a private assets folder using Bower and then pushing them to a public folder using Gulp.
Here’s my gulpfile.js
var gulp = require('gulp');
var flatten = require('gulp-flatten');
var sass = require('gulp-ruby-sass');
gulp.task('fonts', function () {
return gulp.src('app/assets/vendor/**/*.{ttf,woff,eof,svg}')
.pipe(flatten())
.pipe(gulp.dest('.tmp/fonts'))
.pipe(gulp.dest('public/fonts'));
});
gulp.task('css', function () {
return gulp.src('assets/vendor/open-sans-fontface/open-sans.scss')
.pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest('public/css'));
});
gulp.task('default', function(){
gulp.run('fonts');
gulp.run('css');
});
As you can see, I’m using gulp-flatten to move all font files to the root of /public/fonts Now, the issue that I’m facing is that the font paths in the CSS file generated using gulp-ruby-sass are not correct. How can I fix this?