Problem/Motivation

Switch Omega from Ruby based SASS to LibSASS.

Proposed resolution

How to test the “omega-switch-to-libsass-2537364-57.patch”.
1. Apply the omega-switch-to-libsass-2537364-57.patch.
2. Edit the “proxy: "127.0.0.1/your_drupal_root_folder"” in the gulpfile.js, to match your Drupal root folder.
3. Install gulp globally. sudo npm install --global gulp.
4. In the root directory of the theme run npm install.
5. In the root directory of the theme run find node_modules -type f -name '*.info' | xargs rm.
6. Import the following at the top of your theme.style.scss:

@import "singularitygs";
@import "compass";
@import "breakpoint";
@import "sass/variables/**/*.scss";
@import "sass/abstractions/**/*.scss";
@import "sass/base/**/*.scss";
@import "sass/components/**/*.scss"; 

7. In the root directory of the theme run gulp or better sudo gulp.
8. Navigate to http://localhost:3000/your_drupal_root_folder.

Remaining tasks

User interface changes

API changes

Data model changes

Original report

Thanks to fubhy for switching the starterkit to LibSass. If anybody considers to switch from the current sub theme to the new on, here some informations fubhy gave in the parent ticket. Would be nice to collect the experiences people have on migrating away from the ruby based starterkit to the new one based on LibSass.

From #2201679: SASS compile time at a full minute! #8:

First and foremost you are probably going to have problems with dependencies you built your Sass around with the previous starterkit... Namely stuff like Compass, Singularity/Susy, etc. .... Oh wait, let me just put together a quick list of things you might want to look at if you choose to migrate (it's definitely possible but tough to say for me whether it will end up being complicated in your specific case).

1. Copy the new/changed files from the starterkit's root directory to your theme and remove all the old stuff from your theme (e.g. Gemfile, config.rb, package.json, .ruby-version, Guardfile, etc.). Take the files from the new default starterkit (e.g. gruntfile.js, package.json, ...) and copy them over to your theme (if you added any npm packages, make sure you copy them over from the old package.json).

2. Remove the old node_modules directory and do a fresh "npm install".

3. As mentioned... Compass/Susy/Singularity etc. (basically all the ruby gems you are currently using, if any). Try to look out for things like https://github.com/Igosuki/compass-mixins ... You are not the only one migrating away from ruby gems for these mixin libraries so it's very likely that you will find resources for all sorts of things.

4. Adjust your styles.scss and normalize.scss: Globbing (import with **/*.scss) does not work in libsass and there is no sass-globbing plugin as there was for the ruby preprocessor. Hence, you now need to explicitly @import all your partials yourself (check your styles.scss file for that, there should a few **/*.scss-style imports). Then, according to #3, migrate away from compass/singularity mixin usage or find compatible non-ruby replacements for these.

5. In order to run gulp, either use your global gulp-cli (if installed) or run the package.json scripts (e.g. "npm run sass:dev") --> watches your /sass folder for changes and compiles the .scss with libsass using gulp.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

osopolar’s picture

BTW: Singularity seems to be compatible with LibSass.

xzyfer’s picture

Hi, I'm part of the core LibSass team. Please feel free to reach with any questions you have. You can best reach me on twitter.com/xzyfer.

FWIW the majority or major Sass libraries including Susy/Singularity are fully compatible with LibSass 3.2+.

Although globbing importers do exists in nodes-sass (and are possible as C extension) we currently recommend against them due to a know issue on our custom importers.

fubhy’s picture

Thanks, I wasn't aware that Singularity works already as I've not been using any grid frameworks whatsoever in a while. Good to know!

Also, thanks for the offer xzyfer. Appreciated!

csedax90’s picture

Hello, i'm trying to switching to libsasss but I've some problems to undertand how it works. I've followed your guide and replaced all new files, now I've edited package.json width 2 new rows:

"compass-mixins": "^0.12.6",
"susy":"~2.2.2"

after doing this I gave the command again: npm install and below: npm run sass: dev

buon now, how can I import those libraries in my style.css? I've tried with @include "compass-mixins" but it doesn't work... thanks

fubhy’s picture

Issue tags: -Sass, -omega 4

Check out https://github.com/sass/node-sass#includepaths. You will have to modify the contained gulpfile.js after installing new node packages (much like you had to put e.g. "require susy;" in the config.rb with the Ruby preprocessor).

gulp.task('sass:dev', function () {
  gulp.src('./sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: [
        './node_modules/compass-mixin/{add path to mixins here}', // Add path to mixin / function partials there
        './node_modules/susy/{add path to mixins here}' // Add path to mixin / function partials there
     ] 
    }).on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 version']
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./css'));
});
csedax90’s picture

ok I was able to make it all work, but I think there are some logical errors in the current version.
A frontend developer who is using Omega uses it also for the functionality of its layouts, which at the time without any modifications to the various file gulp, etc ... is unable to do.

I think at least in the Libsass starterkit we should includes the two required dependencies susy and breakpoint-sass immediately, so that they can be available to compile without change anything.

Normally a user also uses or Compass or Bourbon, so it would be interesting to provide one or the other library already as a dependency.

Another thing, I had trouble "reading" of the sub-file once the folder is created layouts / simple, the file gulp.js not read the new files in the folder.
To resolve I had to edit the file gulp.js as follows:

gulp.task ('sass: dev', function () {
gulp.src ('./ sass / ** / *. SCSS')

Now I'm using Omega 4.4 with Libsass, Bourbon (i've finally replaced Compass), Susy (with Omega Layouts) and Breakpoint, and all is working fine. I attach my configuration if someone wants to try:

package.json

{
  "name": "test",
  "version": "1.0.0",
  "scripts": {
    "sass:dev": "./node_modules/.bin/gulp",
    "sass:prod": "./node_modules/.bin/gulp sass:prod"
  },
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-watch": "^4.3.3",
	 "susy":"~2.2.2",
	 "breakpoint-sass": "^2.6.0",
	 "bourbon": "^4.2.3"
  }
}

gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass:prod', function () {
  gulp.src('./sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
       browsers: ['last 2 version']
    }))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:dev', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: [
			'./node_modules/breakpoint-sass/stylesheets/',
			'./node_modules/susy/sass/',
			'./node_modules/bourbon/app/assets/stylesheets/'
     ] 
    }).on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 version']
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass:dev']);
  gulp.watch('./sass/**/**/*.scss', ['sass:dev']);
});

gulp.task('default', ['sass:dev', 'sass:watch']);

THEMENAME.styles.scss

// Import variables, abstractions, base styles and components.
// Uncomment the next lines and adjust them to your needs.
//@import "variables/{YOUR FILE NAME HERE}";
//@import "abstractions/{YOUR FILE NAME HERE}";
//@import "base/{YOUR FILE NAME HERE}";
@import "bourbon";

simple.layouts.scss

/*******************************************************************************
 * simple.layout.scss
 *
 * Styling of the "simple" layout demonstrating the Compass grid extension Susy
 * and building mobile first layouts.
 ******************************************************************************/
//@import "compass";
@import "breakpoint";
@import "susy";

{{ SAME AS DEFAULT FILE }}
krystianbuczak’s picture

As fubhy said:

Globbing (import with **/*.scss) does not work in libsass and there is no sass-globbing plugin as there was for the ruby preprocessor. Hence, you now need to explicitly @import all your partials yourself (check your styles.scss file for that, there should a few **/*.scss-style imports).

that's true, but we have also NOT fully functional plugin called Gulp CSS globbing Plugin name is misleading, but for sure it works for scss files too.

Not fully means:

  1. It hasn't support for sourcemaps yet (doesn't work properly for partials) but I can live with it,
  2. doesn't work inside partials, so you can't use @import statement like this: @import "variables/**/*";

I tried successfully this gulp (gulpfile.js) configuration:

gulp.task('sass:dev', function () {
    gulp.src('./sass/*.scss')
        //.pipe(sourcemaps.init())
        .pipe(cssGlobbing({
            extensions: ['.scss']
        }))
        .pipe(sass({
            sourceComments: false,
            includePaths: [
                './node_modules/breakpoint-sass/stylesheets/',
                './node_modules/sass-toolkit/stylesheets/',
                './node_modules/singularitygs/stylesheets/',
            ]
        }).on('error', sass.logError))
        .pipe(cmq({
            log: true
        }))
        .pipe(autoprefixer({
            browsers: ['last 2 version']
        }))
        //.pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./css'));
});

Now I can import partials in [theme].styles.scss

@import "variables/**/*";
@import "abstractions/**/*";
@import "base/**/*";
@import "components/**/*";

It seems we are much closer in switching environment to libsass.

steinmb’s picture

Version: 7.x-4.4 » 7.x-4.x-dev

I'm not switching, jumping strait to libsass though I am still trying to connect the dots. Does any documentation exist for this?

mesnitu’s picture

bower, grunt, gulp, json, npm, rvm, ruby, libsass, susy, bordon, singularity, compass, to globb or not to globb.....
Sometimes I miss the good old > touch style.css
Subscribing

fubhy’s picture

bower, grunt, gulp, json, npm, rvm, ruby, libsass, susy, bordon, singularity, compass, to globb or not to globb.....
Sometimes I miss the good old > touch style.css

You can pretty much cross out Bower, Grunt, RVM, Ruby, Susy, Singularity, Compass, etc. from this list now. I've found that really all you need is LibSass and npm and some sort of task manager (in some cases) for which I'd use Gulp.

I personally don't use globbing either.

mesnitu’s picture

EDIT: Just the layouts

Well, I've used the all the information gather in here, but, it doesn't make new files for layouts....

Something am I missing something, or is there another way of doing it now ?
My config so far :

gulpfile

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cssGlobbing = require('gulp-css-globbing');

gulp.task('sass:prod', function () {
  gulp.src('./sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
       browsers: ['last 2 version']
    }))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:dev', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init())

	.pipe(cssGlobbing({
            extensions: ['.scss']
        }))		

    .pipe(sass({
	sourceComments: false,
      includePaths: [
			'./node_modules/breakpoint-sass/stylesheets/',
			'./node_modules/susy/sass/',
			'./node_modules/bourbon/app/assets/stylesheets/'
     ] 
    }).on('error', sass.logError))

    .pipe(autoprefixer({
      browsers: ['last 2 version']
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass:dev']);
  gulp.watch('./sass/**/**/*.scss', ['sass:dev']);
});

gulp.task('default', ['sass:dev', 'sass:watch']);

package.json

{
  "name": "terra_solta",
  "version": "1.0.0",
  "scripts": {
    "sass:dev": "./node_modules/.bin/gulp",
    "sass:prod": "./node_modules/.bin/gulp sass:prod"
  },
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-watch": "^4.3.3",
	"susy":"~2.2.2",
	 "breakpoint-sass": "^2.6.0",
	 "bourbon": "^4.2.3",
	 "gulp-css-globbing":"^0.1.8"
  }
}

No layouts, no fun

Another thing: I haven't comment this line .pipe(sourcemaps.init()) (about the config#7), but I got no errors, so not sure if it is ok.

Thanks

mesnitu’s picture

Sorry, my fault. It's creating files and layout files.
It was the @import "../../variables/**/*" in the layouts scss, that was not letting the file creation.

EDITED
So in the layouts @import "../../variables/_file.scss" works, witch is enough for me.

Glad that Omega can work now with libsass, for what I've seen so far, it's a big time difference in compiling
Thanks to all for sharing

krystianbuczak’s picture

Another thing: I haven't comment this line .pipe(sourcemaps.init()) (about the config#7), but I got no errors, so not sure if it is ok.

AFAIK in my configuration generated maps were incorrect, that's why commented out.

mesnitu’s picture

Well, for some reason, I can't use the globbing and the paths to include the layouts at the same time.
I dump the gobbing. Perhaps someone can find a way to have both.

steinmb’s picture

We prob. should get starting documenting how to create and how to port in https://www.drupal.org/node/1768686 -somewhere?

nicobot’s picture

Hey there! I've managed to use globbing successfully in my scss files using the libsass importer and the node-sass-globbing package.

Here is what I did:

- I've installed the Node Sass Globbing package through npm
npm install node-sass-globbing

Or add this line to package.json and run "npm install":
"node-sass-globbing": "0.0.23",

- Then I've modified gulpfile.js with the following:

'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 sass_config = {
  importer: importer,
  includePaths: [
    './node_modules/breakpoint-sass/stylesheets/',
    './node_modules/bourbon/app/assets/stylesheets/'
  ]
};

gulp.task('sass:prod', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass(sass_config).on('error', sass.logError))
    .pipe(autoprefixer({
       browsers: ['last 2 version']
    }))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:dev', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass(sass_config).on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 version']
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass:dev']);
});

gulp.task('default', ['sass:dev', 'sass:watch']);

I hope it helps!

mesnitu’s picture

with node-sass-globbing I get no errors, but no $var are passed to theme-style.scss........
You get this working, and also, creating layouts "on the fly" ?

nicobot’s picture

Hi mesnitu,

I'm not sure what you mean, but I can import all variables defined in /variables/*.scss files.
Maybe this helps out... I have in my theme-style.scss, something like:

@import "sass/variables/**/*.scss";
@import "sass/abstractions/**/*.scss";
@import "sass/base/**/*.scss";
@import "sass/components/**/*.scss";

I'm adding the "sass/" prefix, because gulp was sending as relative path "." which was the "theme/" directory instead of "theme/sass/".

I hope it helps !

mesnitu’s picture

I think I posted a thanks to nicobot , but for some reason it doesn't show.
Anyway, Thanks ! It was the path.

vagelis-prokopiou’s picture

This is how I managed to set up Singularitygs (+ Singularity-extras) + Breakpoint + Compass with Gulp.

First: Install gulp globally.
sudo npm install -g gulp

Second: 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-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"
}

Third: cd in the directory and run npm install.

Fourth: If you encounter any errors with Drupal and browserSync (white screen of death or segmentation fault), 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...

Fifth: Edit the 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 sass_config = {
  importer: importer,
  includePaths: [
    /* If installed globally. */
    // '/usr/lib/node_modules/breakpoint-sass/stylesheets/',
    // '/usr/lib/node_modules/singularitygs/stylesheets/',
    // '/usr/lib/node_modules/compass-mixins/lib/'
    /* If installed locally (--save-dev). */
    'node_modules/breakpoint-sass/stylesheets/',
    'node_modules/singularitygs/stylesheets/',
    'node_modules/compass-mixins/lib/'
  ]
};

gulp.task('browser-sync', function() {
    browserSync.init({
        injectChanges: true,
        proxy: "127.0.0.1/your_project_folder"
    });
    gulp.watch("./sass/**/*.scss", ['sass']);
    gulp.watch("./css/**/*.css").on('change', browserSync.reload);
    gulp.watch("./js/**/*.js", ['uglify']).on('change', browserSync.reload);
});

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('.'))
    .pipe(cssmin())
    .pipe(gulp.dest('./css'));
});

gulp.task('default', [ 'browser-sync']);

Sixth: Require the following at the top in your "theme.styles.scss":
@import "singularitygs";
@import "compass";
@import "breakpoint";

Seventh: Don't forget to include each and every partial in your "theme.styles.scss" like this:

@import "singularitygs";
@import "compass";
@import "breakpoint";

@import "sass/variables/**/*.scss";
@import "sass/abstractions/**/*.scss";
@import "sass/base/**/*.scss";
@import "sass/components/**/*.scss";

If you also want to include the “Singularity-extras” in your projects, this is the way I managed to do it:
1. Download manually the “singularity-extras” from GitHub, unzip and put them in your node modules. The path must be like this: 'node_modules/singularity-extras/stylesheets/'.
2. Download manually the “modularscale-sass” from GitHub, unzip and put them in your node modules. The path must be like this: 'node_modules/modularscale-sass/stylesheets'/.
3. Add both of these in your gulp file in the sass_config variable like this:

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/'
  ]
};

4. Include them at the top of your "theme.styles.scss" like this:

@import "compass";
@import 'modular-scale';
@import "singularitygs";
@import "singularity-extras";
@import "breakpoint";

5. Enjoy the Singularity awesomeness!
Pay attention, too, to any permission problems. This is a common problem. I usually change the owner of my application like this,
sudo chown -R www-data:www-data /var/www/html/.
Changing file permissions with
sudo chmod -R 777 *
is a very bad practice (forbidden in production environment) and it should be avoided....
You can see a test project I set up including singularity-extras and multiple $output styles within the same project here: https://github.com/Vaggos/Singularitygs_test
or here:
http://sassmeister.com/gist/8ee776e764a6cf6cc5c3

vagelis-prokopiou’s picture

alexberendei’s picture

Thank you Vagelis! #20 worked for me, except the last part in theme.styles.scss where I've put:

@import "singularitygs";
@import "compass";
@import "breakpoint";
@import "sass/variables/**/*.scss";
@import "sass/abstractions/**/*.scss";
@import "sass/base/**/*.scss";
@import "sass/components/**/*.scss";
vagelis-prokopiou’s picture

You are welcome alexberendei! Happy gulp-ing!
(I changed the code above, according to your comment. Thanx).

steveOR’s picture

Thanks Vagelis your #20 helped me out! Omega recently switched to gulp and really had no idea how to get the drush wizard generated subtheme to compile a new layout similar to the omega parent theme layouts. Using susy instead of singularity so made the necessary adjustments. Didn't know about the compass-mixins node module cool. The sass_config mechanism is handy also.

vagelis-prokopiou’s picture

You are welcome steveOR. I am happy I could help.

djschoone’s picture

Thank you Vagelis. We managed to get it working with you comments.

The parts for clear-cache and browsersync should be optional in my opinion. Main reason for LibSASS is having more speed in compilation. Putting in a clear-cache on every sass change, will not speed development up.

vagelis-prokopiou’s picture

Hello djschoone. I am glad I could help.
As for the 'clear-cache' code, you are right. In fact, it didn't clear the caches when I tested it. I don't know why. So, I removed it from the code above.
As for the browserSync, I think it is extremely useful in the work flow. It is optional of course.
Another very useful plug-in is uncss. It is a little tricky to set it up with a CMS though.

bramvandenbulcke’s picture

Thanks, Vagelis. I was really struggling to get this to work but your little tutorial saved my day.

vagelis-prokopiou’s picture

You are welcome bramvandenbulcke.

steveoriol’s picture

Thank you Vagelis !, your post is very helpful :-)

vagelis-prokopiou’s picture

You are welcome steveoriol!
This is the last time I will respond to somebody thanking me because I don't want to "pollute" the post. It does not mean that I ignore anyone. Thank you all guys.

BenMirkhah’s picture

Late to the party but hey I too wrote a new gulp file to include 3 features I love:

1) Folder Globbing
2) SVG->PNG
3) Live Reload

Here's a link to my gulpfile.js as the code may get updated in the future.

/* 
First time usage needs the following dependencies installed:
sudo npm install --save-dev del gulp  gulp-plumber gulp-sass gulp-watch gulp-autoprefixer gulp-debug gulp-css-globbing gulp-livereload gulp-order gulp-sourcemaps gulp-svg2png gulp-newer gulp-size
bower init
bower install susy --save
bower install sass-toolkit --save
bower install breakpoint-sass --save
*/

//Source / Destination / Path settings
var sass_src = ['sass/**/**/*.scss', '!sass/excludeme.scss']; //just in case you wanted to exclude something
var css_temp = './temp'; //add this folder to your .gitignore
var css_dest = './css';
var svg_src  = 'images/svg/*.svg';
var png_dest = './images/png';
var reload_url = 'localhost'; //can be www.example.com, just no http:// or ending /

//Gulp Module Definitions
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var debug = require('gulp-debug');
var del = require('del');
var changed = require('gulp-changed');
var globbing = require('gulp-css-globbing');
var livereload = require('gulp-livereload');
var order = require('gulp-order');
var newer = require('gulp-newer');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var size = require('gulp-size');
var sourcemaps = require('gulp-sourcemaps');
var svg2png = require('gulp-svg2png');
var watch = require('gulp-watch');

//Default task
gulp.task('default', ['build-css', 'build-png', 'run-reload-server', 'watch-sass', 'watch-svg']);

//Build process, runs once on load, and after every change
gulp.task('build-css', ['clean-temp', 'compile-sass']);

//Clean temporary css folder
gulp.task('clean-temp', function() {
  del([css_temp], function (err, paths) {
    console.log('Deleted temp files/folders:\n', paths.join('\n'));
  });
});

//Compile Sass in correct order
gulp.task('compile-sass', function() {
  gulp.src(sass_src, {base: 'sass/'})
    .pipe(plumber())
    .pipe(order([
      'libraries/*',
      "variables/*",
      "abstractions/*",
      "base/*reset.scss",
      "base/*",
      "components/*",
      "*.no-query.scss"
    ]))
    .pipe(sourcemaps.init())
    .pipe(debug({title: 'sass: '}))
    .pipe(size({title: 'sass: ', showFiles: false}))
    .pipe(globbing(
      {
        extensions: ['.scss'],
        scssImportPath: {
          leading_underscore: false,
          filename_extension: false
        }
      }
    ))
    .pipe(sass().on('error', sass.logError), {
      style: 'expanded',
      includePaths: [__dirname + '/sass',
                     __dirname + '/libraries'],
      sourcemap: true,
      errLogToConsole: true
    })
    .pipe(autoprefixer('last 2 version, > 5%'))
    .pipe(sourcemaps.write('.', {sourceRoot: '.'}))
    .pipe(size({title: 'css: ', showFiles: true}))
    .pipe(gulp.dest(css_temp)) //write css/map files to temp
    .pipe(changed(css_dest, {hasChanged: changed.compareSha1Digest}))
    .pipe(debug({title: 'changed: '})) //what changed since last compile
    .pipe(gulp.dest(css_dest)) //copy fresher files to destination
    .pipe(livereload()) //reloads only changed css/map files
  ;
});

//Start LiveReload browser refresher
gulp.task('run-reload-server', function() {
  livereload.listen({
    host: reload_url,
    port: 35729
  });
});

//Watch Sass source files for changes, build CSS on change
gulp.task('watch-sass', function() {
  gulp.watch(sass_src, ['build-css']);
});

//Watch SVG source files for changes, build PNG on change
gulp.task('watch-svg', function() {
  gulp.watch(svg_src, ['build-png']);
});

//Create fallback PNGs from SVGs
gulp.task('build-png', function () {
  return gulp.src(svg_src)
    .pipe(newer({dest: png_dest, ext: '.png'})) //only do the newer files
    .pipe(livereload()) //reload newer svg
    .pipe(plumber())
    .pipe(size({title: 'svg: ', showFiles: true}))
    .pipe(svg2png())
    .pipe(gulp.dest(png_dest))
    .pipe(size({title: 'png: ', showFiles: true}))
    .pipe(livereload()) //reload fresh png, maybe an overkill for fall-back images?
  ;
});
djschoone’s picture

Great addition benmirkhah. I'm missing livereload now and haven't had the time to add it yet.

BenMirkhah’s picture

Thanks man, can't live without LiveReload myself, F5 key is no longer worn out!

vagelis-prokopiou’s picture

Nice addition BenMirkhah.
About the livereload, I think it is awesome indeed, but browserSync is livereload on steroids. I suggest you check it out.

fubhy’s picture

Thanks @Vagelis and @BenMikhah. I have been using webpack and browsersync for hot reloading without gulp even before adding gulp to the starterkit. However, I don't think that it would be a good fit for the majority due to the added complexity... Hence why I added gulp to the theme anyhow.

I would love to add browserSync through good old gulp too though (and other goodies as per your recent comments here). Would you guys be interested in collaborating on a new gulpfile.js that combines the best pieces of both of your current versions so I can add that to 4.x-dev?

vagelis-prokopiou’s picture

Hello fubhy. I would like to help anyway I can.

fubhy’s picture

Cool. Can you provide a patch with a better gulpfile including browsersync?

vagelis-prokopiou’s picture

Since I haven't made a patch before, is that the proper way to deal with the issue (I am asking because I have provided my gulpfile in the comments), and if yes, is this the guide for patches?
Making a Drupal patch with Git

fubhy’s picture

Yes, that is the correct guide. Patches allow me to better review the changes in the project directly and then apply and commit it instead of manually copying over things.

Just changing the gulpfile.js is not enough though since you probably want to also change the current implementation of the livereload settings etc. in the admin settings UI and how they are applied (I think that's in omega/includes/development/development.inc and development.settings.inc). I am not sure how we should proceed there because removing livereload there would also remove it for users of the old (now 'dusty') starterkit. Maybe we should move keep the livereload settings and just add the browsersync stuff next to it so ppl can choose.

fubhy’s picture

If you need any help, let me know.

vagelis-prokopiou’s picture

I didn't mess around with any livereload settings. I just create an omega subtheme with libsass suport, and edit the default gulpfile (and package.json). Ok. I will look into it asap.

BenMirkhah’s picture

Fubhy, I'd be glad to help man,
Couple of other things that also are needed:

1) a little make utility for "drush owiz" to get the new gulp dependencies
2) I've converted the simple layout from SusyOne syntax to Susy2 I like to share
3) Need a dev/prod environment switcher in my gulpfile as well

I'm going to dedicate some time week and get some patches to you.
I've heard great things about BrowserSynch and will try it out for sure.
Cheers

amreana’s picture

browserSync would look really nice btw.. :)
also anyone would know the reason why i need to clear my cache every time i write a scss file? ( i confirm i have no cache enabled for css or js files )

vagelis-prokopiou’s picture

Priority: Major » Normal
Status: Active » Needs review
FileSize
1.07 KB

A patch for the package.json to support the new gulpfile.js which will be added.

vagelis-prokopiou’s picture

I managed to make the gulpfile.js patch too. This is it fubhy.

devkinetic’s picture

Hey I'm a new user to Omega. All of the documentation for creating sub themes and adding dependencies no longer applies. I'm not totally sure where to start.

vagelis-prokopiou’s picture

Hello devkinetic.
I am sure omega wizard works. I have used it very recently.
See these threads for more info.

https://www.drupal.org/node/2045303
https://www.drupal.org/node/1936948

PS: Try to set Omega as your default theme, drush cc all, and then run the omega-wizard.

sahaj’s picture

Hi, I'm trying to figure out either:

  1. How to work in Omega 4.4 with Layouts, Panels, and Panels Everywhere, as I'm used to. For now I'm still unable to create CSS layout subfolders to use with Panels Everywhere (see https://www.drupal.org/node/2597858)
  2. Indeed I liked the way mentioned in (1) using Panels Everywhere rather than Context, if it is no possible to use it with Omega 4.4, I would be glad to know how to replace it advantageously. So if you have any tips, that would be great.

Thanks for all!

steinmb’s picture

@sahaj this issue is about "Switch current omega sub-theme to the new LibSass". Please open a new support issue instead of hijacking this.

sahaj’s picture

@steinmb maybe I wasn't clear enough, but:

  1. I have exactly almost all my sites build with omega sub-theme using Layouts, Panels, and Panels Everywhere, that I would like to upgrade to the new LibSass, and what is preventing me to make the move is that I have no idea how to deal with this layout story.
  2. maybe I'm totally misunderstanding the whole thing, but I'm not the first one mentioning 'layouts' in this thread (#6)
  3. sorry to make you felt hijacked, but as I mentioned I have already open a specific issue and only because I could not find much documentation other than this thread, I kindly asked if any one knew a way use Layouts and Panels Everywhere in Omega 4.4

So please, don't be offended and if this thread in only about gulpfile.js then consider to make the title more explicit. And if you have any suggestion for my issue be welcome to explain it in https://www.drupal.org/node/2597858.

Staler75’s picture

I don't know if this is offtopic or not, but i tried to use the new way omega works, but can't get it work properly, i used the files Vagalis posted here and on github, but no luck.
most of the problems i have i running gulp.
it worked for a brief moment, but now it keeps crashing my Xamp control and won't run at all.

also i have problems with the coding, it seems there are some updates of using code like $grid:16 must now put as @include add-grid(16);

is there a place where all these new way of theming is explained? because i got stuk with the level-up tuts and this new way of theming with omega

vagelis-prokopiou’s picture

I don't know about Xamp to help you. I work on LAMP (Debian 8)...
As for the $grid:16 vs the @include add-grid(16), it is purely a Singularity thing. The syntax has changed since version 1.2+. See https://github.com/at-import/Singularity/wiki.

Staler75’s picture

thnx for the quick reply and the link.
i'm totally new on Singularity, gulp etc. did work with omega 3 but never with 4 so it's hard to debug a error when following a tuturial which is slightly different then how omega 4 works today.

i solved a lot of errors i ran into during the tut by searching on google etc, but i can't find a solution for this problem

hopefully someone can help me with the gulp problem.

steinmb’s picture

Title: Switch current omega sub-theme to the new LibSass » Switch current omega sub-theme to LibSass
FileSize
2.91 KB

This patch is combining the two patches from @Vagelis. One of the patches was corrupt but I fixed it. I hope the people in there can start to test this. This patch is untested by me since all I did was to fix and combine. Make it easier to test for everyone.

steinmb’s picture

vagelis-prokopiou’s picture

I submit a patch that contains all the previous patches, plus more improvements and additions.

steinmb’s picture

Issue summary: View changes
Issue tags: +Needs issue summary update

Great job @Vagelis. I think the issue summary should be updated with instructions on how to test this patch.

vagelis-prokopiou’s picture

Issue summary: View changes
steinmb’s picture

vagelis-prokopiou’s picture

Issue summary: View changes

Updated the issue summary with directions to apply and use the "omega-switch-to-libsass-2537364-57.patch".

steinmb’s picture

A little note from John W and Zen on Compass. Yes, it's dead and we should all move away. https://www.drupal.org/node/2442861#comment-10611186

vagelis-prokopiou’s picture

Very helpful comment @steinmb. I didn't know that. Another serious reason to push forward this issue.

rajmataj’s picture

I've tried a number of these examples, mostly Vagelis' #20 and BenMirkhah's #32 but keep getting a:

Error: Cannot find module 'node-sass-globbing' message. For clarification, if I have 5 SCSS files in one directory, such as:

sass/base
sass/base/_this1.scss
sass/base/_that1.scss
etc

Should I not expect those to be picked up by this line in my [theme].style.scss file:

@import "sass/base/**/*.scss"; ?

Regardless of this error, the gulp compiler still seems to want individual files listed. Isn't the point of globbing to not have to specify each file in the parent .scss file?

My goal is simply to use Omega 4 with the Default starter kit and only add the capacity for globbing. For now, I don't need any of the livereload, susy, etc. I'm trying to keep the gulpfile.js as simple as possible for now. Any help is appreciated. Thanks.

vagelis-prokopiou’s picture

rajmataj, you have to install the node module. Read again my comment #20. I have updated it with more detailed instructions.

rajmataj’s picture

@Vagelis,

Thanks for your comment. I do indeed have node.js installed. Perhaps I should put my question into a different ticket. What I'm trying to do is basically use globbing with the Default starterkit of the Omega subtheme. Since this ticket is about switching more than setting up from scratch, I'll start a ticket elsewhere. (see here)

Thanks again.

rajmataj’s picture

Much appreciation to all the helpful comments here. I managed to get everything I need working, including globbing with a nested smacss structure, and sourcemaps displaying correctly. The gulp-cssmin module was producing errors, so I took it out since in the end I would be using Drupal to compress the final CSS. Here is the setup I have used on a fresh Omega subtheme which I've and tested successfully on various platforms with Omega 4.x and the 'default' starterkit:

My package.json:

{
  "name": "my_subtheme",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "sass:dev": "./node_modules/.bin/gulp",
    "sass:prod": "./node_modules/.bin/gulp sass:prod"
  },
  "dependencies": {
  },
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-autoprefixer": "^2.3.1",
    "node-sass-globbing": "0.0.23",
    "gulp-plumber": "^1.0.1",
    "browser-sync": "^2.9.8",
    "singularitygs": "^1.6.2",
    "compass-mixins": "^0.12.7",
    "breakpoint-sass": "^2.6.1"
  },
  "scripts": { "postinstall": "find node_modules/ -name '*.info' -type f -delete" }
}

My gulpfile.js:

'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 sass_config = {
  importer: importer,
  includePaths: [
    'node_modules/breakpoint-sass/stylesheets/',
    'node_modules/singularitygs/stylesheets/',
    'node_modules/compass-mixins/lib/'
  ]
};
 
gulp.task('browser-sync', function() {
    browserSync.init({
        //injectChanges: true,
        proxy: "mywebproject.local:8888" ************** Set this to your local dev url **************
    });
    gulp.watch("./sass/**/*.scss", ['sass']).on('change', browserSync.reload);
});
 
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('.'))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('default', [ 'browser-sync']);

From within the subtheme, now run: npm install, which will download the required node_modules for the Omega subtheme (This requires Python if it is not already installed) This will take a few mins and you should pay attention to any errors which come up. You do not want to version control the node_modules directory, by the way.

my_subtheme.styles.scss

// Import variables, abstractions, base styles and components.

@import "singularitygs";
@import "compass";
@import "breakpoint";

@import "./sass/variables/**/*.scss";
@import "./sass/abstractions/**/*.scss";
@import "./sass/base/**/*.scss";
@import "./sass/components/**/*.scss";

Now in your CLI, type gulp and wait for the gerbils to run on the wheel happily. You should see your browser open a new window with localhost:3000 but you can either use that or close it and use your own custom url if you have one. Since these are two different urls, you'll be required to log into at least one of them to use admin functionality.

To use the browsersync capability, you need to download and enable the Drupal module of the same name. I also disable LiveReload within Omega's settings. Everything seems to working smoothly. Yay!

Also note for Windows users, you need NPM3 because apparently Windows can't deal with the multilevel nesting structure of node_module dependencies. So, unfortunately, you have to update to a beta version of NPM. See here for notes on that and try using version 3.4.x.

Hope this helps others.

vagelis-prokopiou’s picture

Hello rajmataj. Two comments.

  1. This "scripts": { "postinstall": "find node_modules/ -name '*.info' -type f -delete" } does not work.
  2. You don't need the Browsersync Drupal module to make Browsersync work.

My testing environment is a Debian 8 server. I don't know about Mac, on which you probably work.

rajmataj’s picture

@Vagelis,

Thanks for your comments. Here are my observations so far: On a Windows 7 machine (which I unfortunately have to work with at work), the postinstall script in my post seems to work fine to remove the .info files. I only assumed this would be working on my Mac at home but so far, no problems or errors.

As for the Browsersync module, since I prefer to develop my sites on a custom url, such as dev.mysite.com instead of localhost:3000/, in order to have the custom url reload every time I save a scss file, the browsersync module actually must be enabled for that to happen. That is the case on Windows, Linux and Macs that I am using.

vagelis-prokopiou’s picture

I also use Browsersync with custom urls without the Drupal module. It is a matter of configuration. You have to declare your url here in your gulpfile:
proxy: "my_custom_url".
Anyway, whatever works for you (or anybody else).

joelpittet’s picture

joelhsmith’s picture

How to I get Gulp to write console errors to the top of the page also?

FranCarstens’s picture

By the time I've completed upgrading Omega my client's run out of budget.

rajmataj’s picture

@FranCarstens,

You don't need to upgrade Omega in the first place, so no time is needed on your client's part unless they are specifically asking for this change. If what you have right now works, then there's nothing to do. LibSass, Gulp, etc are not requirements and are not unique to Drupal nor Omega. They are universal for working on all kinds of website projects, from hand-coded ones, to most CMS's. The newest Omega 'default' starterkit is simply taking advantage of this but doesn't require you to change.

pietpomp’s picture

Thx rajmataj, your 'plumber' solved my issues!
So please see my addition to your package, gulpfile and scss. I found using 'gulp-sass-glob-import' got my partials to work. Now I have gulp successful and resulting css similar to what compass compile use to do.

package.json - "devDependencies" gets this line added:
"gulp-sass-glob-import": "^0.1.0",

gulpfile.js gets this lines added:

var plumber = require('gulp-plumber');
var bulkSass = require('gulp-sass-glob-import'); // <--- this bit

then further down:

.pipe(sourcemaps.init())
.pipe(bulkSass ({ extensions: ['.scss'] }))   // <--- this bit
.pipe(sass(sass_config).on('error', sass.logError))

Now with @import "variables/*"; in my scss/mystyles.scss I get:
scss/variables/filename.scss create css/variables/filename.css but
scss/variables/_underscore.scss (and other partials) goes to css/mystyles.css

I had to do this as your #67 gave me partial and import errors
Now all good.

------ EDIT ----------

my mistake: This gives me 'double imports'.
a scss file with no underscore will actually create a the css folder tree and file, but will also end up in the mystyle.css file
----------- ARRRRGGG!

omahm’s picture

I got a work around based on the solution from @rajmataj and running on Ubuntu (docker/drude container)
It'll glob nested sass files on watch, just won't recognise new directories or files and works with singularitygs, breakpoint and compass.

package.json

{
  "name": "themename",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "sass:dev": "./node_modules/.bin/gulp",
    "sass:prod": "./node_modules/.bin/gulp sass:prod"
  },
  "dependencies": {
  },
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-sass": "^2.3.1",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-autoprefixer": "^2.3.1",
    "node-sass-globbing": "0.0.23",
    "gulp-plumber": "^1.0.1",
    "browser-sync": "^2.9.8",
    "singularitygs": "^1.6.2",
    "breakpoint-sass": "^2.6.1",
    "gulp-sass-glob-import": "^0.1.0"
  },
  "scripts": { "postinstall": "find node_modules/ -name '*.info' -type f -delete" }
}

Important

Note the lack of the compass-mixins package, You need to clone this repo into your node_modules directory:
https://github.com/tjenkinson/compass-mixins
This fixes the '@function compact issue' in compass lists.scss

gulpfile.js

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 bulkSass = require('gulp-sass-glob-import');
 
var sass_config = {
  importer: importer,
  includePaths: [
    'node_modules/breakpoint-sass/stylesheets/',
    'node_modules/singularitygs/stylesheets/',
    'node_modules/compass-mixins/lib/'
  ]
};
 
gulp.task('sass', function () {
  gulp.src('./sass/*.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(bulkSass ({ extensions: ['.scss'] }))
    .pipe(sass(sass_config).on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 version']
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', ['sass']);
}); 

gulp.task('default', ['watch']);

themename.styles.scss

@import "singularitygs";
@import "breakpoint";
@import "compass";
@import "variables/**/*.scss";
@import "abstractions/**/*.scss";
@import "base/**/*.scss";
@import "components/**/*.scss"; 

Needs a bit more work but it at least fixes some of the issues I was having, hope it helps.

karolus’s picture

cryx2's solution, #6, worked great for me.

I'll second that susy and breakpoint-sass should be included in the starter kit, as well.

adam1’s picture

Without importing compass compiling works, but with the line @import "compass"; in my styles.scss i get this error:
Error: File to import not found or unreadable: compass
What's wrong here? Is there a more step-by-step guide out there for not-so-tech-savvy folks?

joelhsmith’s picture

@adam1 First question, its hard to tell without knowing about your whole setup. I think it is not working because it is not included, as it says. There are a few ways to get Compass included. I will tell you how I am doing it. In your Package.json file you will need to add it in your "dependencies"... example:

"dependencies": {
    "gulp": "https://registry.npmjs.org/gulp/-/gulp-3.9.1.tgz",
    "compass-mixins": "^0.12.7",
    "yourOtherDependencies": "^6.6.6"
},

Then in your gulpfile.js add the location to your config.

var sass_config = {
  importer: importer,
  includePaths: [
    'node_modules/compass-mixins/lib/',
  ]
};

Then re-run your install to get that added.

You will also need to add the compass as an include to your blaublau.styles.scss

@import "../node_modules/compass-mixins/lib/_compass.scss";

I also add that sass_config in as a .pipe in one of my gulp.tasks. I have no way of knowing what tasks you have. But you would need to add a reference to it .pipe(sass(sass_config).on('error', sass.logError))

If you are successful you will probably run into another error: "Functions may not be defined within control directives or other mixins". You can read about that here:
http://stackoverflow.com/questions/36775755/functions-may-not-be-defined...

This is just one way to add Compass functionality. There are other ways.

The second question about step-by-step guide, I suggest finding tutorial about how Gulp works outside of Omega, before trying to tackle it inside an Omega subtheme. It will simplify the learning process a little bit. This stuff is pretty complicated.

vagelis-prokopiou’s picture

adam1, this thread includes quite detailed instructions, and setup examples.
Read the thread carefully and try executing the setup step by step. I am pretty sure you will get around it.

adam1’s picture

@joelhsmith and @vagelis; thank you, I followed your suggestions and got it finally to work!

adam1’s picture

I tried to build a custom layout for my omega subtheme with gulp/libsass according to this tutorial (I just cloned the in omega included "simple" layout and renamed all the files). Gulp is watching the .sass file of my new layout and recognizes when there are changes ("starting 'sass'" and "finishing 'sass'" in the terminal output), but there are no css files written; i also realised, when writing some syntactically wrong sass code on purpose, the compiler doesn't complain at all in contrast to my main .sass file, where the compiler throws out errors. What might be the reason?

vagelis-prokopiou’s picture

@adam1, I suppose that either the destination in your gulpfile.js is not set correctly, or that the globbing in not working for some reason. I suggest that you take a closer look in the setup of your gulpfile.js.

bramvandenbulcke’s picture

@adam1, layouts are indeed confusing!

When using the gulpfile.js from post #20, you need to have a subfolder /layouts in the sass folder, with a separate folder for each layout, for example /layouts/layoutname. Then, in the file layoutname.layout.scss you need to @import the other sass folders as follows:

@import "singularitygs";
@import "compass";
@import "breakpoint";

@import "./sass/variables/**/*.scss";
@import "./sass/abstractions/**/*.scss";
@import "./sass/base/**/*.scss";
@import "./sass/components/**/*.scss";
realkevinoshea’s picture

I did a writeup for those who are interested on how to switch to Libsass/Grunt on the dusty starterkit (keeping all the susy stuff needed for layouts working).

osopolar’s picture

Finally coming back to my issue while working again with Omega 4 for a redesign. I managed to change from ruby to libsass, the only thing I was missing was browser-syncs auto css injection, instead of a page, reload … as that really speeds up theming. It took me a while to fix that. There are two steps to get that work:

1. Add following hook_css_alter() to the theme:

/**
 * Implements hook_css_alter().
 *
 * Disables @import CSS tags for compatibility with BrowserSync if css
 * aggregation is disabled – that way it won't affect the production site.
 *
 * @see https://github.com/BrowserSync/browser-sync/issues/10
 */
function ellviva2_css_alter(&$css) {
  // Aggregation must be disabled.
  if (!variable_get('preprocess_css')) {
    // Disable @import on each css file.
    foreach ($css as &$item) {
      // Compatibility with disabling stylesheets in theme.info (263967).
      if (file_exists($item['data'])) {
        $item['preprocess'] = FALSE;
      }
    }
  }
}

2. Use browserSync.stream() instead of browserSync.reload():

// Compile sass into CSS & auto-inject into browsers
// @see https://browsersync.io/docs/gulp#gulp-sass-css
gulp.task('sass', function() {
    return gulp.src("scss/**/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("css"))
        .pipe(browserSync.stream());
});

BTW: There might be two different gulp tasks, one for development (with source maps) and one for production, with less debugging information. Check for example the gulp file of the radix theme http://cgit.drupalcode.org/radix/tree/gulpfile.js?id=41d74e8