Dynamic gulp.dest path for modular app

Question

I'm trying to setup gulp for a modular application. In my public folder, I have modules each with their own src/sass and dist/css folders. I want to transform and transfer the sass files from src/sass to their respective dist/css folder. There could also be more folders under src/sass like src/sass/admin and src/sass/user with .scss in them. These folder structure should also be replicated in the dist/css like so: dist/css/admin and dist/css/user. These additional folders depends on the modules.

The problem is that the Modules could be removed and added so I don't want reference the module name directly in the gulp.dest path. I need it to be dynamic depending on the gulp.src path.

Let's say I have a folder structure as shown below.

public
    |-- Modules
        |-- Module1
        |   |-- dist
        |   |   |-- css
        |   |   |   |-- style.css
        |   |-- src
        |       |-- sass
        |           |-- style.scss
        |-- Module2
        |   |-- dist
        |   |   |-- css
        |   |       |-- admin
        |   |       |   |-- style.css
        |   |       |-- user
        |   |           |-- style.css
        |   |-- src
        |       |-- sass
        |           |-- admin
        |           |   |-- style.scss
        |           |-- user
        |               |-- style.scss
        |-- Module3
            |-- dist
            |   |-- css
            |       |-- style.css
            |-- src
                |-- sass
                    |-- style.scss

Here are the gulp tasks I've tried.

1. Using path.join

gulp.task('sass-modules', function () {
    gulp.src('public/Modules/**/src/sass/**/style.scss', {base: "./"})
    .pipe(sass())
    .pipe(gulp.dest(function(file) {
        return path.join(path.dirname(file.path), '???/dist/css');
    }))
    .pipe(gulp.dest('./'));
});

2. Using rename

gulp.task('sass-modules', function () {
    gulp.src('public/Modules/**/src/sass/**/style.scss', {base: "./"})
    .pipe(sass())
    .pipe(rename(function (path) {
        path.dirname += "???/dist/css";
    }))
    .pipe(gulp.dest('./'));
});

I'm not sure what to write instead of the "???". I've tried multiple variant like '../../../dist/css' and it all seems to try and transfer my css files to something like public/Modules/Module1/dist/css/Module1/src/sass or dist/public/... Nothing has worked so far.

I've checked through StackOverflow before posting this and I couldn't find exactly what I need.

Thanks for the help!

I fixed it, I posted my solution below. – S. Lacroix Apr 27 '17 at 14:17 — S. Lacroix, Apr 27 '17 at 14:17

score 0 · Accepted Answer · answered Apr 27 '17 at 14:14

0

I fixed it! I would still like to know if this is considered a good solution?

.pipe(rename(function (path) {
    path.dirname = path.dirname.replace('src', 'dist').replace('sass', 'css');
}))

answered Apr 27 '17 at 14:14

S. Lacroix

11
3

you can try use gulp using the base option https://github.com/gulpjs/gulp/blob/master/docs/API.md#optionsbase – Kasiriveni Apr 28 '17 at 07:28

Dynamic gulp.dest path for modular app

1. Using path.join

2. Using rename

1 Answers1