aA common question asked about is this: gulp How can I run the tasks of other gulpfiles from a central gulpfile, like a hub? A typical scenario might be a project containing two SASS libraries, each importing from a shared set of `scss` files, but also outputting a slightly different flavoured style sheet - one for the public facing website, another for the admin backend (for instance). There are two gulp libraries which purport to help: and . Neither maintained for years, and the latter has been by : `no reason for this to exist, use the require-all module or node's require`. gulp-hub gulp-chug blacklisted gulp Let's not use those: Vanilla is best; especially if it's simple; and - as it turns out - using `require` makes it dead simple. I will show you how. A Multi-Gulpfile Solution This article will scaffold a solution for the example given above. To play along, create a working folder somewhere and run the following (in one go): mkdir great-gulping-website
cd great-gulping-website
npm init -y
npm i gulp browser-sync --save-dev
touch gulpfile.js index.html package.json stylesheet.scss

mkdir admin-site
cd admin-site
npm init -y
npm i gulp gulp-sass --save-dev
touch gulpfile.js index.html package.json stylesheet.scss

cd ..
mkdir public-site
cd public-site
npm init -y
npm i gulp gulp-sass --save-dev
touch gulpfile.js index.html package.json stylesheet.scss This will scaffold the following files, replicating the scenario of a SASS library building two styles: targeting admin public sites. great-gulping-website
    |- node_modules
    |- admin-site
        |- node_modules
        |- gulpfile.js 
        |- index.html
        |- package.json
        |- stylesheet.scss
    |- public-site
        |- node_modules
        |- gulpfile.js 
        |- index.html
        |- package.json
        |- stylesheet.scss
    |- gulpfile.js 
    |- index.html
    |- package.json
    |- stylesheet.scss The goal is as follows: `./admin-site/gulpfile.js` builds `./admin-site/stylesheet.scss` into `./admin-site/dist/stylesheet.css` `./public-site/gulpfile.js` builds `./public-site/stylesheet.scss`  into `./public-site/dist/stylesheet.css` Both stylesheets will reference `./stylesheet.scss` for shared settings, styles, mixins, etc. `./gulpfile.js` runs build for `./admin-site/gulpfile.js` and `./public-site/gulpfile.js`; will host a server; will watch all the `stylesheet.scss` files for changes. Scaffold the Demo Files Quickly copy the following code into the files indicated, starting with the webpages: Admin public-site | home  < > html < > head < = = /> link rel "stylesheet" href "./dist/stylesheet.css" </ > head < > body < > h1 </ > h1 < = > a href "../public-site/index.html" </ > a < = > a href "../index.html" </ > a </ > body </ > html Public admin-site | home  < > html < > head < = = /> link rel "stylesheet" href "./dist/stylesheet.css" </ > head < > body < > h1 </ > h1 < = > a href "../admin-site/index.html" </ > a < = > a href "../index.html" </ > a </ > body </ > html admin-site | public-site  < > html < > body < = > a href "admin-site/index.html" </ > a < = > a href "public-site/index.html" </ > a </ > body </ > html That's all we need to check this solution is working. Add some SASS! : darkblue; // ./stylesheet.scss $main-color @ ; { : ; : ;
} // ./admin-site/stylesheet.scss import "../stylesheet.scss" h1 color $main-color font-size 200% @ ; { : ; : ;
} // ./public-site/stylesheet.scss import "../stylesheet.scss" h1 color $main-color font-size 600% Simple! Three linked webpages; two `h1` styles, both sharing a settings color. The G Part ulp First we'll write two, almost identical gulpfiles, which will contain the tasks for building the two flavours of stylesheet. These files are almost identical but this solution works as a hub for gulpfiles which could all have different tasks: in this scenario, { src, dest } = ( ) sass = ( ) HUBNAME = { src( )
    .pipe(sass())
    .pipe(dest( ))
}

exports.build = scssTask
exports.default = scssTask // admin-site/gulpfile.js const require "gulp" const require "gulp-sass" const "admin-site" ( ) function scssTask return `./ /stylesheet.scss` ${HUBNAME} `./ /dist` ${HUBNAME} { src, dest } = ( ) sass = ( ) HUBNAME = { src( )
    .pipe(sass())
    .pipe(dest( ))
}

exports.build = scssTask
exports.default = scssTask // public-site/gulpfile.js const require "gulp" const require "gulp-sass" const "public-site" ( ) function scssTask return `./ /stylesheet.scss` ${HUBNAME} `./ /dist` ${HUBNAME} Yep... SASS compiling... Vanilla ... gulp No surprises here. But you can make these as complicated as you want. Finally we get to the point of the article: the bit which explains what those maintainer meant when they said: "use the require-all module or node's require": gulp { parallel, series, src, task, watch } = ( ) browserSync = ( ).create() HUB = [ , ] FILES = { : HUB.map( ).concat( ), : HUB.map( ),
} builders = FILES.gulpers.map( (GULPFILE).build
) buildHub = parallel(builders) {
  browserSync.init({ : { : ,
    },
  })
  watch(FILES.watch, buildHub).on( , browserSync.stream)
} exports.default = series(buildHub, watchTask) var require "gulp" var require "browser-sync" // Create a convenient and descriptive list // of the sub folders this "hub" will be // targeting. const "admin-site" "public-site" // A config object listing all the `stylesheet.scss` // we want to `watch` AND the gulpfiles whose tasks // we will run. const watch => hub `./ /stylesheet.scss` ${hub} "./stylesheet.scss" gulpers => hub `./ /gulpfile.js` ${hub} // Map the gulpfiles into a list of tasks. `.build` // specifically targets the build task. const => GULPFILE require // Group the tasks into a `parallel` set. const // Standard watch task which launches the server // then calls the buildHub task when the stylesheet // files change. ( ) function watchTask server baseDir "./" "change" // Export a series task to first build all the // stylesheets start the watchTask. Breakdown: Create a convenient and descriptive list of the sub folders this "hub" will be targeting. A config object listing all the `stylesheet.scss` we want to `watch` AND the gulpfiles whose tasks we will run. The latter maps into a list of the (duh!) "build" tasks  which will be run in `parallel`. required We added a standard watchTask. We finish with a standard export of the buildTask and the watchTask in `series`. Now all you need to do is run `gulp` in the root directory: gulp # Output of first "build" # NB Each build happens twice > [17:02:21] Using gulpfile ~/great-gulping-website/gulpfile.js > [17:02:21] Starting ... 'default' > [17:02:21] Starting ... 'scssTask' > [17:02:21] Starting ... 'scssTask' > [17:02:21] Finished after 34 ms 'scssTask' > [17:02:21] Finished after 36 ms 'scssTask' > [17:02:21] Starting ... 'watchTask' > [Browsersync] Access URLs: > -------------------------------------- > Local: http://localhost:3000 > External: http://192.168.1.107:3000 > -------------------------------------- > UI: http://localhost:3001 > UI External: http://localhost:3001 > -------------------------------------- > [Browsersync] Serving files from: ./ # And when we change any scss file: then > [17:02:34] Starting ... 'scssTask' > [17:02:34] Starting ... 'scssTask' > [17:02:34] Finished after 11 ms 'scssTask' > [17:02:34] Finished after 12 ms 'scssTask' # Again, notice there are two builds each time. I hope this simple explanation helps you scaffold your own solution. Credits gulp Photo by on Yu Tang Unsplash

Different

Follow the elioWay

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Consume and Run Gulp Tasks in Other Files from a Central Gulpfile

Too Long; Didn't Read

Company Mentioned

Tim Bushell

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Consume and Run Gulp Tasks in Other Files from a Central Gulpfile

Too Long; Didn't Read

Company Mentioned

Tim Bushell

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES