Using Variables in Gulp for the Destination File Name

Using variables in Gulp for the destination file name?

It wouldn't be too hard, depending on how much you need it to be dynamic. Gulp is pure JS, so you can very easily write your own functions. you can use the gulp-rename plugin to rename part or all of the file name before saving.

Here's a rough idea to get you started:

var rename = require('gulp-rename'),
    path = require('path'),
    glob = require('glob'); // npm i --save-dev glob    

var components = glob.sync('components/*').map(function(componentDir) {
        return path.basename(componentDir);
    });

components.forEach(function(name) {
    gulp.task(name+'-style', function() {
        return gulp.src('components/'+name+'/styles.scss')
            .pipe(sass()) // etc
            .pipe(rename(name + '.css'))
            .pipe(gulp.dest('public/assets/css'))
    });

    gulp.task(name+'-js', function() {
        // similar idea for JS files
    });

    gulp.task(name+'-build', [name+'-style', name+'-js']);
});

// build all components
gulp.task('build-components', components.map(function(name){ return name+'-build'; }));

Now you'll have tasks named component_1-build, component_1-style, component_1-js, etc, for each component.

You also have a task that can build all components.

Gulp.js - Output files with variable directory names but with a constant filename

Try using the gulp-rename plugin https://www.npmjs.com/package/gulp-rename

You could use a function for name mapping:

const rename = require('gulp-rename');

...

gulp.task('md', () => {
  return gulp.src('src/**/*.md')
    .pipe(md())
    .pipe(rename((path) => {
      path.dirname += "/" + path.basename;
      path.basename = "index";
    })
    .pipe(gulp.dest('dest'))
})

Gulp: How do I read file content into a variable?

Thargor pointed me out in the right direction:

gulp.task('doSomething', function() {
  var fileContent = fs.readFileSync("path/to/file.something", "utf8");

  return gulp.src(dirs.src + '/templates/*.html')
    .pipe(myFunction(fileContent))
    .pipe(gulp.dest('destination/path'));
});

Gulp generates dynamic filenames

Finally I finished my idea. I was pretty close to my result, I took OverZealous answer where is using glob. But I did changes in foreach cycle, where is gulp task function with name, I inserted simple javascript if condition, where I check which name I get from folder names array.

if ( name === "components") {
   return gulp.src(projectPath + "/sass/components/*.scss")
      .pipe(sass())
      .pipe(gulp.dest(projectPath + "/css/components"))
} else {
   return gulp.src(projectPath + "/sass/layout/" + name + "/*.scss")
      .pipe(sass())
      .pipe(rename(name + ".css"))
      .pipe(gulp.dest(projectPath + "/css"))
}

It`s little bit messy solution, but works fine.

Get the current file name in gulp.src()

I'm not sure how you want to use the file names, but one of these should help:

• If you just want to see the names, you can use something like gulp-debug, which lists the details of the vinyl file. Insert this anywhere you want a list, like so:

  var gulp = require('gulp'),
      debug = require('gulp-debug');
  
  gulp.task('examples', function() {
      return gulp.src('./examples/*.html')
          .pipe(debug())
          .pipe(gulp.dest('./build'));
  });
  

• Another option is gulp-filelog, which I haven't used, but sounds similar (it might be a bit cleaner).

• Another options is gulp-filesize, which outputs both the file and it's size.

• If you want more control, you can use something like gulp-tap, which lets you provide your own function and look at the files in the pipe.

---

Related Topics