Nowadays most of the applications are using SASS instead of CSS, because of its advantages. But it is more important that we need to compile the SASS into CSS. For SASS compilation, there might be lots of native applications & JAVA libraries available.
Both have some advantages & disadvantages like installation required ( in terms of native apps or JS watchers ) or no real-time compilation ( in terms of pure JAVA libraries ).
We all might be satisfied with the above mentioned ways of SASS compilation. But we can now able to do the same compilation with the help of a JAVA library & Event gateways using Lucee.
Requirements:
- Knowledge to create an event gateway in Lucee
- Knowledge about using JSass JAVA library
If you've enough knowledge to create an event gateway in Lucee, it is very simple work to make it working as a SASS compiler gateway. For that, you should have the same list of files as we seen in How to create event gateway in Lucee.
Additionally we need to add the below code in listener component's checkChange function. This is the essential part of compiling the sass file into a css file.
sassCompilerListener.cfc
<cfcomponent>
<cffunction name="compileSASS" access="public" output="no" returntype="void">
<cfargument name="data" type="struct" required="yes">
<cftry>
<cfset fileCompile(
arguments.data.directory,
arguments.data.name,
replaceNoCase(arguments.data.name, "scss", "css", "ALL")
)>
<cfscript>
for(files in scssDirectory){
if( !listFindNoCase(".,_", left(files.name, 1)) ){
if(!directoryExists(replaceNoCase(files.directory, "sass", "css","all"))){
directoryCreate(replaceNoCase(files.directory, "sass", "css","all"));
}
}
}
</cfscript>
<cfcatch type="any">
<cflog
text="change:#serialize(data)#"
type="information"
file="DirectoryWatcher">
</cfcatch>
</cftry>
</cffunction>
<cffunction name="fileCompile" access="private" returntype="void">
<cfargument name="basePath" type="string" required="true">
<cfargument name="inFileName" type="string" required="true">
<cfargument name="outFileName" type="string" required="true">
<cfscript>
var jars = directoryList(
arguments.basePath & "/model/java/sassLib",
false,
"path",
"*.jar"
);
var compiler = createObject(
"java",
"io.bit3.jsass.Compiler",
jars
);
var file = createObject(
"java",
"java.io.File",
jars
);
var options = createObject(
"java",
"io.bit3.jsass.Options",
jars
);
var inFile = arguments.basePath & "/" & arguments.inFileName;
var outFile = arguments.basePath & "/" & arguments.outFileName;
options.setOmitSourceMapUrl(false);
options.setSourceMapContents(true);
options.setSourceComments(true);
options.setSourceMapFile(
file.init(
replaceNoCase(outFile, ".css", "") & ".map"
).toURI()
);
var compilerResult = compiler.compileFile(
file.init(inFile).toURI(),
file.init(
replaceNoCase(inFile, ".scss", ".css")
).toURI(),
options
);
fileWrite(
outFile,
compilerResult.getCss()
);
fileWrite(
replaceNoCase(outFile, ".css", "") & ".map",
compilerResult.getSourceMap()
);
</cfscript>
</cffunction>
</cfcomponent>As we changed the listener function name & used the JSass java library, we should make the necessary changes like changing the listener CFC path in driver component & place the JSass library in corresponding folders.
Once you've done with creating the new instance for this event gateway, if there is any file change happened in the folder mentioned, the SCSS will be automatically converted into CSS.