dhtmlx.css<\/em> and all necessary images. These generated files will include the selected DHTMLX components and functionality. The file size depends on the number of components you selected.<\/p>\n<\/p>\n
Compress Files Using Custom Scripts<\/h3>\n
\nIf you feel the power and believe in your programming skills, you can write custom scripts to compress the source files for the final release branch. The advantage of this approach is that you will be able to compress the DHTMLX sources and your own JavaScript and CSS code in a single file, which is much better for application loading time and performance. <\/p>\n
The method described below is a bit old-school but it still works so you may give it a try. If you prefer to use the modern tools for JavaScript compilation, wait for our next article ;)<\/p>\n
So, back to our tips. On the development stage, you add the source file but you also need compiled dhtmlx.js<\/em>, dhtmlx.css<\/em> and your custom JavaScript and CSS code. Here is how you can compress the DHTMLX sources using a custom script on Linux. <\/p>\nCheck the libCompiler\/yui folder<\/strong> in the dhtmlxSuite package, it contains the file compiler.jar. We will need this file.<\/p>\nTo compile JavaScript files on Linux, use the following script (we will save it as a “compile_js<\/em>” file – see the structure of files below):<\/p>\n#!\/bin\/bash<\/span>
\n
\nCOMPILER<\/span>=compiler.jar;
\n
\n# generating JS<\/span>
\n
\nRES_JS<\/span>=res\/<\/span>compiled.js;
\n
\necho<\/span> -ne<\/span> ""<\/span> ><\/span> $RES_JS<\/span>;
\njava<\/span> -jar<\/span> $COMPILER<\/span> ..\/<\/span>dhtmlx\/<\/span>dhtmlxLayout\/<\/span>dhtmlxcommon.js >><\/span> $RES_JS<\/span>
\njava<\/span> -jar<\/span> $COMPILER<\/span> ..\/<\/span>dhtmlx\/<\/span>dhtmlxLayout\/<\/span>dhtmlxcontainer.js >><\/span> $RES_JS<\/span>
\njava<\/span> -jar<\/span> $COMPILER<\/span> ..\/<\/span>dhtmlx\/<\/span>dhtmlxLayout\/<\/span>dhtmlxlayout.js >><\/span> $RES_JS<\/span>
\njava<\/span> -jar<\/span> $COMPILER<\/span> ..\/<\/span>dhtmlx\/<\/span>dhtmlxForm\/<\/span>dhtmlxform.js >><\/span> $RES_JS<\/span><\/div><\/div>\nThis script compresses the .js files and generates a single compiled.js file. In this example, we compile files for dhtmlxLayout and dhtmlxForm. If you need other DHTMLX components, add the corresponding files.<\/p>\n
Now, let’s compress the CSS code. In the CSS files of DHTMLX skins, we use relative paths for images so before compressing you need to remove extra “..\/” in the path to avoid the confusion in the compiled .js file that will link to the required images.<\/p>\n
![\"CSS](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/10\/css-paths-1.png\" "\\"CSS")
<\/p>\n
We will remove “..\/” using a PHP script. Create a parser.php<\/em> file:<\/p>\n<?php<\/span>
\nif<\/span> (<\/span>$argc<\/span> >=<\/span> 2<\/span>)<\/span> {<\/span>
\n $f<\/span> =<\/span> file_get_contents<\/span>(<\/span>$argv<\/span>[<\/span>1<\/span>]<\/span>)<\/span>;<\/span>
\n $f<\/span> =<\/span> str_replace<\/span>(<\/span>"..\/imgs\/"<\/span>,<\/span> "imgs\/"<\/span>,<\/span> $f<\/span>)<\/span>;<\/span>
\n file_put_contents<\/span>(<\/span>$argv<\/span>[<\/span>1<\/span>]<\/span>,<\/span> $f<\/span>)<\/span>;<\/span>
\n}<\/span>
\n?><\/span><\/div><\/div>\nThis script removes the relative path for images so the compiled dhtmlx.js<\/em> will find the required images for skins. The compiled .js file will be placed in the parent folder with the folder ‘images<\/strong>‘. <\/p>\nSo in the generated file the path to the images will be changed from:<\/p>\n
background-image<\/span>:<\/span> url<\/span>(<\/span>"..\/imgs\/dhxform_dhx_skyblue\/dhxform_btns.gif"<\/span>)<\/span>;<\/span><\/div><\/div>\nto:<\/p>\n
background-image<\/span>:<\/span> url<\/span>(<\/span>"imgs\/dhxform_dhx_skyblue\/dhxform_btns.gif"<\/span>)<\/span>;<\/span><\/div><\/div>\nThe CSS file will be placed in the same directory as the folder ‘images<\/strong>‘ and the folder ‘skins<\/strong>‘ will be removed. <\/p>\nThe script for compressing the CSS files (we will save it under “compile_css<\/em>” name):<\/p>\n#!\/bin\/bash<\/span>
\n
\nCOMPILER<\/span>=compiler.jar;
\n
\n# generating CSS<\/span>
\n
\nRES_CSS<\/span>=res\/<\/span>compiled.css
\n
\nK[<\/span>0<\/span>]<\/span>=..\/<\/span>dhtmlx\/<\/span>dhtmlxLayout\/<\/span>dhtmlxlayout.css
\nK[<\/span>1<\/span>]<\/span>=..\/<\/span>dhtmlx\/<\/span>dhtmlxLayout\/<\/span>skins\/<\/span>dhtmlxlayout_dhx_skyblue.css
\nK[<\/span>2<\/span>]<\/span>=..\/<\/span>dhtmlx\/<\/span>dhtmlxForm\/<\/span>skins\/<\/span>dhtmlxform_dhx_skyblue.css
\n
\n# first call parset to change imgs urls then compile<\/span>
\n
\necho<\/span> -ne<\/span> ""<\/span> ><\/span> $RES_CSS<\/span>;
\n
\nfor<\/span> i in<\/span> ${K[@]}<\/span>; do<\/span>
\n cp<\/span> $i<\/span> tmp.css;
\n php parser.php tmp.css;
\n java<\/span> -jar<\/span> $COMPILER<\/span> tmp.css >><\/span> $RES_CSS<\/span>;
\ndone<\/span>
\n
\nrm<\/span> tmp.css<\/div><\/div>\nThis script processes each CSS file with our PHP script (removes “..\/” in image paths) and compressed the CSS files in a single file. <\/p>\n
Using this approach, you get compressed .js and .css files for the DHTMLX library. As for the images, you need to copy them manually or create a custom script.<\/p>\n
The structure of folders and files that should be used for this approach:<\/p>\n
![\"Files](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/10\/before.jpg\" "\\"Files")
<\/p>\n
Where:<\/p>\n
\n- \/compiler\/compile_js – script to compile the .js files<\/li>\n
- \/compiler\/compile_css – script to compile the .css files<\/li>\n
- \/compiler\/res\/ – the folder where results will be generated, make sure this folder have r\/w permissions<\/li>\n
- \/compiler\/res\/imgs\/ – copy images from dhtmlx\/dhtmlx[NeededComponent]\/imgs\/* here<\/li>\n
- \/dhtmlx\/ – unpacked dhtmlx.zip should be here<\/li>\n<\/ul>\n
\nAfter compilation is over, you will have:<\/p>\n
![\"Files](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2013\/10\/after.jpg\" "\\"Files")
<\/p>\n
Please feel free to ask any questions in the comments. If you try this custom scripts for compressing the .js and .css files, let us know about your experience. <\/p>\n","protected":false},"excerpt":{"rendered":"
This post is for developers who work closely with the DHTMLX library and would like to use its advantages in a most proper way. As you might already know, …<\/p>\n","protected":false},"author":2,"featured_media":3404,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,14,10],"class_list":["post-2034","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-uncategorized","tag-all-posts","tag-tips","tag-dhtmlxsuite"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2034"}],"version-history":[{"count":5,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2034\/revisions"}],"predecessor-version":[{"id":15352,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2034\/revisions\/15352"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3404"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}