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

Comprehending the positioning of elements enclosed within a parent <div> tag

When executing the gulp watch command, Gulp unexpectedly shuts down instantly

Saving URI from HTTP request in Javascript using Google Drive API: A step-by-step guide

Pressing the reset button will restore the table to its original

What is the best way to trigger a modal on Bootstrap using a JavaScript/jQuery function?

Is it feasible to incorporate a third-party JavaScript file into a React application?

Explore the functionality of the webix grid by clicking on the url column

Tips for selecting an <select> option value based on an URL parameter automatically

Limit the bootstrap datepicker to display only certain dates and today's date

Eliminating and restoring the background in a form field when it is in focus

What steps can be taken to design a unique CSS pop-up that triggers upon page load, limited to one appearance per visitor every week

When you hover over them, chips transform their color

What are the steps for creating a standalone build in nextJS?

Unable to navigate to the frame within the Salesforce Lightning interface

Easy fix for 3 circles (images) placed in a row with equal distance between them and perfectly aligned

Conflicting behavior between jQuery focus and blur functions and retrieving the 'variable' parameter via the $_GET method

Selenium and AngularJS patiently wait before carrying out specific actions

Switch the background color of a list item according to a JSON search

What could be causing my router UI in angular.js to malfunction?

How to detect a right-click on empty time slots in Fullcalendar agenda views