{"id":1656,"date":"2012-04-27T07:57:34","date_gmt":"2012-04-27T12:57:34","guid":{"rendered":"http:\/\/www.wiredprairie.us\/blog\/?p=1656"},"modified":"2012-04-27T07:58:18","modified_gmt":"2012-04-27T12:58:18","slug":"adding-an-external-tool-for-compiling-less-files-in-webstorm-on-windows","status":"publish","type":"post","link":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1656","title":{"rendered":"Adding an External Tool for Compiling LESS files in WebStorm (on Windows)"},"content":{"rendered":"

Interested in converting\/compiling LESS<\/a> files into their CSS counterparts?<\/p>\n

Here are the steps (from version 4 of WebStorm from JetBrains<\/a>).<\/p>\n

1. Install Node JS<\/a><\/p>\n

2. Install the node package (using npm) for less (remember where you install this as you\u2019ll need the path later): <\/p>\n

    \n
    npm install less<\/code><\/pre>\n<\/ol>\n
    3. In WebStorm, File<\/strong> > Settings<\/strong>, then under the IDE Settings heading, select External Tools<\/strong>.<\/p>\n
    4. Click on the + icon to add a new tool:<\/p>\n
    \"image\"<\/p>\n
    5. You\u2019ll see a dialog very much like this:<\/p>\n
    \"SNAGHTMLcd7f5f5\"<\/a><\/p>\n
    6. Fill it out like this (substitute whatever you\u2019d like of course):<\/p>\n
    \"SNAGHTMLceae4a7\"<\/a><\/p>\n
    I chose not to have the console window open every time the compilation occurs. <\/p>\n
    The only things you\u2019ll need to change is the path to the file lessc<\/strong>. That file is actually JavaScript file (minus the extension). So, replace the first quoted parameter in \u201cParameters\u201d above with the location that you installed the package for less in. <\/p>\n
    As it\u2019s a JavaScript file you need to be executed, the \u201cProgram\u201d is set to the node executable. Provide the full path (when I didn\u2019t, it sometimes <\/em>wouldn\u2019t work and would complain that a path didn\u2019t exist).<\/p>\n
    "###YOUR PATH TO LESSC###\\lessc" $FilePath$ "$FileDir$\\$FileNameWithoutExtension$.css"<\/p>\n
    I tried using the Working Directory option and it also worked inconsistently with Node. So, I used the options you see above and it seemed to work more consistently.<\/p>\n
    7. I also added a shortcut so I could execute it on demand:<\/p>\n
    \"SNAGHTMLcdbd3f4\"<\/p>\n
    \"SNAGHTMLcdc51ca\"<\/p>\n
    I picked Ctrl+Alt+L, as it was memorable (and available!).<\/p>\n
    While this is not using a file watcher technique (you could do that if you\u2019d like instead), it works well enough for my workflow.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Interested in converting\/compiling LESS files into their CSS counterparts? Here are the steps (from version 4 of WebStorm from JetBrains). 1. Install Node JS 2. Install the node package (using npm) for less (remember where you install this as you\u2019ll need the path later): npm install less 3. In WebStorm, File > Settings, then under […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[4],"tags":[94,95,93],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pd5QIe-qI","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":331,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/331","url_meta":{"origin":1656,"position":0},"title":"Velocity — a rockin’ distributed in memory cache for ASP.NET","date":"June 3, 2008","format":false,"excerpt":"Velocity, the code-name for a new in-memory distributed caching system for ASP.NET was released as a Community Tech Preview today. What is it? It's described in the documentation: Microsoft project code named \"Velocity\" provides a highly scalable in-memory application cache for all kinds of data. By using cache, your application\u2026","rel":"","context":"In "Coding"","img":{"alt_text":"image","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2008\/06\/image-thumb.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1930,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1930","url_meta":{"origin":1656,"position":1},"title":"Sending a socket to a forked process in Node.JS","date":"August 27, 2013","format":false,"excerpt":"If you want to fork a process in Node and pass a socket, the current Node documentation has a rather odd example, so I\u2019ve simplified it here for my own sanity (further complicated by the fact that the WebStorm debugger can\u2019t debug a forked Node.JS process, which confused me for\u2026","rel":"","context":"In "Coding"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":111,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/111","url_meta":{"origin":1656,"position":2},"title":"Disabling Apple Software Update on Vista","date":"April 10, 2008","format":false,"excerpt":"I've complained (and so have many others) about the Apple Software Update functionality -- especially now that it suggests that I update software I never had installed (Safari)! On Vista (and XP is probably similar), there's a scheduled task that runs once a week to look for updates. To stop\u2026","rel":"","context":"In "Software"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1592,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1592","url_meta":{"origin":1656,"position":3},"title":"Get path or location of currently executing batch\/command file in Windows","date":"April 1, 2012","format":false,"excerpt":"I didn\u2019t know it was this simple, and am posting this information on my blog so I find it in the future, but hopefully this will help someone else! I\u2019ve created a number of batch files over the years which routinely copy files from one location to another, usually as\u2026","rel":"","context":"In "Coding"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2020,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/2020","url_meta":{"origin":1656,"position":4},"title":"My Raspberry Pi 2 Model B setup","date":"March 9, 2015","format":false,"excerpt":"I recently purchased a Raspberry Pi 2 in preparation for installation of Windows 10 (and more) (when there\u2019s a version that\u2019s compatible). In the mean time, I installed the current version of Raspbian. I bought a simple case via Amazon. Nothing too fancy \u2026 extremely functional (it allows the LEDs\u2026","rel":"","context":"In "Recommendations"","img":{"alt_text":"image of Raspberry Pi desktop","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2015\/03\/image1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1820,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1820","url_meta":{"origin":1656,"position":5},"title":"Knockout binding for JavaScript route fixup","date":"January 25, 2013","format":false,"excerpt":"Part one. After the first round, I felt compelled to KnockOut the code a bit more. I\u2019d mentioned I wasn\u2019t pleased with the code exactly. It needed some refactoring. So, I\u2019ve created a new Knockout binding handler. This binding handler replaces\u00a0 named parameters with a model\u2019s properties in a path.\u2026","rel":"","context":"In "Coding"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/1656"}],"collection":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/comments?post=1656"}],"version-history":[{"count":2,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/1656\/revisions"}],"predecessor-version":[{"id":1662,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/1656\/revisions\/1662"}],"wp:attachment":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/media?parent=1656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/categories?post=1656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/tags?post=1656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}