I’m learning how to use Gulp and I already have experience with the other tools listed. However I can’t figure out an effective way to set them up in Gulp.
I’ve successfully created a task for Compass. This is basically taken directly from their instructions and seems to work:
gulp.task('compass', function() {
return gulp.src('./app/sass/style.scss')
.pipe(compass({
config_file: 'config.rb',
css: 'dist/css',
sass: 'app/sass'
}))
.pipe(gulp.dest(config.publicDir + '/css'));
});
I’ve also successfully created a task for Bootstrap Sass, which uses Bower. It retrieves Bootstrap installed through Bower:
gulp.task('css', function() {
return gulp.src('./app/sass/style.scss')
.pipe(sass({
includePaths: [config.bootstrapDir + '/assets/stylesheets'],
}))
.pipe(gulp.dest(config.publicDir + '/css'));
});
I want the functionality of using Compass and Bootstrap together. Now that I write about it, I wonder if installing Compass through Bower instead would make things easier. I suspect there are multiple ways to do this.
This however does not work:
gulp.task('default', gulp.series('compass', 'css'));
My style.scss is importing Bootstrap @import 'bootstrap'
. When the Compass task runs, it can not find Bootstrap. However, as stated if I just run the CSS task, it loads Bootstrap fine. The problem may be at the level of my logic or missing a detail. In a way I think I want to load the Bootstrap styles from Bower and then pass them through the Compass task.
Suggestions?