Gravity Forms Gulp Tasks

Configurable Gulp tasks for use in Gravity Forms projects.

Installation

Install the module:

npm install @gravityforms/gulp-tasks --save-dev

Note: This package requires node 20.10.0 or later, and npm 10.2.3 or later.

Overview

This module encapsulates all of our gulp tasks and makes them reusable by add-ons in the Gravity Forms ecosystem. It has specialized tasks like extracting and injecting icon kits from Icomoon into postcss systems, browsersync enabled dev modes and more.

Usage

After installing, in a gravityforms.config.js in the root directory add the following and tweak as needed in regard to paths or adding additional tasks.

const { resolve } = require( 'path' );

module.export = {
	gulpConfig: {
		// basic browsersync settings
		browserSync: {
			defaultUrl: 'gravity-forms.local',
			serverName: 'Gravity Forms Dev',
		},
		// control aspects of the icomoon postcss injector
		icons: require( './config/gulp/icons' ),
		// custom jest overrides
		jest: require( './config/gulp/jest' ),
		// paths used by webpack and gulp
		paths: require( './config/gulp/paths' ),
		// various postcss overrides and configs
		postcss: require( './config/gulp/postcss' ),
		// set, extend and override gulp tasks (builtin or custom)
		tasks: {
			// extend the built in gulp methods in @gravityforms/gulp-tasks with additional methods
			builtins: {
				copy: {},
			},
			// add names for the custom tasks you extended here. The format is task type, then your custom method, seperated by
			// a colon. eg: copy:myTask
			builtinsTasks: [],
			// map custom tasks not in built ins to be registered against the methods found in a customDir
			custom: [],
			// path to the custom dir that maps to the array of tasks above
			customDir: resolve( __dirname, 'gulp-tasks' ),
			// object that registers all final tasks to actually be run by Gulp
			runners: require( './config/gulp/tasks/runners' ),
		},
		// set directories and methods to execute for gulp watch
		watchFiles: require( './config/gulp/watch-files' ),
		// override default watch tasks
		watchTasks: [ 'watch:main', 'watch:watchAdminJS', 'watch:watchThemeJS' ],
		// set webpack overrides
		webpack: require( './config/gulp/webpack' ),
	},
	// set project id which is used throughout the system
	projectId: 'gform',
}

Then add this to your scripts block in your root package.json to enable all available tasks:

{
  "scripts": {
    "start": "npm install && cd node_modules/@gravityforms/gulp-tasks && npm run gulp -- dev",
    "dev": "cd node_modules/@gravityforms/gulp-tasks && npm run gulp -- dev",
    "dev:admin": "cd node_modules/@gravityforms/gulp-tasks && npm run gulp -- dev --nojs",
    "dev:theme": "cd node_modules/@gravityforms/gulp-tasks && npm run gulp -- dev --nojs",
    "dev:admin:serve": "cd node_modules/@gravityforms/gulp-tasks && npm run dev:admin:serve",
    "dev:theme:serve": "cd node_modules/@gravityforms/gulp-tasks && npm run dev:theme:serve",
    "dist": "cd node_modules/@gravityforms/gulp-tasks && npm run gulp -- dist",
    "icons:admin": "cd node_modules/@gravityforms/gulp-tasks && npm run gulp -- icons --admin",
    "icons:theme": "cd node_modules/@gravityforms/gulp-tasks && npm run gulp -- icons --theme",
    "validate": "cd node_modules/@gravityforms/gulp-tasks && npm run gulp -- lint",
    "watch": "cd node_modules/@gravityforms/gulp-tasks && npm run gulp -- watch"
  }
}

You can now run any of those tasks with npm run dev etc.