Gulp WP Toolkit SCSS Configuration and Options

My Gulp WP Toolkit package assumes you’re using Sass to build your theme stylesheet files. There are various configuration options available:

• Adding configuration
• Base font size for REM calculations
• Replace pixel values with REMs entirely
• Converting media queries to REM values
• Setting multiple SCSS files and output CSS files
• SCSS output style
• Sourcemap creation

---

Adding configuration

Configuration specific to your theme CSS files should be placed into toolkit.extendConfig() within a css key:

	toolkit.extendConfig({
	/* ... Shortening for brevity, other config would likely be here. */
	css: {
	/* Additional configuration */
	},
	});

view raw Gulpfile.js hosted with ❤ by GitHub

---

Base font size for REM calculations

The default value is set at 16, but you can update this to reflect a different base font size. An integer value should be given, for example:

	toolkit.extendConfig({
	/* ... Shortening for brevity, other config would likely be here. */
	css: {
	basefontsize: 10
	},
	});

view raw Gulpfile.js hosted with ❤ by GitHub

---

Replace pixel values with REMs entirely

By default, Gulp WP Toolkit will add a REM size immediately after a pixel size. If you’d like to replace size declarations altogether, you can change the config to:

	toolkit.extendConfig({
	/* ... Shortening for brevity, other config would likely be here. */
	css: {
	remreplace: true
	}
	});

view raw Gulpfile.js hosted with ❤ by GitHub

---

Converting media queries to REM values

By default, Gulp WP Toolkit will convert media query values to rems, so your media query may read @media only screen and (min-width: 40rem). You can switch this off, and your media queries will remain fixed at pixel values, using:

	toolkit.extendConfig({
	/* ... Shortening for brevity, other config would likely be here. */
	css: {
	remmediaquery: false /* Turn off auto conversion of media queries to REMs. */
	},
	});

view raw Gulpfile.js hosted with ❤ by GitHub

---

Setting multiple SCSS files and output CSS files

In a default installation config exists only for a main style.scss file. If you want to add new stylesheets, for example something WooCommerce or EDD specific, you can do so with the following example:

	toolkit.extendConfig({
	/* ... Shortening for brevity, other config would likely be here. */
	css: {
	scss: {
	'woocommerce': { /* Output filename */
	src: 'develop/scss/woocommerce.scss', /* Input file */
	dest: 'css/' /* Output path. */
	},
	'edd': { /* Output filename */
	src: 'develop/scss/edd.scss', /* Input file */
	dest: 'css/' /* Output path. */
	}
	}
	}
	});

view raw Gulpfile.js hosted with ❤ by GitHub

---

SCSS output style

The default output style is compressed, and I would advise that this is retained for all production files. However, you can set the output style to any of the other options within the Gulp WP Toolkit configuration. Using the previous example files, we can set different output styles as follows:

	toolkit.extendConfig({
	/* ... Shortening for brevity, other config would likely be here. */
	css: {
	scss: {
	'style': { /* Override default options by adding 'style' to our config. */
	outputStyle: 'expanded'
	},
	'woocommerce': { /* Output filename */
	src: 'develop/scss/woocommerce.scss', /* Input file */
	dest: 'css/', /* Output path. */
	outputStyle: 'expanded' /* Set expanded output style. */
	},
	'edd': { /* Output filename */
	src: 'develop/scss/edd.scss', /* Input file */
	dest: 'css/', /* Output path. */
	outputStyle: 'compressed' /* Set expanded output style. */
	}
	}
	}
	});

view raw Gulpfile.js hosted with ❤ by GitHub

---

Sourcemap creation

A recent addition to the toolkit, you can now easily switch on and off the creation of source maps. Building on our previous example, we could set output a source map for the WooCommerce stylesheet, but none of the others with the following code:

	toolkit.extendConfig({
	/* ... Shortening for brevity, other config would likely be here. */
	css: {
	scss: {
	'style': { /* Override default options by adding 'style' to our config. */
	outputStyle: 'expanded',
	sourceMap: false
	},
	'woocommerce': { /* Output filename */
	src: 'develop/scss/woocommerce.scss', /* Input file */
	dest: 'css/', /* Output path. */
	outputStyle: 'expanded', /* Set expanded output style. */
	sourceMap: true
	},
	'edd': { /* Output filename */
	src: 'develop/scss/edd.scss', /* Input file */
	dest: 'css/', /* Output path. */
	outputStyle: 'compressed', /* Set expanded output style. */
	sourceMap: false
	}
	}
	}
	});

view raw Gulpfile.js hosted with ❤ by GitHub