如何使用gulp.js从内存中的string生成一个SCSS文件?

我想生成一个包含来自JSON文件的variables定义的scss文件。 我能够将JSON文件读入包含对象的Javascriptvariables。

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

我想从中产生的是一个包含的scss文件

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

所以我假设我首先需要一个函数来创buildstring:

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

我现在需要的是能够将这个string写到一个名为_colors.scss的文件中,我想指定一个目录。

我一点也不知道如何用我们已经在使用的一点一滴做到这一点。 我假设,这可能是一个相当简单的任务。 任何人都可以把我推向正确的方向?

另外,在文件生成过程中会产生什么样的结尾?

编辑:我需要把它作为一个吞咽任务到我们的观察任务。 另外,我还需要确保这个文件生成任务已经完成,然后再处理SCSS以从中生成CSS。

正如评论中指出的那样,你并不是真的需要Gulp。 但是,您可以很容易地将解决scheme集成到您的吞咽观察任务中。 我掀起了一个快速的例子,演示如下:

 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'])});