emilobergemiloberg
25

Liferay Instant Deploy Theme Changes Gulp Script

screenshot of Liferay Instant Deploy Theme Changes Gulp Script

This small Gulp script will monitor your source code theme folder and when a file is changed: 1. Instantly inject those theme changes into the server. 2. Makes sure that the scss is recompiled into a css file if needed. 3. LiveReload. If the scss is changed, the browser is updated instantly - wi...

Github

Overview

The Liferay Instant Deploy Theme Changes Gulp Script is a game-changer for developers working with Liferay themes. This small yet powerful tool monitors your theme folder for any changes and instantly injects those modifications into the server. With features like automatic SCSS recompilation and LiveReload functionality, it streamlines the development process, allowing developers to focus more on coding and less on manual updates.

As developers continuously refine their themes, this Gulp script ensures that updates are reflected in real-time, making the testing phase seamless. Whether you're tweaking CSS properties or diving into SCSS adjustments, this tool enhances efficiency and accelerates the development workflow.

Features

  • Instant Injection: Automatically transfers modified theme files to the Liferay server, making changes visible instantly upon reload.
  • SCSS Compilation: Recompiles SCSS files into CSS, ensuring that any changes in partials are automatically processed and updated.
  • Timestamp Commenting: Adds a timestamp comment to entry point SCSS files when a partial is changed, prompting Liferay to reprocess and compile the necessary CSS files.
  • LiveReload Integration: Updates the browser in real-time without requiring a full page reload, enhancing the development experience.
  • Node.js Requirement: Built on Node.js, requiring it to be installed for the script to function properly.
  • Easy Installation: Installation is straightforward, involving simple npm commands to set up dependencies and start the Gulp process.
  • Customizable Configuration: Developers can easily configure directories to watch for changes, suiting their specific project structures and workflows.
  • Compatible with Major Browsers: Supports LiveReload functionality across popular browsers such as Chrome, Firefox, and Safari with minimal setup needed.
template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.