Bower and Bootstrap with Gulp… Failed

bootstrap components and bower with gulp

Overview

In latest posts I have set up Front-end build pipeline with Gulp for my Web page with microservice hosted on Express. Now it’s time to address one nasty thing – hardcoded css files. This post is a description of failure of setting up bower and bootstrap with gulp.

Current Gulp file

var gulp = require('gulp');
var gutil = require('gulp-util');

gulp.task('default', function() {
  // place code for your default task here
  gutil.log('gulp started')  
});

gulp.task('copyHtmlandCSS', ['default'], function(copyHtml) {
   
  // copy any html files in source/ to public/
  gutil.log('copying html files');
  gulp.src('*.html').pipe(gulp.dest('dist'));
  gutil.log('copying css')
  //that's nasty
  gulp.src('bower_components/bootstrap/dist/css/bootstrap.min.css').pipe(gulp.dest('dist/css'));
});

As you can see I’m copying hardcoded min file from bootstrap to distribution folder. There are two issues around it:

  • It’s not scaling, I need to add more here to add any potential new css files
  • this is only minified css, it will be difficult to work with it during development

Bower and bootstrap with Gulp

There are different ways to handle such a case, but there are packages ready to use for you to make your life easier. Just which one to choose? I have found:

I love JS world because of such things! So many choices…

and I haven’t made it working! None of these. I have tried all google sites, official documentation. Nothing.

In most of the approaches the result was that the destination file hasn’t been created.

What worked… no plugin

gulp.task('publish', function() {
    return gulp.src('bower_components/**/*.css')
    .pipe(gulp.dest('public'));
});

Result

└── public
    └── bootstrap
        └── dist
            └── css
                ├── bootstrap.css
                ├── bootstrap.min.css
                ├── bootstrap-theme.css
                └── bootstrap-theme.min.css

That’s almost what I should have there. However I’d like to have… only one file for dev or prod (min vs notmin).
In this, these plugins should help me but non of them compiled, or produced results.

Update

Solution to the issue can be found here: Debuging Gulp

Leave a Reply

Your email address will not be published. Required fields are marked *