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

Gulp rename file to change case only
local gulp not found after installing globally and locally
Gulp watch only new SCSS files
Gulp won't run project
How to use Basic Authentification with gulp-sftp?
Gulp zip missing some files in a folder
gulp sass is not working showing error
How to fix plumber cannot pipe to undefind with pug
Cannot find module 'laravel-elixir' when I type 'gulp' in my laravel project dir
Unable to build Sitecore Habitat solution
gulp - Error events.js:72 throw er; // Unhandled 'error' event
Failed to list gulp tasks: TypeError: Cannot read property 'transformers' of undefined
Is there a way to generate a new HTML file, ideally utilising a gulp plugin?
Injecting with gulp
How to set gulp.dest() outside the parent folder
How to print to two directories with one render with nunjucks-render

Categories

HOME
ftp
itunesconnect
alasql
ssh
apache-storm
arcgis
x86-64
lithium
hiveql
sdk
collision-detection
cdn
google-api-oauth
ephesoft
rtc
google-app-maker
velocity
javascript-debugger
aggregate
pylint
jq
formulas
connectiq
handle
symlink
gulp-jshint
sqldependency
intermec
textview
ragel
perf
android-databinding
lighting
mapquest
observer-pattern
jquery-ui-slider
contenteditable
irr
paperclip
wufoo
synchronized
react.rb
vertex
perldoc
jcifs
bioperl
fckeditor
multi-targeting
cc
robotc
angular-i18n
camellia
overlapping
android-contentresolver
windows-kernel
syncano
litedb
glog
genome
sicstus-prolog
pymol
alpha-beta-pruning
apache-pivot
step
atg-dynamo
android-relativelayout
farpoint-spread
pidgin
node-mongodb-native
imaplib
lastinsertid
mobile-robots
architectural-patterns
biztalk-deployment
screensharing
freeimage
motordriver
waveout
filedialog
reflexil
datasheet
advanceddatagrid
soapexception
overlays
cinder
arraycollection
jquery-attributes
pixel-bender
script-tag
unauthorized
urlscan

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