GoLand 2020.1 Help

Minifying CSS

Minification or compression means removing all unnecessary characters, such as spaces, new lines, comments without changing the functionality of the source code. During development and debugging, these characters make code easier to read. At the production stage they only increase the size of code to be transferred.

Most often compression is done as a step in your build process, using tools like webpack. If you're not using build tools, you can use stand-alone tools like CSSO or cssnano.

To minify your code automatically, you need to configure the tool as a GoLand File Watcher.

By default, minification starts as soon as a CSS file in the File Watcher's scope is changed and saved. You can specify other events that invoke the File Watcher.

The generated minified code is stored in a separate file with the name of the source CSS file and the extension min.css. The location of this generated file is defined in the Output paths to refresh field of the New Watcher dialog. However, in the Project Tree, the file with the minified code is shown under the source CSS file which is displayed as a node. To change this default presentation, configure file nesting in the Project tool window.

Before you start

  1. Make sure you have Node.js on your computer.

  2. Make sure the CSS bundled plugin is enabled on the Plugins page, see Managing plugins for details.

Install csso-cli globally

  • In the embedded Terminal (Alt+F12) , type:

    npm install -g csso-cli

Create a File Watcher

  1. In the Settings/Preferences dialog Ctrl+Alt+S, click File Watchers under Tools. The File Watchers page that opens shows the list of already configured File Watchers.

  2. Click Add button or press Alt+Insert and select the CSSO CSS Optimizer predefined template from the list.

    Create CSSO watcher: Click Add and select template

    The New Watcher dialog opens.

    Create CSSO watcher: New Watcher dialog with default settings
  3. In the Program text box, specify the location of the csso-cli package.

    If you installed csso-cli through the Node Package Manager, GoLand locates the package itself and fills in the field automatically with the csso alias Otherwise, type the path manually or click icons.general.openDiskHover.png and select the file location in the dialog box that opens.

  4. Accept the default File Watcher settings or reconfigure them, if necessary, as described in File Watchers, and click OK. GoLand brings you back to the File Watchers page where the new File Watcher is added to the list:

    Create CSSO watcher: New Watcher added to the list
  5. Make sure the Enabled checkbox is selected.

    By default, the File Watcher will be available in the current project. To use it in other projects, select Global from the Level list.

Last modified: 09 July 2020