Configurable Gulp tasks for use in Gravity Forms projects.
npm install @gravityforms/gulp-tasksConfigurable Gulp tasks for use in Gravity Forms projects.
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.
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.
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.