Question

26

Using variables in Gulp for the destination file name?

rated 0 times [ 32] [ 6] / answers: 1 / hits: 14828 / 10 Years ago, wed, march 19, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ellisw

Add To Favorites

Follow

Total Points: 625

Total Questions: 92

Total Answers: 88

Location: Kazakhstan

Member since Mon, Sep 26, 2022

2 Years ago

ellisw questions

1 How to check if event target is contained within an element?

Mon, Aug 23, 21, 00:00, 3 Years ago

1 Jest - one function mocks file for multiple test files

Fri, Nov 20, 20, 00:00, 4 Years ago

1 Electron Forge with react?

Sat, Jun 20, 20, 00:00, 4 Years ago

1 material-ui makeStyles: how to style by tag name?

Tue, Apr 21, 20, 00:00, 4 Years ago

1 Using async-await with node-fetch does not return the response to the calling method

Sun, Mar 22, 20, 00:00, 4 Years ago

View All

answered 10 Years ago brockg · Accepted Answer

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.