gulp


Getting Libsass Gulp Susy to work together


I have just spent the last 5 days playing with this and trying to get the following to work together:
¬ Libsass
¬ Susy
¬ Gulp
But now I have it working I have just gone for 45s to 700ms This is something I feel I should share.
Initial Problem
Gulp
gulp.task('sass', function () {
return gulp.src('./frontend/sass/style.scss')
.pipe(sass({
'require':'susy'
}))
.pipe(gulp.dest('./app/www/css'))
});
Sass
#import "susy";
Inital Error
[23:58:08] Starting 'sass'...
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: file to import not found or unreadable: susy
Current dir: C:/var/www/www.hutber.com/frontend/sass/
The complete working setup
package.json
"devDependencies": {
"gulp": "~3.8.10",
"gulp-sass": "~1.3.2", //this installs libsass for us
"gulp-sourcemaps": "~1.3.0",
"gulp-plumber": "~0.6.6",
"susy":"~2.2.2"
}
Gulp sass Task
var gulp = require('gulp');
var sass = require('gulp-sass');
var handleErrors = require('../util/handleErrors');
var sourcemaps = require('gulp-sourcemaps');
var minifyCSS = require('gulp-minify-css');
//libsass
gulp.task('sass', function () {
return gulp.src('./frontend/sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [
'./node_modules/susy/sass' //required for sass
]
}))
//.pipe(minifyCSS()) //move to prod settings
.pipe(sourcemaps.write('./app/www/css')))
.pipe(gulp.dest('./app/www/css'))
});
Sass
#import "susy";
$susy: (
global-box-sizing: border-box,
use-custom: (rem: true),
columns: 12,
gutters: (1/4),
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
)
);
Errors
You will need to do the following to avoid the may only compare numbers error when running the task
Update node-sass's package.json
I had to update libsass's dependency as follows:
gulp-sass 1.3.1
¬ node-sass 2.0.0-beta
¬ libsass 3.1.0-beta - This needed updating to libsass 3.1.0-beta.2
The above will become redundant as soon as node-sass update their dependency to use the newest libsass
Last Step
Then inside my sass use (1/4) rather than just 1/4. This will force it to be treated as a number. Bug taken from https://github.com/sass/libsass/issues/590
You should be able to run gulp sass without any errors.

Related Links

How to use Polymer for live-reloading of code
Browser-Sync not injecting CSS into Browser
why do these gulp tasks not run in serial?
GulpFile not Generating CSS Files
Gulp wait until other function is done
Compile excess file scss to css
convert gulp.src stream to array?
`gulp-cachebust`: difference between CacheBuster.resources() and CacheBuster.references()?
Polymer: two gulp errors at build time: 'async completion' and 'apply' property
Jasmine Protractor Reporter
`gulp.src` vs `vinyl-source-stream`?
Multiple Aurelia Apps Side by Side
EACCES: permission denied on gulp css minify, same src and dest
BrowserSync.reload causes “write after end” during gulp task
Gulp only runs dependent task but not main task [duplicate]
Move font awesome fonts from bower using gulp task

Categories

HOME
cluster-analysis
cxf
casting
microcontroller
glsl
jquery-plugins
ms-application-insights
scapy
rethinkdb
doctrine2
google-api-oauth
genexus
segmentation-fault
openbsd
select2
suitecrm
comma
lambda-calculus
openstack-horizon
amazon-data-pipeline
css-float
powerpivot
conditional-formatting
summernote
computation-theory
policy
ppp
sasl
marionette
boosting
restangular
hierarchy
scene7
rtos
wit-ai
abide
realloc
mongoid5
scalamock
mybatis-generator
armadillo
aspose.pdf
blueimp
ng-lightning
idea-plugin
tapply
aspnetboilerplate
peerjs
amazon-fire-tv
google-cloud-shell
dotnet-cli
jenkins-docker
webmatrix
hellosign
programming-pearls
totalview
critical-section
acceleo
pyautogui
scanf
papyrus
require-handlebars
tinybox2
hoare-logic
boost-propertytree
archiva
jmh
innertext
custom-build-step
producer-consumer
gulp-cdnizer
database-project
transbase
personality-insights
android-togglebutton
om
pushwoosh
cakephp-2.6
tidesdk
beagleboard
asp.net-2.0
chrome-mobile
douglas-peucker
random-access
grunt-contrib-connect
breeze-sharp
switchpreference
webshim
sigma-grid-control
farpoint-spread
html5-filesystem
vbaccelerator
imaplib
code-complete
grape-api
static-class
ia-32
dynamic-expresso
mosix
select2-rails
bho
gpl
states
inserthtml
copyfile
funambol
method-call
moss2007-security
nbehave
n2
quazip
http-response-codes
lgpl
iphone-maps
p4.net
system-analysis
expander
high-load
memory-consumption

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App