CODEWITHSUNDEEP
gruntjsgulp
trysis
trysis

Reputation: 8416

Gulp Equivalent to Grunt's Files.Rename

I have been using Grunt for awhile, and recently decided to try Gulp. I have to say, from what I've seen so far, it looks promising. However, it seems that there are some things that are easy in Grunt that are difficult or impossible in Gulp (as with any 2 similar things, I suppose).

One of these things is renaming the source files for the destination. It's a niche case, I'll admit, but it can be very powerful. In my case, I am using g(r?)u(nt|lp)-sass. I have my SCSS files in folders with "scss" in the name, and I want to put them in a path with "css" as one of the folders, in the same place in the path that the "scss" folder was.

With Grunt, this could be done right in the files object, with the rename method. For example:

grunt.initConfig ({
    sass: {
        move: {
            options: {
                lineNumbers: true,
                compass: true,
                cacheLocation: 'app/.cache/sass'
            },
            files: [{
                expand: true,
                cwd: 'app/modules/',
                src: '**/*.scss',
                dest: '',
                ext: '.css',
                rename: function (dest, src) {
                    return 'app/modules/' + src.replace ('scss', 'css');
                    }
            }]
        }
    }
});

require ('load-grunt-tasks')(grunt);

So far with Gulp, I have:

var gulp = require ('gulp');
var sourcemaps = require ('gulp-sourcemaps');
var scss = require ('gulp-sass');

gulp.task('scss:move', function () {
    return gulp.src ('app/modules/**/scss/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe (scss())
        .pipe (sourcemaps.write())
        .pipe(gulp.dest(**?**));
});

How do I transform the source path in Gulp for the destination path, like the method files.rename in Grunt? I would prefer a relatively simple solution, like a single method, but solutions involving Gulp plugins are OK, as well.

Upvotes: 1

Views: 325

Answers (1)

JMM
JMM

Reputation: 26807

So you want to preserve the directory structure and change directories named scss to css while copying from source to destination, correct? If so, what you want is the gulp-rename plugin. Example:

gulp.task('scss:move', function () {
  var base = './app/modules';

  return gulp.src(base + '/**/scss/**/*.scss')
    .pipe(rename(function (file) {
      file.dirname = path.join.apply(path,
        file.dirname.split(path.sep).map(function (seg) {
          return seg == 'scss' ? 'css' : seg;
        }));
      }))
    .pipe(gulp.dest(base));
});

You probably want to do the rename following the source map generation, otherwise the renamed path would be used as the original path in the source maps. There is currently a bug (#158) in gulp-sass that makes it impossible to do the rename before gulp-sass.

Upvotes: 2

Related Questions