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

score 4 · Accepted Answer · answered Oct 28 '17 at 12:50

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.

Thanks, this works like a charm :) Gulp is inside theme/assets/gulp because of that I returned two steps back. — Nenad, Oct 30 '17 at 08:01

Change the destination path of files in Gulp

1 Answers1

Linked