I am struggling with the combination of multiple javascript files and their source maps.
The problem is: I use Google Closure Compiler to obfuscate two javascript files A and B, with generated source maps A.map and B.map. Since I apply different compilation options on them, so compiling A and B into a single file does not work for me. Now, I want to combine A and B to AB, and also combine A.map and B.map into AB.map.
How should I do this? Any existing tools suitable for this purpose?
There are a number of packages out there that will do the job for example with the grunt-concat-sourcemap package for node you can do the following:
grunt.initConfig({
concat_sourcemap: {
options: {},
target: {
files: {
'dest/out.js': ['src/a.js', 'src/b.js']
}
}
}
})
this will concatenate the two specified source files(in order), and write the output to dest/out.js and dest/out.js.map
here are some links to packages for grunt, gulp and plain node:
https://www.npmjs.com/package/grunt-concat-sourcemap
https://github.com/mikach/gulp-concat-sourcemap
https://www.npmjs.com/package/source-map-concat
Related
It is the first time I use RequireJS and I don't know why it doesn't work...
I have a file example.js inside Folder A.
In the same folder I have 2 other folders that are libraries.
geokdbush
kdbush
In my file I add this code (hoping to add libraries):
require.config({
paths: {
kdbush: 'kdbush',
geokdbush: 'geokdbush'
}
});
And inside function where I should to use libraries I add this:
require(['kdbush', 'geokdbush'], function(kdbush,geokdbush) {
//code
});
But there are two errors: Error: Script error for "kdbush" and Error: Script error for "geokdbush".
I don't know where the problem is in my code. These libraries are used to create K-D tree:
Reverse geocoding with big array is fastest way? - javascript and performance
I'm trying to write gulp-based application using main-bower-files. I want to copy all my and vendor assets files to %build_dir%/assets folder, but fonts files should be copied in %build_dir%/assets/fonts. Without vendor files it can be done easy via gulp.src.options.base option. But i can't understand how to do it with vendor files. Now i have
gulp.task('assets', ['less'], function() {
return gulp.src('src/less/fonts/*', {base: 'src/less'})
.pipe(addSrc('src/assets/**.*'))
.pipe(addSrc(mainBowerFiles(/.*woff|woff2|otf|ttf/, {includeDev: true})))
.pipe(gulp.dest(buildDir + '/assets'));
});
But it copies vendor fonts to %build_dir%/assets.
So, ideal case is to write base as regexp that parses path to vendor fonts and take all path before /fonts. How to do it?
Vendor folder has next structure:
/bower_components
/lib1
/fonts
font1.woff
/lib2
/fonts
font2.otf
/lib3
/fonts
font3.ttf
So, ideal case is to write base as regexp that parses path to vendor fonts and take all path before /fonts. How to do it?
Not possible. The base option doesn't support regexes. Only strings.
You don't need the base option anyway. Just create two streams each with their own gulp.dest(). Then merge those streams using merge-stream:
var merge = require('merge-stream');
gulp.task('assets', ['less'], function() {
return merge(
gulp.src(['src/less/fonts/*'].concat(mainBowerFiles(/.*woff|woff2|otf|ttf/, {includeDev: true})))
.pipe(gulp.dest(buildDir + '/assets/fonts')),
gulp.src('src/assets/**.*')
.pipe(gulp.dest(buildDir + '/assets')));
});
This also means you don't need gulp-add-src anymore.
Can anyone pls tell how to write gulp task for files in different folders. ?
I mean
www
js
a.js
lib
jq.js
Output:
www
js
a.min.js
lib
jq.min.js
I am unable to write in single task.
I am using rename,obfuscate and ngAnnotate plugin.
Use the array syntax for gulp.src as:
gulp.task('task-name', function () {
return gulp.src(['www/js/**/*.js', 'www/lib/**/*.js'])
.pipe(<Add your task>)
.pipe(gulp.dest('www'));
})
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"
}
I'm using gulp to build a single javascript file with gulp-concat and gulp-uglify.
Original Files
//File 1
var Proj = Proj || {};
//File 2
Proj.Main = (function() {
var Method = function(){ /*Code*/ };
return { "Method":Method };
})();
//File 3
Proj.Page = (function() {
var Method = Proj.Main.Method;
return { "Method":Method };
})();
Gulp returns a bad minified file because these files are being concatenated in the wrong order. I know I can specify the order in .src([]) but I don't want to maintain the array as I add javascript files.
Is there a way to create references to these "namespaces" without having to worry about the order of the files concatenated? Or, is there a way for gulp to handle concatenation with the knowledge of these namespaces auto-magically?
EDIT:
I know I can specify the file order inside the .src([]). I want to develop without having to worry about the file order, whether it be through a gulp package or a javascript framework. Thank you for responses that help but I need a definitive "No. You cannot do this." or "Yes. Here's how..." to mark the thread as answered.
Well, one option is to try gulp-order.
Also, check out this answer to "gulp concat scripts in order?".
Basically, it mentions what you already said, about having to explicitly name the files in the order you want them to come in. I know you don't want to do that, but how else would gulp know which order you want your files in?
One thing worth pointing out, though, is that you have a group of files where the order doesn't matter, and then, say, 2 files where the order does matter, you can do something like this:
gulp.src([
'utils/*.js',
'utils/some-service.js',
'utils/something-that-depends-on-some-service'
])
gulp-concat doesn't repeat files, so everything that's not some-service.js or something-that-depends-on-some-service.js will get concatenated first, and then the last two files will be concatenated in the proper order.
Since it hasn't been mentioned, implementing webpack or browserify will absolutely solve this problem without implementing some sort of hacky feeling solution.
Here is a simple example of how to use it:
var source = require('vinyl-source-stream'), //<--this is the key
browserify = require('browserify');
function buildEverything(){
return browserify({
//do your config here
entries: './src/js/index.js',
})
.bundle()
.pipe(source('index.js')) //this converts to stream
//do all processing here.
//like uglification and so on.
.pipe(gulp.dest('bundle.js'));
}
}
gulp.task('buildTask', buildEverything);
And inside your files you use require statements to indicate which files require others.