coffeescript - How to compile bootstrap-sass with gulp? -

coffeescript - How to compile bootstrap-sass with gulp? -

i've problems adding bootstrap node project. installed bootstrap-sass-official via bower added gulp task compiling bootstrap.

i ran task compiles bootstrap straight console , finished successfully. 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'] }

have thought how solve problem ?

instead of using gulp include **/*.scss bootstrap-sass, create scss file "imports" bootstrap-sass files via @import statements.

it's of import way, because there's order in bootstrap-sass files need included, , can command order using @import statements.

for example, here's illustration of how this. notice app.scss single file includes else; app.scss becomes thing gulp needs process.

then gulp command this:

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

fwiw, gulp task utilize process scss styles:scss task here.

coffeescript bootstrap-sass gulp-sass