Replace maven-frontend-plugin with sass-cli-maven-plugin
Use Maven wrapper around Dart SASS binary instead of downloading and installing NodeJS / NPM locally. This also eliminates dependency from Grunt and its modules.
This commit is contained in:
Florian Enner
GitHub
parent
84c9a23fa9
commit
a0a5f0ca85
20
README.md
20
README.md
@ -46,10 +46,6 @@ Application.setUserAgentStylesheet(new PrimerDark().getUserAgentStylesheet());
|
||||
You can either use CLI or create run configuration in your favorite IDE.
|
||||
|
||||
```sh
|
||||
# except building parent module, this will also install NodeJS along with NPM
|
||||
# and all JS dependencies into root project directory, you don't need to install NodeJS system-wide
|
||||
mvn --non-recursive install
|
||||
|
||||
# compile SASS into styles/dist directory,
|
||||
# you can stop here and use compiled CSS files in your app just like that
|
||||
mvn install -pl styles
|
||||
@ -65,25 +61,19 @@ After building module dependencies you can play with the sampler application. If
|
||||
mvn javafx:run -pl sampler
|
||||
```
|
||||
|
||||
If you want to use hot reload (update CSS without restarting sampler) you have to start app in development mode. There's [ATLANTAFX_MODE](https://github.com/mkpaz/atlantafx/blob/master/sampler/src/main/java/atlantafx/sampler/Launcher.java#L45) variable for this. In that mode app won't use CSS from `base` module classpath, but from the `sampler/target/classes/atlantafx/sampler/theme-test` directory. Use `styles/compile-scss-dev.sh` to compile CSS files into that destination.
|
||||
If you want to use hot reload (update CSS without restarting sampler) you have to start app in development mode. There's [ATLANTAFX_MODE](https://github.com/mkpaz/atlantafx/blob/master/sampler/src/main/java/atlantafx/sampler/Launcher.java#L45) variable for this. In that mode app won't use CSS from `base` module classpath, but from the `sampler/target/classes/atlantafx/sampler/theme-test` directory. Use `-Pdev` to compile CSS files into that destination.
|
||||
|
||||
```sh
|
||||
# compile CSS files first or there will be an exception
|
||||
cd styles
|
||||
./compile-scss-dev.sh
|
||||
cd -
|
||||
# run sampler app in dev mode
|
||||
mvn javafx:run -pl sampler -Pdev
|
||||
|
||||
# then run sampler along with setting env variable
|
||||
ATLANTAFX_MODE=dev mvn javafx:run -pl sampler
|
||||
# run hot reload sass
|
||||
mvn compile -pl styles -Pdev
|
||||
```
|
||||
|
||||
This may look a bit complicated, but at the end you just need to create 4 IDE run configurations and open VS Code instance in parallel in styles directory to edit and rebuild CSS files. Run `compile-scss-dev.sh` script each time to reflect made changes without restarting the application.
|
||||
|
||||
More details can be found in the source code:
|
||||
|
||||
* See [github worklow](https://github.com/mkpaz/atlantafx/blob/master/.github/workflows/tagged-release.yml) for install instructions.
|
||||
* See [Gruntfile.js](https://github.com/mkpaz/atlantafx/blob/master/styles/Gruntfile.js) to familiarize with CSS compilation.
|
||||
|
||||
|
||||
## Motivation
|
||||
|
||||
|
||||
11
base/pom.xml
11
base/pom.xml
@ -44,17 +44,6 @@
|
||||
<filtering>false</filtering>
|
||||
</resource>
|
||||
</resources>
|
||||
|
||||
<plugins>
|
||||
<!-- not used, just prevents installing NodeJS to the module dir -->
|
||||
<plugin>
|
||||
<groupId>com.github.eirslett</groupId>
|
||||
<artifactId>frontend-maven-plugin</artifactId>
|
||||
<configuration>
|
||||
<installDirectory>${project.parent.basedir}</installDirectory>
|
||||
</configuration>
|
||||
</plugin>
|
||||
</plugins>
|
||||
</build>
|
||||
|
||||
</project>
|
||||
|
||||
2514
package-lock.json
generated
2514
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -1,12 +0,0 @@
|
||||
{
|
||||
"name": "atlanta",
|
||||
"version": "1.0.0",
|
||||
"devDependencies": {
|
||||
"grunt": "^1.4.1",
|
||||
"grunt-cli": "^1.4.1",
|
||||
"grunt-contrib-concat": "^2.0.0",
|
||||
"grunt-contrib-cssmin": "^4.0.0",
|
||||
"grunt-sass": "^3.1.0",
|
||||
"sass": "^1.49.9"
|
||||
}
|
||||
}
|
||||
35
pom.xml
35
pom.xml
@ -60,7 +60,6 @@
|
||||
|
||||
<java.version>17</java.version>
|
||||
<openjfx.version>17.0.0.1</openjfx.version>
|
||||
<nodejs.version>v16.14.2</nodejs.version>
|
||||
|
||||
<app.name>AtlantaFX</app.name>
|
||||
<!-- DO NOT use ${project.version} as jpackage will fail on
|
||||
@ -195,9 +194,9 @@
|
||||
<version>3.0.0</version>
|
||||
</plugin>
|
||||
<plugin>
|
||||
<groupId>com.github.eirslett</groupId>
|
||||
<artifactId>frontend-maven-plugin</artifactId>
|
||||
<version>1.9.1</version>
|
||||
<groupId>us.hebi.sass</groupId>
|
||||
<artifactId>sass-cli-maven-plugin</artifactId>
|
||||
<version>1.0.1</version>
|
||||
</plugin>
|
||||
<plugin>
|
||||
<groupId>org.apache.maven.plugins</groupId>
|
||||
@ -262,34 +261,6 @@
|
||||
</plugin>
|
||||
</plugins>
|
||||
</pluginManagement>
|
||||
<plugins>
|
||||
<plugin>
|
||||
<groupId>com.github.eirslett</groupId>
|
||||
<artifactId>frontend-maven-plugin</artifactId>
|
||||
<configuration>
|
||||
<nodeVersion>${nodejs.version}</nodeVersion>
|
||||
<workingDirectory>${project.basedir}</workingDirectory>
|
||||
</configuration>
|
||||
<executions>
|
||||
<execution>
|
||||
<id>install-node-and-npm</id>
|
||||
<goals>
|
||||
<goal>install-node-and-npm</goal>
|
||||
</goals>
|
||||
</execution>
|
||||
<execution>
|
||||
<id>install-npm-packages</id>
|
||||
<phase>generate-resources</phase>
|
||||
<goals>
|
||||
<goal>npm</goal>
|
||||
</goals>
|
||||
<configuration>
|
||||
<arguments>install</arguments>
|
||||
</configuration>
|
||||
</execution>
|
||||
</executions>
|
||||
</plugin>
|
||||
</plugins>
|
||||
</build>
|
||||
|
||||
<profiles>
|
||||
|
||||
@ -149,13 +149,6 @@
|
||||
</execution>
|
||||
</executions>
|
||||
</plugin>
|
||||
<plugin>
|
||||
<groupId>com.github.eirslett</groupId>
|
||||
<artifactId>frontend-maven-plugin</artifactId>
|
||||
<configuration>
|
||||
<installDirectory>${project.parent.basedir}</installDirectory>
|
||||
</configuration>
|
||||
</plugin>
|
||||
<plugin>
|
||||
<groupId>org.apache.maven.plugins</groupId>
|
||||
<artifactId>maven-dependency-plugin</artifactId>
|
||||
@ -284,6 +277,22 @@
|
||||
</build>
|
||||
|
||||
<profiles>
|
||||
<profile>
|
||||
<id>dev</id>
|
||||
<build>
|
||||
<plugins>
|
||||
<plugin>
|
||||
<groupId>org.openjfx</groupId>
|
||||
<artifactId>javafx-maven-plugin</artifactId>
|
||||
<configuration>
|
||||
<options>
|
||||
<option>-Datlantafx.mode=dev</option>
|
||||
</options>
|
||||
</configuration>
|
||||
</plugin>
|
||||
</plugins>
|
||||
</build>
|
||||
</profile>
|
||||
<profile>
|
||||
<id>linux-active</id>
|
||||
<activation>
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
module.exports = function (grunt) {
|
||||
const SASS_COMPILER = require('sass');
|
||||
const CSS_OUTPUT_DIR = process.env.NODE_ENV !== 'dev' ? 'dist' : '../sampler/target/classes/atlantafx/sampler/theme-test';
|
||||
|
||||
grunt.initConfig({
|
||||
cssOutputDir: CSS_OUTPUT_DIR,
|
||||
sass: {
|
||||
|
||||
options: {
|
||||
implementation: SASS_COMPILER
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'<%= cssOutputDir %>/primer-light.css': [ 'src/primer-light.scss' ],
|
||||
'<%= cssOutputDir %>/primer-dark.css': [ 'src/primer-dark.scss' ]
|
||||
}
|
||||
}
|
||||
},
|
||||
cssmin: {
|
||||
dist: {
|
||||
files: {}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-sass');
|
||||
grunt.loadNpmTasks('grunt-contrib-cssmin');
|
||||
grunt.registerTask('default', ['sass', 'cssmin']);
|
||||
};
|
||||
@ -1,6 +0,0 @@
|
||||
#!/usr/bin/env sh
|
||||
|
||||
# This scipt compiles SCSS directly to the sampler classpath for hot reload (CSSFX).
|
||||
|
||||
PATH="../node:$(../node/npm bin):$PATH"
|
||||
NODE_ENV=dev grunt --verbose --gruntfile=Gruntfile.js
|
||||
@ -10,28 +10,35 @@
|
||||
</parent>
|
||||
<artifactId>atlantafx-styles</artifactId>
|
||||
|
||||
<properties>
|
||||
<scss.inputDir>${project.basedir}/src</scss.inputDir>
|
||||
<css.outputDir>${project.basedir}/dist</css.outputDir>
|
||||
</properties>
|
||||
|
||||
<build>
|
||||
<plugins>
|
||||
<!-- compile SCSS -->
|
||||
<plugin>
|
||||
<groupId>com.github.eirslett</groupId>
|
||||
<artifactId>frontend-maven-plugin</artifactId>
|
||||
<groupId>us.hebi.sass</groupId>
|
||||
<artifactId>sass-cli-maven-plugin</artifactId>
|
||||
<configuration>
|
||||
<installDirectory>${project.parent.basedir}</installDirectory>
|
||||
<args>
|
||||
<arg>${scss.inputDir}/primer-light.scss:${css.outputDir}/primer-light.css</arg>
|
||||
<arg>${scss.inputDir}/primer-dark.scss:${css.outputDir}/primer-dark.css</arg>
|
||||
<arg>--no-source-map</arg>
|
||||
</args>
|
||||
</configuration>
|
||||
<executions>
|
||||
<execution>
|
||||
<id>run-grunt</id>
|
||||
<id>run-sass</id>
|
||||
<phase>generate-resources</phase>
|
||||
<goals>
|
||||
<goal>grunt</goal>
|
||||
<goal>run</goal>
|
||||
</goals>
|
||||
<configuration>
|
||||
<arguments>--verbose</arguments>
|
||||
</configuration>
|
||||
</execution>
|
||||
</executions>
|
||||
</plugin>
|
||||
|
||||
<!-- compress resulting CSS into archive for distribution -->
|
||||
<plugin>
|
||||
<groupId>org.apache.maven.plugins</groupId>
|
||||
@ -67,4 +74,14 @@
|
||||
</plugins>
|
||||
</build>
|
||||
|
||||
<profiles>
|
||||
<profile>
|
||||
<id>dev</id>
|
||||
<properties>
|
||||
<css.outputDir>${project.basedir}/../sampler/target/classes/atlantafx/sampler/theme-test</css.outputDir>
|
||||
<sass.watch>true</sass.watch>
|
||||
</properties>
|
||||
</profile>
|
||||
</profiles>
|
||||
|
||||
</project>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user