Bower Components out of web

Firts of all, thanks to the author of the entire Gulp course!) It was exactly that I was looking for) <b><3</b>

After many tries to avoid errors such as
<i>Cannot read property 'denominator' of undefined in file .../bootstrap/dist/css/bootstrap.css line no.</i>

For those who have some difficulties with merging sass/less and css files - as alternative way you can just install <i>bootstrap (jquery, popper and else) with npm</i>, then use <i>merge2</i> to concat everything :)

<b>my versions:</b>
npm 6.14.2
gulp

 CLI version: 2.2.0
 Local version: 4.0.2

bootstrap 4.4.1

<b>gulpfile.js</b>

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const merge = require('merge2');
const environments = require('gulp-environments');
const plugins = require('gulp-load-plugins')();

let dev = environments.development;
let prod = environments.production;

gulp.task('styles', function () {
    var cssFiles = gulp.src(["node_modules/bootstrap/dist/css/bootstrap.css"])
        .pipe(plugins.concat("css-files.css"));

    var lessCssFiles = gulp.src(config.assetsPath + config.lessPattern)
        // Plumber prevents gulp from throwing a proper error exit code. When building for production, you may want a proper error.
        .pipe(dev(plugins.plumber(function(error) {
             console.log(error.toString());
             this.emit('end');
        })))
        .pipe(dev(plugins.sourcemaps.init()))
        .pipe(plugins.less())
        .pipe(plugins.concat("less-files.css"));

    return merge(cssFiles, lessCssFiles)
        .pipe(plugins.concat('main.css'))
        .pipe(prod(cleanCSS()))
        .pipe(dev(plugins.sourcemaps.write('./maps')))
        .pipe(gulp.dest('public/build/css'));
});

Hey Alina,

Thank you for this tip! :) And thanks for kind words about this course. Btw, in case you're interested in Frontend stuff - we have a few more courses for you:
https://symfonycasts.com/sc...
https://symfonycasts.com/sc...

We used Gulf before for SymfonyCasts website assets, but then switched to Webpack Encore :)

Cheers!

Victor, thank you for the recommendations! I'll definitely use it in future)
So pity that I didn't find that Webpack Encore course earlier(( I started to use it for my project but found that it wasn't understood as easy as Gulp for me. As I'm a backend developer on 80-90%, I decided just to use Gulp this time in the name of speed =)

Hey Alina,

Ah, I see :) Yes, Gulp is a great tool for the purposes it's designed too. But Webpack is just another level, and yes, Webpack Encore was designed right for backend developers ;) I hope after our course it should be pretty clear for you! If not- just ask questions in comments below a video you didn't get ;)

Cheers!

Hi,
After add the instruction config.bowerDir+'/bootstrap/dist/css/bootstrap.css' I have an error when I start gulp. In the terminal, there is this error : Error: ENOENT: no such file or directory, open '/home/stephane/www/gulp/app/Resources/assets/sass/bootstrap.css.map'
You know how I can correct this ? Thank.

Hey Stéphane!

Hmm, I'm not sure about this - I can't repeat it locally. However, it's very likely that some change to some newer version of a library (probably sourcemaps related) is causing this issue. If you turn sourcemaps off, does the issue go away? Does everything work if you point to the bootstrap.css file that lives in the web directory (i.e. before the steps in this chapter)?

Cheers!

Hello Stéphane,

I've been having the same problem you've got. While looking at the error stack trace, it was mentioning it's coming from clean-css plugin.
I guess that, like me, you followed the suggestion of not using gulp-minify-css plugin because of deprecation and to use gulp-clean-css instead...
The only workaround I've currently found was to produce two different minified css: one for everything's coming from vendor/bower_components (bootstrap en fontawesome) that I named vendor.css and one for everything's coming from app/Resources/assets that I named main.css:
gulp.task('styles', function() {
var pipeline = new Pipeline();

pipeline.add([
config.bowerDir+'/bootstrap/dist/css/bootstrap.css',
config.bowerDir+'/fontawesome/css/font-awesome.css'
], 'vendor.css');

pipeline.add([
config.assetsDir+'/sass/base.scss'
], 'main.css');

return pipeline.run(app.addStyle);
});

It's not the ideal solution, but at least it's not failing anymore :)

Kind regards,

Paul-André

Thanks for sharing Paul-André - and sorry about the issue! There is definitely some problem here - but I also haven't been able to nail it down yet.

Hi Paul-André,
Thank you for your solution.