Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Gulp Basics Improving your Gulp Task Pipelines Putting Multiple Tasks Together

Posted by Hemant Torsekar
Hemant Torsekar
318 Points

How do I compile Bootstrap and add it into my project using Gulp/Bower?

I'm working in a project that will use Angular and requires Bootstrap as its base. I'm having a hard time figuring out how to get Bootstrap to style my application as a base, and then additional styles I'd be adding to make a theme for my project using my own Sass.

How would I add Bootstrap 3 and incorporate it into my project with Gulp?

2 Answers

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Without seeing your entire setup, I'd guess you would concatenate the CSS and JS files, with the Bootstrap CSS coming before your own (but after you've compiled the Sass), and the JS coming after jQuery (which both Bootstrap and Angular require). Then you could minify both the CSS and the JS.

If you upload all your files as a Workspace and share a Snapshot of it, I can probably be more specific.

Mark Johnson
Mark Johnson
7,171 Points
Mark Johnson
Mark Johnson
7,171 Points

so i have a the following directory structure. I want the src directory to be the working directory but gulp will push all of it into the dist directory which will be to upload to live web server.

~node_modules ~src

~~~js
~~~~~main.js 
~~~scss
~~~~~main.scss 

~gulpfile.js
~package.json

I want to be able to modify this gulpfile to accomodate for bootstraps Scss.

bootstrap js, popper.js and jquery.js i dont think i need those to be compiled into one but it would be nice to know how to impliment it as well.

Anything with bootstrap i want to have scss be converted to bootstrap.css (separate from all my other css), same for all js files for bootstrap. 


Below is my attempt at the bootstrap scss but it fails so i dont have the js files in it.

********************

'use strict';
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var del = require('del');
var maps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();

gulp.task("concatScripts", function () {
    return gulp.src([
            'src/js/main.js'
        ])
        .pipe(maps.init())
        .pipe(concat('app.js'))
        .pipe(maps.write('./'))
        .pipe(gulp.dest('src/js'));
});

gulp.task("minifyScripts", ['concatScripts'], function () {
    return gulp.src("js/app.js")
        .pipe(uglify())
        .pipe(rename('app.min.js'))
        .pipe(gulp.dest('src/js'));
});

gulp.task("compileBootstrapSass", function () {
    return gulp.src("node_modules/bootstrap/scss/bootstrap.scss")
        .pipe(sass())
        .pipe(gulp.dest('src/css'));
});

gulp.task("compileSass", function () {
    return gulp.src("src/scss/main.scss")
        .pipe(maps.init())
        .pipe(sass())
        .pipe(maps.write('./'))
        .pipe(gulp.dest('src/css'));
});

gulp.task("watchFiles", function () {
    gulp.watch('src/scss/**/*.scss', ['compileSass'], gulp.series('sass'));
    gulp.watch('src/js/main.js', ['concatScripts']);
    gulp.watch("src/*.html").on('change', browserSync.reload);
});

gulp.task("clean", function () {
    del(['dist', 'src/css/bootstrap.css*', 'src/css/main.css*', 'src/js/app.js']);
});


gulp.task("build", ['minifyScripts', 'compileSass'], function () {
    return gulp.src([
            "src/css/bootstrap.css",
            "src/css/main.css",
            "src/js/app.min.js",
            "index.html",
            "src/images/**"
        ], {
            base: './'
        })
        .pipe(gulp.dest('dist'));
});

gulp.task('serve', ['watchFiles']);

gulp.task("default", ["clean"], function () {
    gulp.setMaxListeners('build');
});