如何使用 jspm 和 bootstrap-sass 构建引导程序

Question

我刚刚开始深入研究 SASS，并试图弄清楚如何从安装了 jspm 的 bootstrap-sass 模块构建 bootstrap 作为“开发依赖项” - 我不确定这是否正确.

我从 ruby​​ gems 安装了sass。由于我使用的是 jspm，我需要安装gulp 并创建一个 gulp 任务，还是应该 jspm 为我处理所有事情？

如果需要 gulp，它如何与 jspm 包管理一起使用？

我必须承认，所有这些交叉点都有点令人困惑。 :)

更新： 以下步骤

我删除了 bootstrap-sass 的 JSPM 版本（因为运行 gulp 任务导致缺少有关 bootstrap-mincer 的错误），而是从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

如果我可以让 gulp 任务工作，那么我可以从 JSPM 的 System.js 加载 bootstrap.js，并独立加载 css。

Answer 1

Gulp 应该从 NPM 安装，因为它是一个构建任务。

Ruby 不是强制性的。您现在可以使用 node-sass 代替 ruby 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）

然后在您的gulpfile 中添加sass 任务：

'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 命令来安装构建工具：

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 任务：

gulp