Singularitygs + Breakpoint + Compass with Gulp

Singularitygs + Breakpoint + Compass with Gulp

This is how I managed to set up Singularitygs + Breakpoint + Compass with Gulp (for Drupal theming).

Install gulp globally
"sudo npm install -g gulp"

Copy the following package.json to the root folder of your project.

{
  "name": "your_project",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "browser-sync": "^2.9.3",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-plumber": "^1.0.1",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2",
    "breakpoint-sass": "^2.6.1",
    "compass-mixins": "^0.12.7",
    "singularitygs": "^1.6.2",
    "gulp-watch": "^4.3.5"
  },
  "devDependencies": {
    "gulp-cssmin": "^0.1.7",
    "gulp-image-optimization": "^0.1.3",
    "gulp-sass-glob": "0.0.8",
    "gulp-strip-css-comments": "^1.2.0",
    "gulp-uglify": "^1.4.1",
    "gulp-uncss": "^1.0.3",
    "gulp.spritesmith": "^4.3.0",
    "modularscale-sass": "^2.1.1",
    "node-sass-globbing": "0.0.23"
  },
  "scripts": {},
  "author": "",
  "license": "ISC"
}


"cd" in the directory and run "npm install".


Second: Create and edit your gulpfile.js like this:

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var importer = require('node-sass-globbing');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var cssmin = require('gulp-cssmin');
var uncss = require('gulp-uncss');
var stripCssComments = require('gulp-strip-css-comments');
var uglify = require('gulp-uglify');
var imageop = require('gulp-image-optimization');
var spritesmith = require('gulp.spritesmith'); // See https://github.com/twolfson/gulp.spritesmith

var sass_config = {
  importer: importer,
  includePaths: [
    'node_modules/breakpoint-sass/stylesheets/',
    'node_modules/singularitygs/stylesheets/',
    'node_modules/modularscale-sass/stylesheets',
    //'node_modules/singularity-extras/stylesheets/',
    'node_modules/compass-mixins/lib/'
  ]
};

// Create the sprite.
// Important: Source images must not have leading numbers (e.g. 2.png -> sprite-2.png)!!!
// SASS does not support the variables that start with numbers!!!
gulp.task('sprite', function () {
  var spriteData = gulp.src('images/**/*').pipe(spritesmith({
    imgName: 'sprite.jpg',
    cssName: '_sprite.scss',
    cssFormat: 'scss',
    imgPath: '../images/sprite.jpg'    
  }));

  // Choose css destination.
  var cssStream = spriteData.css
        .pipe(gulp.dest('./sass'));

  // Choose img destination.      
  return spriteData.img.pipe(gulp.dest('images'));
});

// Optimize the images.
gulp.task('images', function(cb) {
    gulp.src(['images/**/*.png','images/**/*.jpg','images/**/*.gif','images/**/*.jpeg']).pipe(imageop({
        optimizationLevel: 5,
        progressive: true,
        interlaced: true
    })).pipe(gulp.dest('./images')).on('end', cb).on('error', cb);
});

// Compress javascript.
gulp.task('uglify', function() {
  return gulp.src('js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('js_min'));
});

gulp.task('browser-sync', function() {
    browserSync.init({
        //injectChanges: true,
        proxy: "127.0.0.1/your_project"
        // If in a static site uncomment the following.
         // server: {
         //     baseDir: "./"
         // }
    });
    gulp.watch("sass/**/*.scss", ['sass']);
    gulp.watch("css/**/*.css").on('change', browserSync.reload);
    gulp.watch("js/**/*.js", ['uglify']).on('change', browserSync.reload);
});

// Compile sass.
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(plumber())
    //.pipe(sourcemaps.init())
    .pipe(sass(sass_config).on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 version']
    }))
    //.pipe(sourcemaps.write('./css'))
    .pipe(stripCssComments({preserve: false}))
    .pipe(gulp.dest('./css'))
    // .pipe(uncss({
    //       html: ['./html/**/*.html']
    //   }))
    .pipe(cssmin())
    .pipe(gulp.dest('./css'));
});

gulp.task('default', [/*'images',*/ 'sass', /*'uglify',*/ 'browser-sync']);




Third: Require the following at the top in your "theme.styles.scss":
@import "compass";
@import 'modular-scale';
@import "singularitygs";
@import "singularity-extras";
@import "breakpoint";

Fourth: Don't forget to include each and every partial in your "theme.styles.scss" like this:
@import "compass";
@import 'modular-scale';
@import "singularitygs";
@import "singularity-extras";
@import "breakpoint";
@import "sass/variables/**/*.scss";
@import "sass/abstractions/**/*.scss";
@import "sass/base/**/*.scss";
@import "sass/components/**/*.scss";
// The following is to enable the debugging in Singularity.
@include sgs-change('debug', true);

If you encounter any errors with Drupal and browserSync (white screen of death), you can run this command in the root folder of your theme:

find node_modules -type f -name '*.info' | xargs rm

This removes the .info files of the node_modules, which create problems with Drupal.
See also: http://drupal.stackexchange.com/questions/126880/how-do-i-prevent-drupal-raising-a-segmentation-fault-when-using-a-node-js-themin