Using variables in Gulp for the destination file name?

Question

I am new to gulp and I am wondering if what I want to achieve is practical or possible.

My projects structure:

root
|
components
|   |
|   component_1
|   |   styles.scss
|   |   actions.js
|   |   template.html
|   |   ...
|   component_2
|   |   styles.scss
|   |   template.html
|   |   ...
|
public
    |
    assets
         |
         css (dest)
         |    component_1.css
         |    component_2.css
         |    ...
         js (dest)

Now what I want is that Gulp stores the compiled css files in the according css folder in public/assets but uses the name of folder where it found the scss file. Is that possible? Do I need to pipe that to a plugin? Thanks! PS i do realize I could achieve that by just renaming the scss, but that's what I'd like to avoid.

score 16 · Accepted Answer · answered Mar 19 '14 at 17:13

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.

Also: make sure you have the return statement within the tasks, like I show, so they can properly run async! — OverZealous, Mar 19 '14 at 17:22
you don't need to do `.pipe(rename(name + '.css'))`, it can work fine without that line. — vsync, Sep 27 '16 at 15:02

score 4 · Answer 2 · answered Dec 01 '15 at 19:18

4

Old question i know, but i been playing around in this area today, and hence came across this question. This may help someone if you are wanting to do something dynamic with the destination path.

You can supply a function as the argument to gulp.dest and hence do some pre processing on the destination path like this:

.pipe(gulp.dest(function (file) {
    // file is the current file in the stream
    // do something here               
    return pathString;
}));

answered Dec 01 '15 at 19:18

alfonsob

635
1
6
16

what is `pathString` ? you mean `[PATH]`.. :) – vsync Sep 27 '16 at 15:03
i mean file is an object with .base and other properties that could be used/manipulated to construct a string and that string returned to gulp.dest – alfonsob Sep 29 '16 at 16:24

Using variables in Gulp for the destination file name?

2 Answers2

Linked