Answer the question
In order to leave comments, you need to log in
How to properly use the bootstrap-sass bundle in a gulp project?
Reviewed several tutorials on creating a project like gulp-bootstrap-sass. But trying to run it on my own, I ran into a problem, it gives an error and does not compile sass.
my gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
notify = require("gulp-notify"),
bower = require('gulp-bower');
var config = {
sassPath: './resources/sass',
bowerDir: './bower_components'
};
gulp.task('bower', function() {
return bower()
.pipe(gulp.dest(config.bowerDir))
});
gulp.task('icons', function() {
return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
.pipe(gulp.dest('./public/fonts'));
});
gulp.task('css', function() {
return gulp.src(config.sassPath + '/style.scss')
.pipe(sass({
style: 'compressed',
loadPath: [
'./resources/sass',
config.bowerDir + '/bootstrap-sass-official/assets/stylesheets',
config.bowerDir + '/font-awesome/scss',
]
})
.on("error", notify.onError(function (error) {
return "Error: " + error.message;
})))
.pipe(gulp.dest('./public/css'));
});
gulp.task('watch', function() {
gulp.watch(config.sassPath + '/**/*.scss', ['css']);
});
gulp.task('default', ['bower', 'icons', 'css']);
Answer the question
In order to leave comments, you need to log in
You should only use the ruby version if you definitely need it
. bover is cool to use, but what the hell is it needed if everything is in npm?
Yes, and you need to clean up after him
'use strict';
/*
npm install --save-dev \
gulp \
node-sass \
gulp-sass \
compass-mixins \
bootstrap-sass \
gulp-autoprefixer \
gulp-minify-css \
gulp-sourcemaps
*/
// load plugins
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minify_css = require('gulp-minify-css'),
sourcemaps = require('gulp-sourcemaps'),
path = require('path');
gulp.task('sass', function () {
gulp.src("paths/to/sass/files/**/*.sass")
.pipe(sourcemaps.init())
.pipe(
sass({
includePaths: [],
imagePath: "path/to/images"
})
.on('error', sass.logError))
// https://github.com/ai/browserslist
.pipe(autoprefixer("last 2 version", "> 1%", "Explorer >= 8", {
cascade: true
}))
.pipe(minify_css({compatibility: 'ie8'}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest("paths/to/css_dir"));
});
//watch
gulp.task('live', function () {
//watch .sass files
gulp.watch("paths/to/sass/files/**/*.sass", ['sass']);
});
gulp.task('default', ['live']);
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question