Gulp fails with bootstrap – common issues

gulp fails with bootstrap

Overview

I’m stil trying to understand how to build my front-end pipeline with gulp. I have set up this on Ubuntu and with ASP.NET Core. I try tspecifico follow up KISS principle, so going step by step. I was finally able to include specific bootstrap file into the app, but I had many different issues. This post will summarize why your gulp fails with bootstrap.
P.S. I’m using gulp-debug to be able to find root cause.

Starting point

var gulp = require('gulp');
var gutil = require('gulp-util');
var mainBowerFiles = require('gulp-main-bower-files');
var gulpDebug = require('gulp-debug');
var inject = require('gulp-inject');

var publishFolder = 'public';

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

gulp.task('publish', ['default'], function() {  
  gulp.src('./bower.json')
  //copies all main bower files (only bootstrap) to output folder
    .pipe(mainBowerFiles())
    .pipe(gulpDebug())
    .pipe(gulp.dest(publishFolder));   

  //defines that I'm looking for css files
  var sources = gulp.src('**/*.css')
    .pipe(gulpDebug({title:'d'}));
 
  // copy any html files in source/ to public/
  gutil.log('moving index.html file and auto-include');
  gulp.src('index.html')
  //injects these files into html
    .pipe(inject(sources))
    .pipe(gulp.dest(publishFolder));
});

This injects all main bower files that can be found into html. So gulp-inject works. However it’s not the result that I want to have. My goal is to have only bootstrap.css there. No js or less.
If we take a look on gulp-debug:

mogluszka@mogluszkaW540:~/Sources/shout/src/web$ gulp publish
[00:38:53] Using gulpfile ~/Sources/shout/src/web/gulpfile.js
[00:38:53] Starting 'default'...
[00:38:53] gulp started
[00:38:53] Finished 'default' after 1.34 ms
[00:38:53] Starting 'publish'...
[00:38:53] moving index.html file and auto-include
[00:38:53] Finished 'publish' after 15 ms
[00:38:53] gulp-debug: bower_components/jquery/dist/jquery.js
[00:38:53] gulp-debug: bower_components/bootstrap/less/bootstrap.less
[00:38:53] gulp-debug: bower_components/bootstrap/dist/js/bootstrap.js
[00:38:53] gulp-debug: 3 items
[00:38:53] d bower_components/bootstrap/dist/css/bootstrap-theme.css
[00:38:53] d bower_components/bootstrap/dist/css/bootstrap-theme.min.css
[00:38:53] d bower_components/bootstrap/dist/css/bootstrap.css
[00:38:53] d bower_components/bootstrap/dist/css/bootstrap.min.css
[00:38:53] d node_modules/gulp-bower-files/test/fixtures/multi/multi.css
[00:38:53] d node_modules/main-bower-files/test/fixtures/multi/multi.css
[00:38:53] d node_modules/globule/test/fixtures/expand/css/baz.css
[00:38:53] d node_modules/globule/test/fixtures/expand/css/qux.css
[00:38:53] d node_modules/gulp-main-bower-files/test/no-bowerrc/bower_components/multi/multi.css
[00:38:53] d node_modules/gulp-main-bower-files/test/with-bowerrc/bower/multi/multi.css
[00:38:53] d 10 items
[00:38:53] gulp-inject 10 files into index.html.

output file:

 
 <!-- inject:css -->
 <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.css">
 <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
 <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
 <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
 <link rel="stylesheet" href="/public/bootstrap/dist/css/bootstrap.css">
 <link rel="stylesheet" href="/node_modules/gulp-bower-files/test/fixtures/multi/multi.css">
 <link rel="stylesheet" href="/node_modules/main-bower-files/test/fixtures/multi/multi.css">
 <link rel="stylesheet" href="/node_modules/globule/test/fixtures/expand/css/baz.css">
 <link rel="stylesheet" href="/node_modules/globule/test/fixtures/expand/css/qux.css">
 <link rel="stylesheet" href="/node_modules/gulp-main-bower-files/test/no-bowerrc/bower_components/multi/multi.css">
 <link rel="stylesheet" href="/node_modules/gulp-main-bower-files/test/with-bowerrc/bower/multi/multi.css">
 <!-- endinject -->
    

and actual files in output directory:

mogluszka@mogluszkaW540:~/Sources/shout/src/web$ tree public/
public/
├── bootstrap
│   ├── dist
│   │   └── js
│   │       └── bootstrap.js
│   └── less
│       └── bootstrap.less
├── index.html
└── jquery
    └── dist
        └── jquery.js

this is extremely wrong.

  • in output I have only js & less files
  • I’m referencing not existing files in output

Gulp fails with bootstrap…because

You should inject only files from output

 var sources = gulp.src('**/*.css', { read: false, cwd: __dirname + '/public'} )

Read false is only optimization

Task dependency – don’t forget about return

Tasks in gulp are asynchronous, this means that what I wrote before will work after a second try… 🙂
Take a look on the blog below: Synchronous tasks with gulp
Just keep in mind to use return in your tasks. If you won’t your task dependency won’t work.

Solution

Gulpfile

var gulp = require('gulp');
var gutil = require('gulp-util');
var mainBowerFiles = require('gulp-main-bower-files');
var gulpDebug = require('gulp-debug');
var inject = require('gulp-inject');

var publishFolder = 'public';

gulp.task('bower', function() {  
  return gulp.src('./bower.json')
    .pipe(mainBowerFiles())
    .pipe(gulpDebug({title:'mainbowerfiles'}))
    .pipe(gulp.dest(publishFolder));
});

gulp.task('injectcss', ['bower'], function() {

  var sources = gulp.src('**/*.css', { read: false, cwd: __dirname + '/public'} )
    .pipe(gulpDebug({title:'src'}));
 
  // copy any html files in source/ to public/
  gutil.log('moving index.html file and auto-include');
  return gulp.src('index.html')
    .pipe(inject(sources))
    .pipe(gulp.dest(publishFolder));
});

gulp.task('publish', ['bower','injectcss'], function() {
    gutil.log('publish started');
    return;
})

Output

mogluszka@mogluszkaW540:~/Sources/shout/src/web$ gulp injectcss
[22:01:09] Using gulpfile ~/Sources/shout/src/web/gulpfile.js
[22:01:09] Starting 'bower'...
[22:01:09] mainbowerfiles bower_components/jquery/dist/jquery.js
[22:01:09] mainbowerfiles bower_components/bootstrap/dist/css/bootstrap.css
[22:01:09] mainbowerfiles 2 items
[22:01:09] Finished 'bower' after 199 ms
[22:01:09] Starting 'injectcss'...
[22:01:09] moving index.html file and auto-include
[22:01:09] src public/bootstrap/dist/css/bootstrap.css
[22:01:09] src 1 item
[22:01:09] gulp-inject 1 files into index.html.
[22:01:09] Finished 'injectcss' after 56 ms
mogluszka@mogluszkaW540:~/Sources/shout/src/web$ tree public
public
├── bootstrap
│   └── dist
│       └── css
│           └── bootstrap.css
├── index.html
└── jquery
    └── dist
        └── jquery.js

One thought on “Gulp fails with bootstrap – common issues

Leave a Reply

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