Gulp + Sass + Compass + Bootstrap

I’m learning how to use Gulp and I already have experience with the other tools listed. However I can’t figure out an effective way to set them up in Gulp.

I’ve successfully created a task for Compass. This is basically taken directly from their instructions and seems to work:

gulp.task('compass', function() {
    return gulp.src('./app/sass/style.scss')
        .pipe(compass({
            config_file: 'config.rb',
            css: 'dist/css',
            sass: 'app/sass'
        }))
        .pipe(gulp.dest(config.publicDir + '/css'));
});

I’ve also successfully created a task for Bootstrap Sass, which uses Bower. It retrieves Bootstrap installed through Bower:

gulp.task('css', function() {
    return gulp.src('./app/sass/style.scss')
        .pipe(sass({
            includePaths: [config.bootstrapDir + '/assets/stylesheets'],
        }))
        .pipe(gulp.dest(config.publicDir + '/css'));
});

I want the functionality of using Compass and Bootstrap together. Now that I write about it, I wonder if installing Compass through Bower instead would make things easier. I suspect there are multiple ways to do this.

This however does not work:

gulp.task('default', gulp.series('compass', 'css'));

My style.scss is importing Bootstrap @import 'bootstrap'. When the Compass task runs, it can not find Bootstrap. However, as stated if I just run the CSS task, it loads Bootstrap fine. The problem may be at the level of my logic or missing a detail. In a way I think I want to load the Bootstrap styles from Bower and then pass them through the Compass task.

Suggestions?

To start with, is there any reason why you’re using bower over npm? If you’re using gulp I’d recommend npm instead.

What error do you get? Is it related to css running before compass is complete?

I’m fairly new to this as well but maybe css should be made dependent on compass like this:

gulp.task('css', ['compass'], function() { // ...

My solution is this:

style.scss

@import ‘…/…/bower_components/bootstrap-sass/assets/stylesheets/_bootstrap’;
@import ‘…/…/bower_components/bootstrap-sass/assets/stylesheets/_bootstrap-compass’;

Why am I using Bower? I’m also new to some of this and to my understanding Bower is a package manager intended for this purpose. Considering how (too) rapid developments are in this field, I haven’t gotten the impression I should not use Bower. I presumed it was a commonplace tool. I am not aware of reasons for or against using NPM to manage my packages. I’m open to hearing advice on that.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.