Combine two Javascript directories into two single, separate files - javascript

The project I'm working on is using combineJS from this gradle plugin in its gradle build. What it does is combine the contents of a directory, in this case topsoil_js, into a single javascript file. I would like to do the same, but with the contents of a different directory, plots_js, into a different single file.
The current code looks like this:
javascript.source {
topsoil {
js {
srcDir 'src/main/resources/org/cirdles/topsoil/plot/topsoil_js'
include '*.js'
}
}
plots {
js {
srcDir 'src/main/resources/org/cirdles/topsoil/plot/plots_js'
include '*js'
}
}
}
combineJs {
source = javascript.source.topsoil.js.files
dest = file("${project.buildDir}/resources/main/org/cirdles/topsoil/plot/topsoil.js")
}
I've tried adding an identical combineJs statement to combine plots_js, like so:
combineJs {
source = javascript.source.plots.js.files
dest = file("${project.buildDir}/resources/main/org/cirdles/topsoil/plot/plots.js")
}
The problem is that source and dest get overwritten, so only the last combineJs you call actually combines a file. I'm relatively new to gradle, so I'm not actually sure how the rest of the project consumes these variables. Are they keywords that gradle knows to look for, or are they arbitrary?
Most importantly: does anyone have suggestions on how to combine both sets of files?
EDIT: I also tried following the instructions in this documentation for the plugin, which tells me to format it like so:
task combineTopsoilJs(type: com.eriwen.gradle.js.tasks.CombineJsTask) {
source = javascript.source.topsoil.js.files
dest = file("${project.buildDir}/resources/main/org/cirdles/topsoil/plot/topsoil.js")
}
task combinePlotJs(type: com.eriwen.gradle.js.tasks.CombineJsTask) {
source = javascript.source.plots.js.files
dest = file("${project.buildDir}/resources/main/org/cirdles/topsoil/plot/BasicPlot.js")
}
But this format isn't working either, just throwing an error I'm having trouble tracking down.

Related

kotlin-js gradle outputfile wrong

I'm working on kotlin-js example. I used this sample. When I was build frontend module(as shown in the picture below) I can't see web folder. But the resource files should be in web folder. What's wrong?
Project Source Image
buildscript {
ext.kotlin_version = '1.2.30'
repositories {
mavenCentral()
}
dependencies {
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
group 'example'
version '1.0-SNAPSHOT'
apply plugin: 'kotlin2js'
repositories {
mavenCentral()
}
dependencies {
compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
testCompile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version"
}
build.doLast {
configurations.compile.each { File file ->
copy {
includeEmptyDirs = false
from zipTree(file.absolutePath)
into "${projectDir}/web"
include { fileTreeElement ->
def path = fileTreeElement.path
path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/"))
}
}
}
}
compileKotlin2Js {
kotlinOptions.outputFile = "${projectDir}/web/output.js"
kotlinOptions.sourceMap = true
}
Your copy { ... } block only sets up copying of the dependency files from the compile configuration, and it does not copy the resources of your project into web. Neither does the compileKotlin2Js task, which only puts the compiled Kotlin classes into that directory.
To copy the resources of the main source set, you can add another copy { ... } block, like this:
build.doLast {
// ...
copy {
from sourceSets.main.output.resourcesDir
into "${projectDir}/web"
}
}
And note that if you only copy the files, you may end up with stale output files left from the previous run (if a file no more exists in the source directory, its copy is not deleted from the target). Instead, consider using the default output file location for the compileKotlin2Js task and a Sync task to synchronize the directories, as described in this guide (it does not mention the resources; add them with from ... as suggested above). If you need to customize the output file name, you can use archivesBaseName for that.

minimize js files in gradle build while creating a war

I am completely new to gradle and I am manage to create war through gradle-4.2.1 by following scripts :
apply plugin: 'war'
archivesBaseName = "idcapture"
version = '1.0'
webAppDirName = 'WebContent'
buildDir = 'gradle_Build'
sourceSets {
main {
java {
srcDir 'src'
}
resources {
srcDir 'conf'
}
}
}
dependencies {
compile fileTree(dir: "WebContent/WEB-INF/lib", include: '*.jar')
}
I can able to create an war file by above code but my intention the war file should have minimized version of JS files. Hence I have tried n number of places.
I tried erwin js plugin and I am unable to implement:
fyr, https://github.com/eriwen/gradle-js-plugin
Especially I am not able to point the js file paths and minimize function my script. The errors are various and I am not sure where to place that in my script!!
Fyr, my application folder structure attached
any help would be appreciated. Thanks
I found it, if we add following erwil libs on any place of the build. it works fine:
plugins {
id 'com.eriwen.gradle.js' version '2.14.1'
}
import com.eriwen.gradle.js.tasks.MinifyJsTask
task minifyJS << {
println "lets minify"
fileTree('WebContent/js').eachWithIndex { file, index ->
def dynamicTask = "minify$index"
task "$dynamicTask" (type: MinifyJsTask) {
source = file
dest = file
}
tasks."$dynamicTask".execute()
}
}

How to rename the original files of scripts in index.html using gulp?

I've written a gulp task to rename files so that they can be versioned. The problem is that the filenames of the files that the index.html scripts reference are not changed.
For example, in my index.html:
<script src=pub/main_v1.js"></script>
But if you actually navigate through the build folder to the subdirectory pub, you will find main.js.
Here is the custom gulp task:
const gulpConcat = require('gulp-concat');
const gulpReplace = require('gulp-replace');
const version = require('./package.json').version;
gulp.task('version', function () {
var vsn = '_' + version + '.js';
gulp.src('scripts/**/*.js')
.pipe(gulpConcat(vsn))
.pipe(gulp.dest('./prodBuild'));
return gulp.src('./prodBuild/index.html', { base: './prodBuild' })
.pipe(gulpReplace(/* some regex */, /* append vsn */))
.pipe(gulp.dest('./prodBuild'));
});
What do I need to fix/add so that the original filename changes to match that in the script tag?
Note: According to the gulp-concat docs, I should be able to find the concated files at prodBuild/[vsn], where [vsn] is _v1.js. However, it is no where to be found.
Update: The files rename properly in index.html, but I can't seem to get the renaming of the original files to work. Here's a snapshot of my build directory:
prodBuild/
pub/
main.js
someDir/
subDirA/
// unimportant stuff
subDirB/
file2.js
file3.js
// ...other files and folders...
EDIT:
The issue is that you return only one of the two tasks. The first task is simply ignored by gulp, since it is not returned. A simple solutions: Split it into two tasks, and reference the one from the other, like in this SO answer.
Old Answer
This looks like a perfect case for the gulp-rename. You could simply pipe your scripts through gulp-rename, like this:
.pipe(rename(function (path) {
path.basename += vsn;
path.extname = ".js"
}))
Gulp concat is, AFAIK, made for the concatination of files, not particularly for the renaming of them.

Running a gradle task multiple times with different parameters

I am trying to write a gradle task which will minify all my project's javascript files. I am using a gradle library: com.eriwen.gradle.js. This library contains a task called minifyJs where we define the source file we want to minify and the destination of the minified file:
minifyJs {
source = file(sourcePathString)
dest = file(targetPathString)
}
What I want to do is call execute this task for EVERY javascript file in my project and produce a minified version of it in a new path for EACH file. This would require me to run the minifyJs task multiple times each time with different source and dest values, but I can't seem to find a solution on how to do this. One person had suggested that we use a loop to create a new task of type: minifyJs for each javascript file but this takes a huge amount of time and will create 250+ tasks i.e. not effective at all.
Since calling a task inside another task doesn't work (and using task.execute() is bad practice) I'm essentially looking for a workaround that lets me achieve this:
task customMinify {
def jsFileTree = fileTree('my/javascript/files')
jsFileTree.forEach {
def jsFile = it
minifyJs {
source = file(jsFile.getPath())
dest = file('new/path/to/file.js')
}
}
}
which obviously doesn't work since we can't call minifyJs inside another task.
I'm really sorry that this gap has continued to exist in the gradle-js-plugin.
Since generating tasks won't do, I suggest that you write a custom task under buildSrc combining my JsMinifier and the MinifyJsTask.
If you're willing to wait 8 hours or so, I can write an implementation of this later if you like.
EDIT: Here's a gist for a ClosureMinifyTask you can throw in buildSrc/src/main/groovy/com/eriwen/gradle/js/tasks and it'll minify each file individually and produce individual source map files etc.
buildSrc/build.gradle:
repositories {
mavenCentral()
}
dependencies {
compile localGroovy()
compile gradleApi()
compile ('com.google.javascript:closure-compiler:v20151015') {
exclude module: 'junit'
}
}
Sample Usage:
task mini(type: com.foo.bar.ClosureMinifyTask) {
source = "src/js"
dest = "${buildDir}/js/minified"
}

How to conditionally compile (using Grunt) only changed jade files with template includes

Using a version of what grunt-contrib-watch recommends for compiling only changed files in here: https://github.com/gruntjs/grunt-contrib-watch#compiling-files-as-needed
var changedFiles = Object.create(null);
var onChange = grunt.util._.debounce(function() {
grunt.config('jshint.all.src', Object.keys(changedFiles));
changedFiles = Object.create(null);
}, 200);
grunt.event.on('watch', function(action, filepath) {
changedFiles[filepath] = action;
onChange();
});
This works fine (again with a variation I wrote for it here: https://gist.github.com/pgilad/6897875)
The problem is when using include inside Jade templates, meaning you are including other Jade templates in order to build the complete html file.
Using the singular solution for compile doesn't work because if a .jade file you are working on is embeded using include current_working_jade.jade - the including file won't get recompiled.
Are there any workarounds for this besides compiling all of your jade files from scratch? This causes a problem when you have around ~60 large jade files to compile every time.
The only possible solution I can think of is either mapping jade templates dependencies either externally or with directories, but I don't know any tools/plugins which do that...
After already starting to work on a scaffold that will generate a sortof jade sourcemap I found this great project, that already solves this issue:
Jade Inheritance
Usage is as follows:
Install package using: npm install jade-inheritance --save-dev
Where you want to get a list of dependent files from a jade:
var JadeInheritance = require('jade-inheritance');
var inheritance = new JadeInheritance(file, basedirname, {basedir:basedirname});
Then when you want to get the file:
depenedentFiles = inheritance.files;
The project also demonstrates how to apply the concept with grunt.watch in order to compile only changed jade files with their dependents, exactly what I needed:
Using jade-inheritance with grunt watch
I imagine something like checking all jade files and if they include your changed file then recompile that as well. Shouldn't be too hard. Pseudo code:
var allFiles = getAllJadeFileWithIncludesAndProjectPathMap();
//allFiles now contains something like this
{
'jade/index.jade': ['jade/menu.jade', 'jade/home.jade'],
'jade/about.jade': ['jade/menu.jade']
}
var rootFiles = [];
_.each(allFiles, function (includes, parent) {
_.each(includes, function (includePath) {
var parent;
while (parent = getParentPath(includePath)) {
//nothing needed if getParentPath returns null for files that aren't included
}
if (rootFiles.indexOf(parent) !== -1) {
rootFiles.push(parent);
}
});
});
Now add these files to the compile task.

Categories