Search code examples
javascriptnode.jsgulpgulp-less

How can I merge 2 vinyl-fs with gulp to not create a temporary file from a partial pre-compiling task


In a goal to harmonize the style of an SPA application I want to define somme style variable in a JSON file and use it in my Less compilation.

Basically it can work like this:

gulp.src('variables.json')
    .pipe(function () {
        // process to create a less file from json
    })
    .pipe(gulp.dest('less/_variable.json.less'))
    .on('end', function(){
        gulp.src(['less/*.less', '!less/_*.less'])
            .pipe(plugins.less())
            .pipe(gulp.dest('css'))
    });

And in less:

@import "_variables.json.less";
// Other things

Is-it possible to do it without create an intermediary file before doing the less compilation ? Is-it possible to merge the result of the first task and the Less source into a same vinyl fs to do the Less compilation ?

Best regards.


Solution

  • Thanks sven-schoenung to you comment. But I don't want start the development of a Less plugin for now... So, I adopted another approach. I developed a gulp plugin which preprocess the less file to match a @json-import directive to inject the generate variables in the vinyl Less file.

    It seems work well. So I published it on NPM.

    https://www.npmjs.com/package/gulp-less-json-import