CODEWITHSUNDEEP
variableslessrenamegulpmultitasking
adrigm
adrigm

Reputation: 81

Generate multiple stylesheets to gulp

I want to run a task gulp generating multiple stylesheets less. all are equal only changes one of theimport containing values of different variables.

| -- src/
     | -- less/
          | -- colors/
               |-- blue.less
               |-- red.less
          | -- main.less
| -- dist/
     | -- css/
          | -- blue.css
          | -- red.css

The main.less file looks like this:

@import <color>

/* more code... */

Where should be replaced by: red.less, blue.less...

Once the corresponding import made should generate the css files: red.css, blue.css...

Upvotes: 2

Views: 527

Answers (1)

adrigm
adrigm

Reputation: 81

I used a loop, but not if it is the best solution:

gulp.task('less', function() {
    for (var color in data.colors) {
        gulp.src(['src/less/colors/' + data.colors[color] + '.less', 'src/less/reason.less'])
        .pipe(concat('style-' + data.colors[color] + '.less'))
        .pipe(less({
            paths: [path.join(__dirname, 'src', 'less')],
            plugins: [autoprefix, cleancss]
            
        }))
        .pipe(gulp.dest(path_css));
    }
});

Upvotes: 2

Related Questions