Genesis Sample Task Runner

Gulp workflow for Auto prefixing, Sass compiling, CSS minification, automatic browser reloading and more
Alternatives To Genesis Sample Task Runner
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Static Site Boilerplate1,663
a year ago2January 25, 201915mitJavaScript
A better workflow for building modern static websites.
Gulp Starter Env234
5 years ago1mitJavaScript
A basic gulp environment with autoprefixer and minifcation for designers to play around with
a month ago95June 06, 20223apache-2.0C#
Live Reload Vanilla Website Template47
2 months ago4May 05, 202016mitJavaScript
Template to build a website without a front-end framework, including transpilation of ES6+ JavaScript and Sass support
9 years ago1gpl-2.0JavaScript
Responsive or Basic Email Development in a box! Automate Everything, from SASS precomiling, CSS Inlining, CSS/HTML and Image Minification, S3 Image Hosting and Litmus email testing. With the help of INK templates and its CSS boilerplate, designing emails of any kind is a breeze.
Gulp Kirby Starter Kit41
2 years ago5mitPHP
Getting started with Gulp v4 & Kirby v3 in no-time
6 years agomitCSS
A modern responsive front end boilerplate in 2 commands
Gulp Boilerplate26
a year agoJavaScript
A basic Gulp 4 boilerplate to get developing locally, quickly. Comes with Sass/JS & image minification, Babel, Nunjucks, CSS autoprefixer and hot reload.
Fox Boilerplate 222
7 years ago1CSS
An HTML5 / Sass / Gulp Boilerplate including FOX CSS
Slides The Power Of Css20
6 years agomitHTML
The Power of CSS :) [WIP]
Alternatives To Genesis Sample Task Runner
Select To Compare

Alternative Project Comparisons

Genesis Sample Task Runner

This is a Gulp workflow for automating the following tasks:

  • Auto prefixing
  • Compiling Sass partials into style.css
  • Minifying unminified .js files and style.css
  • Automatic CSS injection and browser reloading for PHP & JS changes using BrowserSync
  • CSS optimization
  • Packing same CSS media query rules into one
  • Generating pixel fallbacks for rem units
  • Generating source maps so browser inspector (like Chrome DevTools) shows the partial .scss file(s) from where CSS rules are originating from

for Genesis Sample, a child theme of the Genesis framework.

How to use

  1. Install WordPress on your localhost if you haven't already. I use Laravel Valet.

  2. Install Node.

  3. Install Gulp CLI globally by running npm install gulp-cli -g in the terminal.

  4. Download this repo's content and place in your local site's project folder (Ex.: Genesis Sample theme directory).

  5. Run npm install.

  6. Change the values of siteName and userName in gulpfile.js.

If your local site does not have a SSL, you can comment out the userName line and comment out/delete

https: {
    key: `/Users/${userName}/.valet/Certificates/${siteName}.key`,
    cert: `/Users/${userName}/.valet/Certificates/${siteName}.crt`

If it does, adjust the path to your local SSL certificate's key and crt files.

  1. Run gulp.

  2. You might want to load the minified versions of genesis-sample.js and style.css on the production site before going live.

For this, edit functions.php and

a) replace

    get_stylesheet_directory_uri() . '/js/genesis-sample.js',
    array( 'jquery' ),


    get_stylesheet_directory_uri() . "/js/genesis-sample{$suffix}.js",
    array( 'jquery' ),

b) at the end, add

add_filter( 'stylesheet_uri', 'genesis_sample_stylesheet_uri', 10, 2 );
 * Loads minified version of style.css.
 * @param string $stylesheet_uri     Original stylesheet URI.
 * @param string $stylesheet_dir_uri Stylesheet directory.
 * @return string (Maybe modified) stylesheet URI.
function genesis_sample_stylesheet_uri( $stylesheet_uri, $stylesheet_dir_uri ) {

	return trailingslashit( $stylesheet_dir_uri ) . 'style.min.css';


Note: You will not be able to use the source maps when style.min.css is loading. Therefore add the above code after you are done with your development.


Thanks to Christoph Herr for his Prometheus theme.

Popular Minification Projects
Popular Sass Projects
Popular Build Tools Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.