Utilizing Gulp variables to create dynamic destination file names?

Question

Utilizing Gulp variables to create dynamic destination file names?

As a newcomer to gulp, I am curious about the feasibility of achieving my desired outcome.

Here is the structure of my projects:

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

My goal is for Gulp to save the compiled css files in the corresponding css folder within public/assets, but to use the name of the folder where it found the scss file. Is this achievable? Would I need to utilize a plugin for this task? Thank you! P.S. I understand renaming the scss file could achieve the same result, but I prefer to avoid that route.

javascript css sass gulp

Answer 1

Answer №1

Creating dynamic tasks with Gulp is a straightforward process, especially if you require flexibility. Since Gulp is written in pure JavaScript, it allows you to easily craft your own functions. Utilizing the gulp-rename plugin, you can modify parts or the entire file name before storing it.

To kickstart the process, consider the following outline:

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() {
        // implement similar logic for JS files
    });

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

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

As a result, individual tasks like component_1-build, component_1-style, component_1-js, and so forth will be generated for each component.

In addition, a master task will enable the construction of all components simultaneously.

Answer 2

Creating dynamic tasks with Gulp is a straightforward process, especially if you require flexibility. Since Gulp is written in pure JavaScript, it allows you to easily craft your own functions. Utilizing the gulp-rename plugin, you can modify parts or the entire file name before storing it.

To kickstart the process, consider the following outline:

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() {
        // implement similar logic for JS files
    });

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

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

As a result, individual tasks like component_1-build, component_1-style, component_1-js, and so forth will be generated for each component.

In addition, a master task will enable the construction of all components simultaneously.

Answer 3

Answer №2

While this question may be old, I recently found myself delving into this topic and stumbled upon it. If you're looking to add some dynamism to the destination path, here's a helpful tip.

By passing a function as an argument to gulp.dest, you can perform some preprocessing on the destination path like so:

.pipe(gulp.dest(function (file) {
    // file represents the current file in the stream
    // implement your logic here               
    return newPathString;
}));

Answer 4

While this question may be old, I recently found myself delving into this topic and stumbled upon it. If you're looking to add some dynamism to the destination path, here's a helpful tip.

By passing a function as an argument to gulp.dest, you can perform some preprocessing on the destination path like so:

.pipe(gulp.dest(function (file) {
    // file represents the current file in the stream
    // implement your logic here               
    return newPathString;
}));

Utilizing Gulp variables to create dynamic destination file names?

Answer №1

Answer №2

Similar questions

Issue with Ionic app causing code execution to hang when the Back Button is pressed

How can we enhance Backbone.sync() at the Model level to include additional parameters?

Is it necessary to have NodeJs in order to host a React app on a server?

Separate .env configurations tailored for development and production environments

Tips for obtaining the combined outcome of multiple arrays (3 to 5 arrays) in JavaScript

How can you access additional fields beyond what is displayed in a dropdown select menu in React?

tips for creating a jquery/css scales animation

Recalling the position of the uploaded image within a v-for loop

Is it possible for web browsers to set a timeout on an XmlHttpRequest while it is still active?

Ending an $.ajax request when the page is exited

Preventing JQuery from interrupting asynchronous initialization

Struggling to center a MatIcon within a MatButtonToggle component in an Angular project

Navigating the rollout of a fresh new design

How can I identify when a CSS transition on a particular element has ended if there are several transitions occurring simultaneously?

Trouble with jQuery click event on dynamically generated elements

Customize React Hook Form version 7 by incorporating a unique input method for handling empty values

Looking for assistance with overriding kendo UI validation requirements

CSS fixed positioning involves positioning an element relative to the

Each loop in the forEach function triggers the mouseup event

Next.js fails to properly render external links when utilizing the Link component