How to generate an SCSS file from a string in memory using gulp.js?

Question

I would like to generate an scss file containing variable definitions from a JSON file. I am able to read the JSON file into a Javascript variable containing an object.

var colors = {
    "primary-color": "#1d1d1b",
    "secondary-color": "#558ed5",
    "brand-color-a": "#1d446f",
    "brand-color-b": "#9b9b99"
}

What I would like to generate from this is an scss file containing

$primary-color: #1d1d1b;
$secondary-color: #558ed5;
$brand-color-a: #1d446f;
$brand-color-c: #9b9b99;

So I am assuming I first need a function that does the creation of the string:

var scssString = "";
function transformJSONtoSCSS(colors) {
    Object.keys(colors).forEach(function(key) {
        var value = colors[key];
        scssString += "$" + key + ": " + value + ";\n";
    }
    return scssString;
});

What I need now is the ability to write this String to a file called _colors.scss in a directory I'd like to specify.

I have no clue whatsoever how to achieve this with gulp which we are already using. I'm assuming though that this is probably a fairly easy task. Can anyone please push me in the right direction?

Also, what sort of line-endings will \n result in in the file being generated?

Edit: I need to integrate this as a gulp task into our watch task. Also, I need to assure that this file generation task is being accomplished before SCSS is then processed to generate the CSS from it.

Possible duplicate of [Writing files in Node.js](http://stackoverflow.com/questions/2496710/writing-files-in-node-js) — Sven Schoenung, Sep 05 '16 at 16:42
Since I want to integrate this as a gulp task into our watch task, your linked page probably does not answer this specific question. Or am I missing something? Also, I need to assure that this file generation task is being accomplished before SCSS is then processed to generate the CSS from it. — connexo, Sep 05 '16 at 16:49
There is nothing gulp-specific about your question. Writing a string to a file in gulp is exactly the same as writing a string to a file in node.js. — Sven Schoenung, Sep 05 '16 at 16:52

score 1 · Accepted Answer · edited Sep 06 '16 at 13:09

1

As noted in the comments, you don't really need Gulp. However, you can integrate the solution into your gulp watch task quite easily. I whipped up a quick example demonstrating this below:

var fs = require('fs');

var colors = {
    "primary-color": "#1d1d1b",
    "secondary-color": "#558ed5",
    "brand-color-a": "#1d446f",
    "brand-color-b": "#9b9b99"
}

function transformJSONtoSCSS(colors) {
  var scssString;
  Object.keys(colors).forEach(function(key) {
    var value = colors[key];
    scssString += "$" + key + ": " + value + ";\n";
  }
  return scssString;
}

gulp.task('color_scss', function() {
  var scssString = transformJSONtoSCSS(colors);
  fs.writeFileSync("/my/dir/path/_colors.scss", scssString); 
});

// Our watch task - notice our deps.
gulp.task('css:watch', ['css', 'color_scss'], function() { gulp.watch("assets/**/*.css", ['css'])});

edited Sep 06 '16 at 13:09

connexo

53,704
14
91
128

answered Sep 05 '16 at 18:17

Braden1996

108
1
7

Bad example. `fs.writeFile()` is async so you need to signal async completion in your task. Otherwise any task that depends on `color_scss` might run **before** `fs.writeFile()` has finished. – Sven Schoenung Sep 05 '16 at 18:39
@SvenSchoenung Can you help with that in Braden1996's code example? – connexo Sep 06 '16 at 08:07
Would using `fs.writeFileSync` solve the problem mentioned by @SvenSchoenung? – connexo Sep 06 '16 at 08:17

How to generate an SCSS file from a string in memory using gulp.js?

1 Answers1