In this article, we’ll learn how you can build a custom DHTMLX package using gulp.js.
Download dhtmlxSuite, JavaScript UI library for creating web applications
After you download and unpack the DHTMLX Suite package, you’ll find a bunch of folders inside. We’re interested in two of them:
- sources that contains the source files of the library
- codebase that contains compiled files
If you look inside the sources folder, you’ll see that in contains sub-folders each of which corresponds to a particular DHTMLX component, e.g. dhtmlxAccordion, dhtmlxCalendar, etc. It’s up to you which of them will be included in your custom package.
Gulp.js is a build system that can be used for copying files from one location to another, compiling, deploying, creating notifications, unit testing, linting, etc. It’s built on Node.js and Node Package Manager (npm) that you can use to install it.
To build a package from DHTMLX Suite sources you can use a script that you can find on this GitHub page. You should download the package and unzip the content of it to the sources folder.
Now, to build the package just run from command line (from sources folder).
npm run build
The script will rebuild files in codebase folder from sources. That’s it!
Among unzipped files, you’ll find the gulpfile.js file that allows you to decide what components you want to include into your custom package. If you open it, you’ll find the components object that looks like this:
"calendar": true,
"combo": true,
"colorpicker": true,
/* more components */
It corresponds to the content of the sources folder. You can edit it to define the set of components that will be included into the package.
As you can see, building a custom package on the basis of DHTMLX Suite is not a hard task. If you have gulp installed, all you need to do is to change the gulpfile.js file and run two simple commands. We hope that you find this little recipe helpful.