How do I compile bootstrap-sass using gulp?
I am having trouble adding bootstrap to my node project. I installed bootstrap-sass-official via bower, then I added a gulp task to compile the boot file.
I ran a task that compiles the bootstrap directly from the console and it completed successfully. My 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']
}
Do you have any idea how to solve this problem?
source to share
Instead of using gulp to include **/*.scss
from, bootstrap-sass
create a SCSS file that "imports" the files bootstrap-sass
using statements @import
.
It's important to do this because there is actually an order in which the files should be included bootstrap-sass
, and you can manipulate that order with operators @import
.
For example, here's an example of how to do it. Note that app.scss
- this is the only file that includes everything else; app.scss
becomes the only thing that gulp needs to handle.
Then your gulp command will do the following:
gulp.src './app.scss'
.pipe blah blah sass stuff
.pipe gulp.dest 'dist/stylesheets/'
FWIW, the gulp task I'm using to process SCSS is the styles:scss
task here .
source to share