# Gravity Forms Gulp Tasks

Configurable Gulp tasks for use in Gravity Forms projects. 

## Installation

Install the module:

```bash
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.

```javascript
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:

```json
{
  "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.