phpstorm filewatchersinphpstorm 200116 0037 2504

7/25/2019 PhpStorm FileWatchersinPhpStorm 200116 0037 2504

1/4

1.

2.

File Watchers in PhpStorm

A very powerful tool in PhpStorm is the File Watchers plugin. It instructs the IDE to monitor changes to specific files or file types and automaticallyruns a command line tool upon change. For example, we could automatically minimize a CSS or JavaScript file whenever it is saved, or transpileCoffeeScript or TypeScript into JavaScript when updates to a script have been made.

The following are some popular tools but note PhpStorm can monitor any f ile type and run any command line tool based on changes.

YUI CompressorClosure CompilerTypeScript compilerCoffeeScript compiler(and for sourcemaps)reduxLess compilerSass / Scss compilerUglifyJS...

Let's see how we can work with File Watchers.

1. Enable the File Watchers plugin2. Configuring File Watchers3. Editing file types configured with File Watchers

1. Enable the File Watchers plugin

Depending on the PhpStorm version you are using, it may be required to enable the File Watchers plugin.

From the settings dialog ( / on Mac OS X) navigate to .Ctrl+Alt+S Command+, IDE Settings | Plugins

Make sure the plugin is enabled. If it isn't listed in the list of plugins, click the button to find it.File Watchers Install JetBrains plugin...

Tweet

In this tutorial, we will work with File Watchers in PhpStorm to automatically run a command line tool whenever a file in our project ismodified.
http://yui.github.com/yuicompressor/https://developers.google.com/closure/compiler/http://www.typescriptlang.org/http://coffeescript.org/https://github.com/michaelficarra/CoffeeScriptReduxhttp://lesscss.org/http://sass-lang.com/https://github.com/mishoo/UglifyJShttps://twitter.com/sharehttps://twitter.com/sharehttps://github.com/mishoo/UglifyJShttp://sass-lang.com/http://lesscss.org/https://github.com/michaelficarra/CoffeeScriptReduxhttp://coffeescript.org/http://www.typescriptlang.org/https://developers.google.com/closure/compiler/http://yui.github.com/yuicompressor/


2/4

2. Configuring File Watchers

When PhpStorm detects that you are working in a type of file it can "watch," it will prompt us to set up a File Watcher. Here's an example whenworking in a file:.less

Enabling the File Watcher will add the following configuration to the :Project Settings | File Watchers


3/4

1.2.3.

From the File Watcher configuration, we can see it will do the following:

Watch for changes on all LESS files (within project files).Convert them to CSS using (the LESS compiler) whenever they are changed.lessc.cmdUses command line arguments to tell the tool about the source file.

File Watchers will trigger while we type in our IDE. By deselecting the checkbox, we can change this to onlyImmediate File Synchronizationtrigger when files are saved.

3. Editing file types configured with File Watchers

While editing a file type that has a File Watcher configured, files will be generated. LESS files will be converted into CSS, TypeScript andCoffeeScript will generate a JavaScript file and a source map and so on. PhpStorm will group these files in the Project Tool Window, keeping ourproject organized while still giving access to the original file and files generated through the File Watcher plugin.

Next to automatically configuring File Watchers for known file types, PhpStorm also supports configuring custom File Watchers. Check tfor an example on how to do that.his blog post

Many File Watchers make use of tools that are not bundled with PhpStorm and have to be installed separately. Search web help for

more information on how to install these. Here is an example for .installing the CoffeeScript compiler using NPM
http://blog.jetbrains.com/phpstorm/2013/10/visualizing-composer-dependencies-with-file-watchers/http://blog.jetbrains.com/phpstorm/2013/10/visualizing-composer-dependencies-with-file-watchers/http://www.jetbrains.com/phpstorm/webhelp/transpiling-coffeescript-to-javascript.htmlhttp://www.jetbrains.com/phpstorm/webhelp/transpiling-coffeescript-to-javascript.htmlhttp://blog.jetbrains.com/phpstorm/2013/10/visualizing-composer-dependencies-with-file-watchers/http://blog.jetbrains.com/phpstorm/2013/10/visualizing-composer-dependencies-with-file-watchers/


4/4

When the command line tool executed by the File Watcher fails, output will be shown in the IDE. This can be very useful for troubleshooting or fordiscovering syntax errors.

Tweet
https://twitter.com/sharehttps://twitter.com/share

phpstorm filewatchersinphpstorm 200116 0037 2504

Documents