Guide on effectively incorporating CSS and JS files packaged as an NPM module using gulp

Question

Guide on effectively incorporating CSS and JS files packaged as an NPM module using gulp

How can I efficiently incorporate CSS and JS files from an NPM package, installed via gulp, into my index.html file?

I have used NPM to install the Materialize CSS framework by running:

npm install --save-dev materialize-css

Now, I need to include the CSS and JS files from this framework in my index.html. These files are located at

node_modules/materialize-css/dist/css/materialize.min.css

and

node_modules/materialize-css/dist/js/materialize.min.js

.

What is the best approach for achieving this task, considering that I am using gulp?

Should I reference the full path to the files in node_modules directly from index.html?

Or should I copy them to ./dist using a gulp task with absolute paths specified in

gulpfile.js</code, and then link them in <code>index.html

as ./dist/materialize.min.css and ./dist/materialize.min.js?

I would greatly appreciate any guidance on this matter. Apologies if this question seems basic, as it's difficult to determine the most effective solution.

javascript html css npm gulp

Answer 1

Answer №1

After some trial and error, I came up with the solution below in my gulpfile.js. In this example, I am using the npm package materialize-css which includes both css and js files that I need to include:

const slash = require('slash');
const merge = require('merge-stream');

const globs = {
    ...,
    dest: {
        dirs: {
            css: 'dist/css',
            js: 'dist/js'
        }
    },
    materializecss: {
        css: 'materialize-css/dist/css/materialize.min.css',
            js: 'materialize-css/dist/js/materialize.min.js',
            nouislider: {
                css: 'materialize-css/extras/noUiSlider/nouislider.css',
                js: 'materialize-css/extras/noUiSlider/nouislider.min.js'
            }
        }
    };

function vendors() {
    const resolve = (p) => slash(require.resolve(p));
    // prettier-ignore
    return merge(
        src(resolve(globs.materializecss.css))
            .pipe(dest(globs.dest.dirs.css)),
        src(resolve(globs.materializecss.js))
            .pipe(dest(globs.dest.dirs.js)),
        src(resolve(globs.materializecss.nouislider.css))
            .pipe(dest(globs.dest.dirs.css)),
        src(resolve(globs.materializecss.nouislider.js))
            .pipe(dest(globs.dest.dirs.js)));
}

The function require.resolve(relative_path) is used to automatically resolve a relative file name within the node_modules directory. The slash function is crucial for converting double backslashes on Windows into single forward slashes.

Answer 2

After some trial and error, I came up with the solution below in my gulpfile.js. In this example, I am using the npm package materialize-css which includes both css and js files that I need to include:

const slash = require('slash');
const merge = require('merge-stream');

const globs = {
    ...,
    dest: {
        dirs: {
            css: 'dist/css',
            js: 'dist/js'
        }
    },
    materializecss: {
        css: 'materialize-css/dist/css/materialize.min.css',
            js: 'materialize-css/dist/js/materialize.min.js',
            nouislider: {
                css: 'materialize-css/extras/noUiSlider/nouislider.css',
                js: 'materialize-css/extras/noUiSlider/nouislider.min.js'
            }
        }
    };

function vendors() {
    const resolve = (p) => slash(require.resolve(p));
    // prettier-ignore
    return merge(
        src(resolve(globs.materializecss.css))
            .pipe(dest(globs.dest.dirs.css)),
        src(resolve(globs.materializecss.js))
            .pipe(dest(globs.dest.dirs.js)),
        src(resolve(globs.materializecss.nouislider.css))
            .pipe(dest(globs.dest.dirs.css)),
        src(resolve(globs.materializecss.nouislider.js))
            .pipe(dest(globs.dest.dirs.js)));
}

The function require.resolve(relative_path) is used to automatically resolve a relative file name within the node_modules directory. The slash function is crucial for converting double backslashes on Windows into single forward slashes.

Guide on effectively incorporating CSS and JS files packaged as an NPM module using gulp

Answer №1

Similar questions

What is the best way to ensure there is only one space after every 4 characters in a string?

Enhance the Material UI Data Grid by customizing the toolbar's default slots with the option to disable the

What steps can I take to create a slideshow with dynamic animations?

Choose an item from a list that does not have a particular class

Encountering unforeseen permission issues while executing development script on a project built with Vite

enclosing a fixed or absolute div within a relative div

Unusual alterations to HTML and CSS to meet specific needs

When using Node.js and geth together, running JavaScript code may lead to the creation of zombie processes, causing the

Unable to post form data into database due to Javascript undefined data situation

Dealing with numerous identical ajax requests in jQuery

A guide to correctly importing a Json File into Three.js

Make sure that the webpage does not display any content until the stylesheet has been fully loaded by

The Intersection Observer encountered an issue as it was unable to access the property 'current' since it was undefined

How can I conceal the contents of a webpage until the entire page has finished loading before revealing them?

Decrease the construction duration within a sprawling Angular 8 project

Unleash the Power of Animating Your Active Tabs

Error message encountered when deploying a Discord bot on Heroku: "SyntaxError: Unexpected token '??='"

A guide to verifying a user's age using JavaScript by collecting information from 3 separate input fields

Issue with nivo-lightbox not opening upon clicking image

The $_REQUEST variable is functioning properly, while the $_POST variable seems to