Как построить бутстрап с помощью jspm и bootstrap-sass

Question

Я только начинаю копаться в SASS и пытаюсь выяснить, как построить bootstrap из модуля bootstrap-sass, установленного с jspm в качестве «зависимости от разработчиков», - что я не уверен, что это правильно.

Я установил sass из рубиновых драгоценных камней. Поскольку я использую jspm, мне нужно установить gulp и создать задачу gulp, или нужно jspm заботиться обо всем для меня?

Если требуется gulp, как это будет работать с управлением пакетами jspm?

Должен признаться, все эти кроссоверы немного запутываются. :)

UPDATE: Следующих шаги

я удалил версию JSPM бутстраповской-дерзости (потому что на выполнении задачи глотка привело к ошибкам о самозагрузке-мясорубке отсутствует), и вместо того, чтобы установить с npm:

npm install bootstrap-sass --save-dev

Поскольку я все еще нуждаются в начальной загрузки JavaScript, я установил с помощью 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 
}); 

Запуск задач не производит никакой продукции в ./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 

Если я могу получить задачи глотка работать, то я мог бы загружать bootstrap.js из JSPM's System.js и загружать css самостоятельно.

Answer 1

Gulp должен быть установлен из NPM, потому что это задача сборки.

Ruby не является обязательным.Вместо ruby sass, теперь вы можете использовать node-sass:
https://npmjs.org/package/node-sas

npm install node-sass --save-dev 

и использовать gulp sass задачи:
https://github.com/dlmanning/gulp-sass

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

(обратите внимание, что модуль gulp-sass узла уже включает в себя модуль в node-sass узле в качестве зависимости, поэтому установить node-sass не нужно)

затем добавить sass задачи в вашем 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']); 
}); 

Answer 2

Я бы запустить НПЕ команды для установки инструментов сборки:

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

Затем JSPM команд для устанавливающих зависимостей:

jspm install bootstrap-sass 

Затем в вашем 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']); 

В вашем all.scss:

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

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

Затем запустите глотком задачу:

gulp