![]() Providing a possibility to associate additional persistent data with a file in the VFS. Tracking file modifications and providing both old and new versions of the file content when a change is detected. Providing a universal API for working with files regardless of their actual location (on disk, in an archive, on an HTTP server, etc.) The moment you change a LESS file, it’ll get re-compiled into the corresponding CSS file within the corresponding directory in the artifact output, and you’ll be able to see the changes immediately.The Virtual File System (VFS) is a component of the IntelliJ Platform that encapsulates most of its activity for working with files represented as Virtual File. Select your scope: Select the CSS/LESS directory within your web module (ensure you click on Include Recursively after you’ve selected the directory).Clear any output filters added automatically: Press the Output Filters… button, and remove anything inside there.Hit the “+” button and select “Less”.Ĭonfigure your new watcher as shown in the screenshot below:īefore your hit the OK button, a few things to do: Go to Preferences, and navigate to File Watchers under Tools (left menu). Part 2: Configure the File Watcher plugin to re-compile LESS files edited: Once this is done, your LESS files should be automatically generated when you deploy your web app. Hit the “+” button to add a new External Tool, and configure it as follows:Įnsure that the build order in your run configuration is as follows: Hit the “+” button, and select “Run External Tool”. Now, open up your run configuration, and scroll all the way to the bottom (where it says Make, followed by Build artifact …). $ chmod +x /Users/username/bin/lessc-idea Note: You will need to update the variable exploded_artifact_path in the script above. If the code formatting looks messed up, you may view the code here, on GitHub Target=`echo $1 | sed s/web// | sed s/.less/.css/`Įcho "Generating $exploded_artifact_path/$target"įind $exploded_artifact_path -name *.less | while read path do Part 1: Compile the LESS into CSS just before deploymentĬopy the following script and save it as /Users/username/bin/lessc-idea:Įxploded_artifact_path=/Users/jude/developer/CleverTap/out/artifacts/Dashboard_war_exploded On the right, you’ll see the output directory.If you don’t know how to get this, follow these steps: Knowing where your exploded artifact resides (in my case, it is /Users/jude/developer/WizRocket/out/artifacts/Dashboard_war_exploded).A run configuration that is configured to deploy an exploded WAR (can be either Tomcat/Jetty/anything).Hit the “Install JetBrains plugin…” button, and search for “file watchers”.Go to Preferences in IDEA, then to Plugins.Install the File Watcher plugin in IntelliJ.If you don’t have the Node Package Manager, just search on how to install it (most likely you’d use Homebrew) The LESS compiler – can be installed using npm (npm install -g less).Have the File Watcher plugin re-compile a modified LESS file within the IDE, and copy it over to the artifact output directoryīoth parts above utilize a bash script (since everybody here at CleverTap uses a Mac for development, it’s cool).Just before deploying the app into the web container, compile all the LESS files within the exploded artifact output directory.While it has it’s upsides, the biggest downside was that most of our developers couldn’t use the hot deploy feature for their local deployments.Īfter an hour or so, we came up with a neat solution. At CleverTap, we’ve recently started using LESS for dynamic CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |