Change the destination path of files in Gulp

Question

I trying to create dynamic gulp task which will loop through all files and folders and concat/compile it in corresponding folders.

Folders structure are for example: theme/framework/modules/module-1/assets/css/scss/scss-file-1.scss and theme/framework/modules/module-2/assets/css/scss/scss-file-2.scss etc.

And gulp task is

gulp.task('modules-sass', function () {
    return gulp.src([
        '../../framework/modules/**/assets/css/scss/*.scss'
    ])
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sassGlob())
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(sourcemaps.write('.', {
        includeContent: false,
        sourceRoot: function(file) {
            return '../css';
        }
    }))
    .pipe(gulp.dest('../../framework/modules'));
});

Results are:

theme/framework/modules/module-1/assets/css/scss/scss-file-1.css
theme/framework/modules/module-1/assets/css/scss/scss-file-1.css.map
theme/framework/modules/module-2/assets/css/scss/scss-file-2.css
theme/framework/modules/module-2/assets/css/scss/scss-file-2.css.map

But I want to put css and map files inside css folder not inside scss!

Also I tried to set absolute path for destination for example

gulp.task('theme-modules-sass', function () {
    return gulp.src([
        '../../framework/modules/**/assets/css/scss/*.scss'
    ])
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sassGlob())
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(sourcemaps.write('.', {
        includeContent: false,
        sourceRoot: function(file) {
            return '../css';
        }
    }))
    .pipe(gulp.dest(function(file){
        var filePath = file.path;
        var module = filePath.substring(filePath.indexOf('\\modules'), filePath.indexOf('\\assets'));
        var moduleName = module.replace('\\modules\\', '');

        return '../../framework/modules/'+moduleName+'/assets/css/';
    }));
});

But then gulp create inside css folder full file hierarchy, example

theme/framework/modules/module-1/assets/css/module-1/assets/css/scss/scss-file-1.css

Thanks for solutions

Best regards, Nenad

Answer 1

I believe this is what you want. [It looks like your gulpfile.js is in the modules directory.]

// theme / framework / modules / module-1 / assets / css / scss / scss-file-1.scss
// theme / framework / modules / module-2 / assets / css / scss / scss-file-2.scss

var rename = require("gulp-rename");
var path = require("path");

gulp.task('modules-sass', function () {
  return gulp.src([
      '../../framework/modules/**/assets/css/scss/*.scss'
  ])
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sassGlob())
  .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
  .pipe(sourcemaps.write('.', {
      includeContent: false,
      sourceRoot: function(file) {
          return '../css';
      }
  }))

  .pipe(rename(function (file) {
      // this removes the last parent directory of the relative file path
      file.dirname = path.dirname(file.dirname);
      console.log("file.dirname = " + file.dirname);
  }))

  .pipe(gulp.dest('../../framework/modules'));
});

gulp-rename works nicely here. I initially thought it was just for renaming basenames, like 'myFile.css', but it can ignore basenames and just manipulate the directory path as well. Which is what we do here.

We strip off the last directory name by taking the dirname of the file.dirname.