inside the custom.css file, I found prefixes (see example below, on right) which suggests to me that the autoprefixer is working also.īack to the watcher edit window.two new files showed up below/inside it - custom.css and - which suggests to me that the scss/sass step is working and.I just made a tiny edit to custom.scss and noticed the following: With thanks for your help, I have arrived at the following, and most importantly, it seems to be working! I'll show what I mean and appreciate your input or correction of any misimpression. Anywhere.Īdmittedly, I do not completely understand the significance of the $xxx$ variables (macros perhaps? - whatever you call them) - I assume they are built in somehow to PHPStorm. I ask this because I do not have a dist folder. Now, you will be able to debug your CoffeeScript Gruntfile just as if it was written in JavaScript.Thank you Elena Pogorelova! This is very helpful.Ĭould you please explain '/dist/'? I see it both in the arguments, and in the Output paths to refresh. Also, to make sure the converted file is always up-to-date, you should require the debug configuration to Run File Watchers before launching the script. You will still need to point to the JavaScript Gruntfile in the WebStorm debug configuration, though. A JavaScript source map will be generated alongside it, allowing you to debug the original CoffeeScript file instead of the converted JavaScript one. Now your CoffeeScript Gruntfile will automatically be converted to a JavaScript one, whenever WebStorm detects changes. I suggest you install the coffee-script NPM package globally and point to coffee.cmd file it installs in the root of your global package installation directory ( C:\Users\damir\AppData\Roaming\npm in my case). Again, almost everything is preconfigured for you only the Program must be chosen manually. Select Tools > File Watchers node in the tree view on the left (you can search for file watchers, to find it quicker) and click on the "plus" icon in the top right corner to add a new file watcher, based on CoffeeScript template. You will first need to configure a CoffeeScript file watcher in the Settings dialog. It turned out that WebStorm's file watchers were the right way to go. Not only was that much less convenient (having to manually start Node from command line every time), the mapping to CoffeeScript source was also mismatched, which made the approach almost useless. My next attempt was starting the Node interpreter directly and attaching to it from WebStorm. Even though Grunt can run CoffeeScript scripts directly, WebStorm will report errors if you set a CoffeeScript Gruntfile in your debug configuration. If your Gruntfile is written in CoffeeScript, you're not done yet. You can now set a couple of breakpoints and start debugging using the Run menu or the Debug tool window (the latter will open automatically once you start debugging, if you have it closed). If you have written your Grunt script in JavaScript, then that's all you need to do. Optionally you can also set the Tasks to run if you want to debug anything else than default. The only things left for you to fill in are the configuration Name (up to you) and the path to the Gruntfile you want to the debug. Grunt-cli package should point to where you have the package globally installed ( C:\Users\damir\AppData\Roaming\npm\node_modules\grunt-cli in my case).Node interpreter should point to your Node executable ( C:\Program Files\nodejs\node.exe in my case). If you have your Node.js environment correctly setup and grunt-cli package installed globally, two important fields should already be prefilled for you: Among them is also Grunt.js - the one that we need to use. The little "plus" icon in its top left corner opens a menu with a selection of preconfigured templates for debugging different types of Node.js scripts. A proper debug configuration needs to be created for that, using Run/Debug Configurations dialog (accessible via Run > Edit Configurations. It's only a matter of getting used to WebStorm's debugging workflow.Īlthough there's support for temporary debug configurations which can be created ad hoc, this approach can't be used for debugging Grunt scripts. To no surprise, WebStorm has built-in support for debugging all kinds of Node.js scripts, including Gruntfiles. Since I've been recently using WebStorm as my JavaScript IDE of choice, I also wanted to be able to debug my task directly inside it. Grunt CoffeeScript WebStorm Creating a Debug ConfigurationĪs soon as I started developing my first Grunt multi task, it became obvious that being able to debug it, will shorten my development time a lot.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |