Using gulp-compass and gulp-postcss has been quite a challenge for me. I have been struggling to find the most efficient way to locate CSS files and their dependencies within the public folder, specifically in webroot/css using gulp. Below is an excerpt from my partial gulpfile.js:
var postcss = require('gulp-postcss');
var cssnano = require('cssnano');
var atImport = require('postcss-import');
var vendorCssPath =
[
path.join(app_root,'/bower_components/material-design-icons/iconfont/material-icons.css')
];
gulp.task('css', function () {
var processors = [
atImport(),
cssnano()
];
return gulp.src(vendorCssPath)
.pipe(cache('css'))
.pipe(postcss(processors))
.pipe(gulp.dest(path.join(projectDir,'/css')));
});
While this setup works fine for material-icons.css, it fails to include the dependent files such as MaterialIcons-Regular.eot, MaterialIcons-Regular.svg, MaterialIcons-Regular.woff, MaterialIcons-Regular.ijmap, MaterialIcons-Regular.ttf, and MaterialIcons-Regular.woff2. I am looking for a way to move these assets to the public folder using gulp. Ideally, I would also like to bundle these files along with the compiled CSS file generated by gulp-compass into a single CSS file if possible.
If you have any suggestions or solutions, please feel free to share them. I appreciate any help!