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 - The term 'gulp' is not recognized as the name of a cmdlet
Gulp complie only changed sass files in combination with compass
pass variable from gulp file to mocha test file
browserSync.reload() hangs after reloading browser
Gulp dest at same level src
Gulp LESS + autoprefix + sourcemaps frustration
Gulp optimize images with imagemin
Cannot get on http://localhost:3000/
pass unique json data into handlebar templates using gulp-compile-handlebars
Is there a gulp plugin that can create empty folder / sub-folder structures?
How do I copy partial paths into the gulp destination [duplicate]
How could i code this more efficiently? - a gulp task
Gulp not executing the zip task
GULP Sprite create SCSS
gulp-stubby-server dosen't work well
How to get Gulp4 to wait for file write tasks to compete?

Categories

HOME
qlikview
actionscript-3
model-view-controller
cors
postgresql-9.3
casting
xamarin.forms
intellisense
nagios
boxplot
stdout
perl6
meson-build
zabbix
angularjs-ng-repeat
rename
runtime
suitecrm
guidewire
http-status-codes
drush
xmlhttprequest
watson-dialog
element
swift3.1
webseal
loss
owncloud
ofbiz
django-rest-auth
rndis
windowserror
uibarbuttonitem
semantic-ui-react
textview
multilanguage
imdb
snapkit
rtos
apache-falcon
minitest
leaderboard
rythm
const
nsdateformatter
aura-framework
colorbox
text-extraction
amazon-fire-tv
angular-fullstack
reqif
react.rb
extjs3
activesupport
sharpssh
xamarin-test-cloud
recursive-query
sharing
directinput
universe
joystick
xcode7.1
particle-system
vitamio
kik
supervised-learning
usps
periodic-processing
music-player
nonblocking
ruby-1.8.7
recode
gitk
log4cxx
eaaccessory
glog
avd
strcpy
chrome-mobile
applinks
crtdbg.h
indic
fscanf
pyalgotrade
yandex-api
git-subtree
android-jack-and-jill
db2-connect
mdp
logo-lang
mahara
thucydides
randomaccessfile
mencoder
myrrix
codeigniter-form-helper
msbuild-task
libx264
winrt-async
jmesa
maven-eclipse-plugin
execjs
linq-to-mysql
hp-trim
data-formats
qlibrary
vista64

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