如何用gulp编译bootstrap-sass？

Question

我将自举添加到我的节点项目时遇到了一些问题。 我通过bower安装了bootstrap-sass-official，然后我添加了gulp任务来编译bootstrap。

我跑了一个任务，它直接从控制台编译bootstrap并成功完成。 我gulpfile.coffee

gulp = require 'gulp' 
$ = (require 'gulp-load-plugins')() 
livereload = require 'gulp-livereload' 
nodemon = require 'gulp-nodemon' 
concat = require 'gulp-concat' 
express = require 'express' 
path = require 'path' 
sass = require 'gulp-ruby-sass' 
app = express() 

gulp.task 'bootstrap-sass', => 
    gulp.src './bower_components/bootstrap-sass-official/assets/stylesheets/**/*.scss' 
    .pipe $.plumber() 
    .pipe $.sass({ 
    outputStyle: 'compressed' 
    sourceComments: 'map' 
    includePaths : ['./bower_components/bootstrap-sass-official/assets/stylesheets'] 
    }) 
    .on 'error', (err) => 
    console.log err 
    .pipe gulp.dest 'dist/stylesheets/bootstrap' 


gulp.task 'compass', => 
    gulp.src './src/stylesheets/*.sass' 
    .pipe $.plumber() 
    .pipe $.compass { 
    css: 'dist/stylesheets' 
    sass: 'src/stylesheets' 
    } 
    .pipe gulp.dest 'dist/stylesheets' 
# .pipe livereload() 


gulp.task 'coffee', => 
    gulp.src 'src/scripts/main.coffee', {read: false} 
    .pipe $.plumber() 
    .pipe $.browserify { 
    debug: true 
    insertGlobals: false 
    transform: ['coffeeify'] 
    extensions: ['.coffee'] 
    } 
    .pipe $.rename 'app.js' 
    .pipe gulp.dest 'dist/scripts' 
    .pipe livereload() 


gulp.task 'images', => 
    gulp.src './src/images/**/*' 
    .pipe gulp.dest './dist/images/' 
    .pipe livereload() 

gulp.task 'templates', => 
    gulp.src 'src/*.jade' 
    .pipe $.plumber() 
    .pipe $.jade { 
    pretty: true 
    } 
    .pipe gulp.dest 'dist/' 
    .pipe livereload() 

gulp.task 'express', => 
    app.use express.static(path.resolve './dist') 
    app.listen 1337 
    $.util.log 'Listening on port: 1337' 

gulp.task 'watch', => 
    livereload.listen() 
    gulp.watch 'src/stylesheets/*.sass', ['compass'] 
    gulp.watch 'src/scripts/*.coffee', ['coffee'] 
    gulp.watch 'src/*.jade', ['templates'] 
    gulp.watch './src/images/**/*', ['images'] 
    $.notify {message: "Reload"} 


gulp.task 'default', ['images', 'watch', 'express', 'demon'] 
gulp.task 'demon', => 
    nodemon { 
    script: 'dist/scripts/app.js' 
    env: {'NODE_ENV': 'development'} 
    nodeArgs: ['--debug=9999'] 
    } 

有你一些想法如何解决这个问题呢？

Answer 1

而不是使用gulp从bootstrap-sass包括**/*.scss，创建一个SCSS文件，该文件通过@import语句“导入”bootstrap-sass文件。

这样做很重要，因为实际上需要包含bootstrap-sass文件的订单，并且您可以使用@import语句控制该订单。

例如，here's如何做到这一点的一个例子。请注意0​​是包含其他所有内容的单个文件; app.scss成为Gulp需要处理的唯一事情。

然后你一口命令这样做：

gulp.src './app.scss' 
    .pipe blah blah sass stuff 
    .pipe gulp.dest 'dist/stylesheets/' 

FWIW，是我用来处理SCSS是styles:scss任务here的咕嘟咕嘟任务。