S
S
sergey2015-09-19 17:00:38
Sass
sergey, 2015-09-19 17:00:38

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']);

Maybe someone will advise a suitable tutorial on setting up such a project, where everything is available.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
sim3x, 2015-09-19
@zorro76

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 question

Ask a Question

731 491 924 answers to any question