Menu
  • HOME
  • TAGS

Getting Libsass Gulp Susy to work together

Tag: gulp,susy,libsass

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/

Best How To :

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.

Error installing Gulp

node.js,terminal,gulp,taskmanager

Other answers are bypassing these issues by the use of sudo or su root. I personally don't recommend this. The reason it works is because on OSX the global npm module directory has stricter permissions. Running your commands with root privileges just to get around permissions issues is likely only...

Gulp.js serve src files WITHOUT browserSync?

javascript,node.js,gulp,gulp-watch,browser-sync

Here's how to deprecate BrowserSync in favor of gulp-connect, a simple and stable Gulp plugin to run a webserver (with LiveReload). New gulp/server.js: 'use strict'; var gulp = require('gulp'); var util = require('util'); var connect = require('gulp-connect'); module.exports = function(options) { function createServerTask(name, pre, root) { gulp.task(name, pre, function() {...

How to get rid of use strict in gulp file with JavaScript

gulp

Looks like your regexp has a loose single quote in it. .pipe(replace(/"use strict"'/g, ';')) here ----^ This regexp will match 'use strict' and "use strict" /('|")use strict\1/g ...

Heroku deploy of Gulp + Compass is not working at boilerplate stage

heroku,gulp,compass

Your ruby/compass installation on Heroku must be out of date. I had to update mine to 2.2.0 for compass to work but i am using a custom buildpack as well for Grunt-NodeJS-Compass https://github.com/devakone/heroku-buildpack-nodejs-grunt-compass You can take a look at the https://github.com/devakone/heroku-buildpack-nodejs-grunt-compass/blob/master/bin/compile file line 153 export GEM_HOME=$build_dir/.gem/ruby/2.2.0 Make sure your GEM_HOME...

How to configure port in browser-sync

node.js,gulp,browser-sync

Answer based on the documentation links (link1, link2). You are using browser-sync version 2.0+, they have a different recommended syntax. Using that syntax your code could be like this: // require the module as normal var bs = require("browser-sync").create(); .... gulp.task('serve', [], function() { // .init starts the server bs.init({...

Gulp / Bower - maintaining consistency

node.js,gulp,bower

Figured it out, altered code looks like this: "use strict"; var gulp = require('gulp'); var fs = require('fs'); module.exports.getBowerRC = function () { var bowerRC = JSON.parse(fs.readFileSync('./.bowerrc', 'utf8')); return console.log(bowerRC); } ...

Gulp task for multiple files

node.js,gulp

You could try something like this, although it requires manually entering an array of your projects. gulp.task('css', function() { var projects = ['a','b','c']; projects.forEach( function(proj) { gulp.src(['global.' + proj + '.css', 'addons/tool*.' + proj + '.css', '!*.min.css']) ... }); }); ...

Object property is undefined

javascript,object,gulp

Add module.exports to your gulpfile.config.js, like so # gulpfile.config.js var config = { src_path: "Client/" }; module.exports = config module.exports is the object that's returned as the result of a require call. ...

Gutters in Susy remaining intact as spacing between elements. Bonus: wider doesn't work

susy-compass,susy-sass,susy,susy-next

Add the no-gutters keyword to your wide span. While wide tells it to add more space to the span width, it does not automatically remove the gutter output. @include span(1.75 wide of 9 no-gutters);...

Webpack Uglify plugin returns “Killed” on Ubuntu

gulp,webpack

As @barbuza suggested, it was a memory issue. I too am using a Digital Ocean VPS that only has 512 MB of RAM (yes, I'm cheap). That's not enough for webpack's uglify plugin. Adding 2GB of swap space on the server solved the issue. I followed this article to set...

Trying to run a Gulp script that needs ruby on PHPStorm

ruby,shell,sass,gulp,phpstorm

Please make sure that Ruby is in your system PATH - in Control Panel, go to System properties, Advanced, press Environment variables, in System variables section select PATH and append C:\Ruby21\bin to it. Make sure to restart PHPStorm after changing PATH

CDATA showing up in my HTML page. Why?

javascript,jquery,html5,gulp,cdata

I think that the problem is the page speed script, inside that script i can see these lines: <script pagespeed_no_defer="">//<![CDATA[ (function(){var g=this,h=function(b,d){var a=b.split("."),c=g;a[0]in c||!c.execScript||c.execScript("var "+a[0]);for(var e;a.length&&(e=a.shift());)a.length||void 0===d?c[e]?c=c[e]:c=c[e]={}:c[e]=d};var l=function(b){var d=b.length;if(0<d){for(var a=Array(d),c=0;c<d;c++)a[c]=b[c];return a}return[]};var m=function(b){var...

How do I save a result of javascript to a file in gulp

javascript,json,gulp

This should probably work like this (it's untested): var js = require('./js-file.js'), fs = require('fs'); fs.writeFileSync('./output.json', js.returnMethod()); You could append it to an existing task or add a separate, dedicated one....

How do I compile mustache templates partials with gulp?

gulp,mustache

So I figured out the solution. In order to make gulp watch for mustache changes I had to change gulp.watch to gulp.watch('./templates/**/*.mustache', ['mustache']); And in order to make gulp-mustache-plus see the partials I need to manually create an object with partial name and path and pass it as a third...

Why do I have to use vinyl-source-stream with gulp?

javascript,gulp,browserify

I think that reading this article gulp The vision, history, and future of the project can help you to clarify a few concepts. Basically you can say that vinyl-source-stream convert the readable stream you get from browserify into a vinyl stream that is what gulp is expecting to get. A...

Start hexo to generate a watch in a gulpfile.js?

gulp,hexo

You can pass arguments in the second parameter. For example: hexo.init.then(function(){ return hexo.call('generate', {watch: true}); }).catch(function(err){ console.log(err); }); ...

Using GULP to load Jquery CDN and other external JS sources

javascript,jquery,gulp

As far as I know, Gulp is a helper to manage your project locally, not by connecting to external sources. A common approach would be to manage current library versions by a package manager like Bower – there is an integration bridge available (didn't test it though, I just update...

Angular 2/Typescript: require not found

typescript,gulp,angular2

I was not able to get that working but was able to get it working with gulp-traceur. Here is my gulpfile. var gulp = require('gulp'); var gulpTraceur = require('gulp-traceur'); var through2 = require('through2'); var gutil = require('gulp-util'); var sourcemaps = require('gulp-sourcemaps'); var copy = require('gulp-copy'); gulp.task('compile',function() { return gulp.src("./*.es6.js") .pipe(sourcemaps.init())...

Configure Gulp 'watch' task for very basic server-restart (Node JS)

node.js,gulp,gulp-watch

So there are a lot of great tutorials out there, but IMHO they seem to not break down the step-by-step details that a newbie to Gulp like myself is looking for. This post assumes the reader has a basic understanding of how to set up paths with node JS, and...

Inject variable into html via Gulp Task

gulp,gulp-inject

you can use gulp-replace gulp.task('templates', function(){ gulp.src('template.html') .pipe(replace(/$$myvar$$/g, 'release')) .pipe(gulp.dest('build/file.txt')); }); above task is replacing $$myvar$$ by release in template.html...

Gulp task runs much faster without 'return' statement - why is that?

build,return,task,gulp

After some investigation I found that when return is used on Gulp task it's not actually slower at all, it just returns correct time it took to finish the task. It only felt faster since without return statement it essentially returned result as completed almost instantly, so the task time...

Trying to understand a Gulp build error - Emitting error involving zlib.js & Gzip

node.js,gulp

Ok, I figured it out by just commenting out some logic. Unfortunately, it was a conflict with the gulp-size module. I was passing in the an object as an argument to gulp-size as the following { showFiles: true, gzip: true}. I don't know why it was causing issues now considering...

Memory leak caused by gulp & nodemon

node.js,gulp,mean,nodemon,gulp-livereload

Looks like the issue is this .on('start', ['watch']) .on('change', ['watch']) .on('restart', function () { console.log('restarted!'); }); Everytime a file changes, you're triggering watch which attaches additional listeners. After a few restarts, you will exceed the max number of listeners. This is a standard nodemon setup, and is all you need...

Not able to access variables in required file

javascript,gulp,require,browserify

Without custom logic, it's not possible to achieve what you want. However I believe you could find a compromise by using ES6 modules instead of CommonJS modules. You would be able to write export var test = 'test'; which declares and exports a variable test. You can then import it...

Gulp copy single file (src pipe dest) with wildcarded directory

node.js,gulp

Use gulp-flatten var gulp = require('gulp'); var flatten = require('gulp-flatten'); gulp.task('default', function(){ return gulp.src('./dir1/dirv-*1/test.txt') .pipe(flatten()) .pipe(gulp.dest('dir2')); }); ...

Utilising the output of two previous gulp streams

javascript,stream,gulp

Using eventStream.merge is not required. Simply output the result of the CSS and the JS processing steps into a region of memory visible by the final step, and then configure the gulp dependencies accordingly. Something like so: const sharedMemory = {}; gulp.task('css', partial(getCss, sharedMemory)); gulp.task('js', partial(getJs, sharedMemory)); gulp.task('inline', ['css', 'js'],...

Different gutters with susy sass

sass,compass,susy-compass,susy

You can change the layout like this @include with-layout(12 1/8 fluid float after) { .box-5 { @include span(2 of 12); } .box-6 { @include span(10 of 12 last); } } Where the 1/8 is the gutter width....

Multiple React components in a single module

reactjs,gulp,browserify

I have put multiple components in one file and export the object like you suggested. module.exports = { comp1: Component1, comp2: Component2 } Then where they are used do var comp1 = require('your/path/to/components').comp1; var comp2 = require('your/path/to/components').comp2; ...

Code breaks after using gulp-uglify : Ionic Framework

ionic-framework,gulp,ionic

add ng-annotate or format properly your injection with, for example ["$scope",function($scope){ }] instead of just function($scope) its a common mistake / reuirement for angularJS minification / uglification...

sass file not compiled by gulp

css,node.js,sass,npm,gulp

You are not telling gulp to watch for sass file. On this line: gulp.src('style.css') You are specifying a css file, not a scss file. Change it to : gulp.src('style.css') Also, there is no output route specified. This line: .pipe(gulp.dest('')); Should contain your destiny route, and its currently empty. So, for...

Ignore certain Gulp-less errors, or prevent it from attempting to call @imports with css keyword

fonts,error-handling,less,gulp

Came across this same error last Friday also. I think the main issue here is that making an HTTP call to fonts.com (fast.fonts.net) returns a 500 error. To fix this we're using HTTPS which is working as expected. I'm not sure why HTTP throws a 500 error but maybe they're...

Font symbols don't display correctly with css generated from gulp-iconfont

javascript,css,svg,gulp,icon-fonts

In JavaScript, when you have a backslash followed by digits, you are creating an octal escape sequence. The number after the slash needs to be in base 8 (octal). The codepoint 57345 should be given as "\160001". You can also do hex escape sequence by using the "\u" prefix. So...

Difference between bower, browserify, requirejs, webpack?

javascript,requirejs,gulp,bower,browserify

browserify, requirejs, webpack are all module loaders both AMD and CommonJs are types of modules many javascript libraries such as JQuery can be loaded as modules. Require has been around for a while and it's IP is under the DOJO foundation, Browerify is gaining in popularity mainly due to server...

Get an array of file names without extensions from a directory in Gulp?

npm,gulp

You can do it easily with glob, here is a code doing what you want. var glob = require('glob'); var path = require('path'); var modules = ['main-module']; var helpers = []; var dialogs = []; glob.sync("@(helpers|dialogs)/*.js") .forEach(function(file) { var module = path.basename(file, path.extname(file)) modules.push(module); switch(path.dirname(file)) { case 'helpers': helpers.push(module); break;...

Gulp Watch Isn't Watching

gulp

I figured it out. A syntax error: // Watch Files For Changes gulp.task('watch', function() { gulp.watch('scss/*.scss', ['sass']); }); Should be: // Watch Files For Changes gulp.task('watch', function() { gulp.watch('sass/*.scss', ['sass']); }); ...

gulp concat after sass

sass,gulp,concat,gulp-concat

gulp-concat will only concat the files that were specified by gulp.src within the current stream. If you've only specified app.scss, you can't concatenate additional files on that stream. That doesn't mean you can't create a new stream that contains the app.scss compiled output and includes animate.css as well. To do...

How to gulp ignore files with a specific pattern?

gulp

Use an exclamation point. You can do gulp.src(['src/*.styl', '!src/_*.styl']); or gulp.src(['src/*', '!src/_*']); Answered here: Excluding files/directories from Gulp task...

Load libraries with wiredep

angularjs,gulp,bower

I'd say your tasks are executing out of order as you aren't returning any streams or executing any callbacks in some of them (see the note here ~ https://github.com/gulpjs/gulp/blob/master/docs/API.md#deps) This probably means your wiredep task doesn't have ./app/index.html to work on. I'd move both functions into the one task, eg...

How can I achieve this using gulp?

javascript,node.js,stream,gulp

This seems quite interesting to achieve and gulp has no limitations at all. I will give you detailed example how I have managed to accomplish such a task a while ago. Let assume that you have directoryA. Subdirectories childA, childB and childC are contained into directoryA. So basically your tree...

Gulp task does not run - becomes a callback for other tasks instead

gulp

Make sure that a, b and c either return something or execute the callback. Try the following example: gulp.task('a', function (done) { done(); }); gulp.task('b', function (done) { return gulp.src('.'); }); gulp.task('c', function (done) { done(); }); gulp.task('stuff', ['a', 'b', 'c'], function () { console.log("success"); }); Here is the output...

How to set up wiredep with gulp and jade

javascript,jade,gulp,wiredep

I set up a branch in the github here for those interested in seeing the file structure and the full gulpfile.js What I ended up doing is installing all of the bower_components in my dist folder. I also put my bower.json there. For the wiredep and jade magic I added...

Elements not sitting side by side (Complex Grid) There is space, but acts as if there isn't

html,css,css3,layout,susy

If you float the border_img right instead of left (with some right margin to push it off the edge), everything else should be able to flow around it. You might also want to use a grid with more columns. If you're always having to split columns into fractions, it's not...

Strange npm behavior when installing packages like grunt

node.js,gruntjs,npm,gulp,bower

Ubuntu package nodejs provide a binary as a /usr/bin/nodejs, not a /usr/bin/node, so most of cli tools can't find it. To solve the problem you need to make a symlink: sudo ln -sT /usr/bin/nodejs /usr/bin/node ...

How do i go to parent directory when using __dirname?

javascript,node.js,directory,gulp,gulp-karma

I had to use path package to resolve this issue . var path = require("path"), fs = require("fs"); gulp.task('test', function (done) { karma.start({ configFile: fs.readFile(path.join(__dirname, '../test/', 'karma.conf.js')), singleRun: true }, done); }); ...

Getting gulp-sourcemaps to map correctly with a series of plugins

gulp,gulp-uglify,gulp-sourcemaps

I ended up going with the second option I mentioned - that is, generate the minified files in the distributionFolder (now settings.dest) and then moved them with separate copy and delete tasks. var gulp = require('gulp'), uglify = require('gulp-uglify'), jshint = require('gulp-jshint'), stylish = require('jshint-stylish'), rename = require('gulp-rename'), sourcemaps =...

How to include jQuery to my app?

javascript,jquery,angularjs,gulp,bower

The problem is that dear you are using Bootstrap js which require jquery. On Angular-ui website clearly said only required bootstrap css and anugular js. The only required dependencies are: AngularJS (requires AngularJS 1.3.x, tested with 1.3.13). 0.12.0 is the last version of this library that supports AngularJS 1.2.x. Bootstrap...

Streaming directly to gulp.dest

javascript,node.js,gulp

You can use vinyl-source-stream to convert your stream into a gulp-compatible stream. Get it: npm install vinyl-source-stream --save-dev Usage: // gulpfile.js var source = require('vinyl-source-stream'); gulp.task('default', function() { var myModule = require('./some-module'); myModule() .pipe(source('someOtherFile.txt')) .pipe(gulp.dest('./')); }); The parameter to source() will be the filename used by gulp.dest()....

How can you pipe a readable stream to gulp.dest()?

node.js,gulp

Gulp works with Vinyl streams: var gulp = require('gulp'), stream = require('stream'), source = require('vinyl-source-stream'); var readable = new stream.Readable; readable.push('Hello, world!'); readable.push(null); readable .pipe(source('test.txt')) .pipe(gulp.dest('.')); A Gulp stream normally begins with some file or files as source, so you need to wrap that readable stream into a Vinyl stream...

Gulp task not accessing karma.conf.js file

javascript,node.js,gulp,karma-runner,gulp-karma

configFile property is just a file name. So when you provide __dirname + '../Tests/karma.conf.js' it corresponds to the actual file location. You can actually do: configFile: path.join(__dirname, '../Tests/karma.conf.js') With fs.readFile you read a file and provide its contents to the karma runner. I am not sure why you are not...

Use Gulp-imagemin with imagemin-jpeg-recompress plugin?

jpeg,gulp,gulp-imagemin

I'm going to answer my own question. I could be wrong but it seems it's an easy process. Simply require the plugin (in this case, I want to use imagemin-jpeg-recompress plugin). Then specify the plugin to use within imagemin via the use property of imagemin. I believe this will override...