Package Exports

@gravityforms/gulp-tasks
@gravityforms/gulp-tasks/gulpfile.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gravityforms/gulp-tasks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Gravity Forms Gulp Tasks

Configurable Gulp tasks for use in Gravity Forms projects. Note: Full extendability still being worked on. This is currently internal to Gravity Forms core/add ons but will soon be usable by any add on author or plugin wishing to use our tooling.

Installation

Install the module:

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

Note: This package requires node 14.15.0 or later, and npm 6.14.8 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 regards 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 actions
            builtins: {
                copy: {},
            },
            // 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' ),
    },
}

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",
    "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.