CODEWITHSUNDEEP
twitter-bootstrapsassgulpgulp-sassjspm
John Manko
John Manko

Reputation: 1908

How to build bootstrap using jspm and bootstrap-sass

I'm just starting to dig into SASS, and trying to figure out how to build bootstrap from the bootstrap-sass module installed with jspm as a "dev dependency" - which I'm not sure is correct.

I installed sass from ruby gems. Since I'm using jspm, do I need to install gulp and create a gulp task, or should jspm take care of everything for me?

If gulp is required, how would that work with jspm package management?

I must admit, all of these crossovers are a little confusing. :)

UPDATE: Following steps

I removed the JSPM version of bootstrap-sass (because running the gulp task resulted in errors about bootstrap-mincer missing), and instead installed from npm:

npm install bootstrap-sass --save-dev

Since I still need the bootstrap javascript, I installed via JSPM:

jspm install bootstrap

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

var SASS_PATH = "./node_modules/bootstrap-sass/assets/stylesheets/**/*.scss";

gulp.task('sass', function () {
  return gulp.src(SASS_PATH)
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/styles/'));
});

gulp.task('sass:watch', function () {
  gulp.watch(SASS_PATH, ['sass']);
});

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

Running tasks doesn't produce any output into ./public/styles:

$ gulp sass
[18:52:30] Using gulpfile ~/path_to_project/gulpfile.js
[18:52:30] Starting 'sass'...
[18:52:30] Finished 'sass' after 37 ms

If I can get the gulp tasks to work, then I could load bootstrap.js from JSPM's System.js, and load the css independently.

Upvotes: 0

Views: 1348

Answers (2)

Kim T
Kim T

Reputation: 6436

I would run npm commands for installing build tools:

npm install jspm --save-dev
npm install gulp --save-dev
npm install gulp-sass --save-dev

Then jspm commands for installing dependancies:

jspm install bootstrap-sass

Then in your gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./src/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'));
});

gulp.task('watch', function () {
    gulp.watch('./src/**/*.scss', ['sass']);
});

gulp.task('default', ['sass', 'watch']);

In your all.scss:

// shared across all components
$icon-font-path: "../../jspm_packages/github/twbs/[email protected]/assets/fonts/bootstrap/";
@import "../../jspm_packages/github/twbs/[email protected]/assets/stylesheets/bootstrap-sprockets";
@import "../../jspm_packages/github/twbs/[email protected]/assets/stylesheets/bootstrap";

// components
@import './header/header';

Then run your gulp task:

gulp

Upvotes: 0

Nicolas Pennec
Nicolas Pennec

Reputation: 7631

Gulp should be install from NPM because it's a build task.

Ruby is not mandatory. Instead of ruby sass, you can now use node-sass :
https://npmjs.org/package/node-sas

npm install node-sass --save-dev

and use the gulp sass task :
https://github.com/dlmanning/gulp-sass

npm install gulp --save-dev
npm install gulp-sass --save-dev

(please note that the gulp-sass node module already include the node-sass node module as dependency, so install node-sass is not necessary)

then add the sass task in your gulpfile:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

Upvotes: 1

Related Questions