Closure Compiler combine files - javascript

I have the following setup in my phpstorm, and I would like to combine my javascript files located in the /js/app and /js/lib folder.
now it's only minifying a single jar, I would like to combine them

One simple way to do it:
Create a closure.command file (or whatever you want to name it) in the same directory as your js files. Put Closure command line options in it like so:
--js file1.js
--js file2.js
--js_output_file all.min.js
Edit the Closure file watcher arguments to include "--flagfile closure.command". You will probably want to uncheck the "Create output file from stdout" option.
** Since you want it to operate on js files from different directories you may have to modify the file paths and "Working Directory" option for it to work properly.

Related

Output minified javascript file to a different directory with YUI Compressor File Watcher in IntelliJ

I'm using YUI Compressor JS as my file watcher in intellij to minify my javascript files. The compressor works fine when i set 'Arguments' and 'Output path to refresh' parameters like below:
Arguments = $FileName$ -o $FileNameWithoutExtension$.min.js
Output path to refresh = $FileNameWithoutExtension$.min.js
It then produces the minified file in the original file's folder. What I can not achieve here is that I want minified files to be placed in some other directory.
So far I tried to set the two aforementioned parameters with values below:
Arguments= $FileName$ -o $FileParentDir$-min\$FileDirName$\$FileNameWithoutExtension$.min.js
Output paths to refresh = $FileNameWithoutExtension$.min.js
But it then generates the minified version of the javascript file and overwrites it to the original file; prompting me with 'File Cache Conflict' dialoge like below.
File Cache Conflict Dialoge Image
My original javascript files reside in 'webapp/resources/js' folder, but I want minified files to be generated in 'webapp/resources/js-min' folder with the same structure as in 'webapp/resources/js' folder.
n the Arguments text box, type:
$FileName -o /your_custom_directory/
the Arguments pass to compresssor and it put your out put file in your_custom_directory then in "out put path to refresh" insert your_custom_directory too,this pass to phpstorm for indexing file
for me its like this
js>my_js_file
js>min>result
Arguments: $FileName$ -o $FileDir$/min/$FileNameWithoutExtension$.min.js
output paths to refresh:/min
Have you tried $FileParentDir$/js-min/$FileNameWithoutExtension$.min.js?
Are you on Windows? YUI Compressor doesn't seem to accept Windows absolute path as a -o value... When I run java -jar yuicompressor-2.4.8.jar -v -o C:\WebstormProjects\untitled3\webapp\resources\js-min\sub\subsub\f3.min.js f3.js, no f3.min.js is produced, the original file is modified instead:(
As far as I can see from the last comment in https://github.com/yui/yuicompressor/issues/78 thread, the bug should be fixed in yuicompressor-2.4.9. But this version is not available at https://github.com/yui/yuicompressor/releases, and the link to jar provided in comment seems to be outdated...
In general, I'd strongly recommend using a different JS minifier, as YUI Compressor looks dead - no updates since 2013

Output .map files for typescript to specific folder in IntelliJ IDEA

I configured my IntelliJ IDEA to compile all .ts file to specific folder. Here's the configuration:
It works just fine. Here's my folder structure:
js/
| - typescript/
| - __test.ts
| - __test.js
| - __test.js.map
| - otherfile.js
The problem is that it outputs the .map files to the same folder as .js files. Since I'll be having a lot of .js files, the folder will look cluttered.
Is there a possibility to make IntelliJ IDEA to output .map files to a specific folder? I couldn't find any info about that...
Thank you!
tsc compiler doesn't have options for this - .map files, when generated, are always placed to the same folder as .js files.
See https://www.typescriptlang.org/docs/handbook/compiler-options.html for the list of available options.
if you like to move generated files to a different location, you can use build tools like Gulp, Grunt or Webpack. But, if you go this way, make sure that sourcemaps URL is properly generated (you need using --mapRoot cli option that controls the reference to the map file in the .js file to let the debugger know where to look for sourcemaps).
see TypeScript tsconfig Output files in certain folders, for example
in the Typescript Compiler options... I added --outDir ./.map. This affects both .js and .js.map files.

How to combine multiple Javascript files from different folder in a single file?

i have lots of JavaScript files in different folders and want to add them to a master.js together. I have the following project structure:
/dist/js/master.js <-- Output file
/src/bootstrap-untouched/js <-- Bootstrap Plugins (alert.js, button.js etc.)
/src/js/plugins.js
/src/js/script.js
It would be good if I could activate and deactivate the individual bootstrap plugins. I do not want to use Grunt and Gulp. I use only the NPM.
I think that would have to somehow work with browserify and uglifyjs.
In the source folder execute:
find . -name \*.js -type f -exec cat {} \; > ~/master.js
That is all.
I'm assuming you've got some starter file (like entry.js - you can call it whatever you want actually).
In that case, this code should work:
var b = require('browserify')();
b.add('your entry js');
b.transform('uglifyify');
var indexjs = fs.createWriteStream('build/bundle.js');
b.bundle().pipe(indexjs);

How can typescript generate single one javascript file without reference typescript file code

Can typescript generate single one javascript file without reference typescript file code?
Here are two typescript source files.
Class source1{...};
Class source 2{...};
Here are another two typescript files.
///reference path=’source1’
Class reference1{...};
///reference path=’source2’
Class reference2{...};
I will generate reference1 and reference2 to single one js file.
But in the js file, there are source1 and source2 code.
How can I get single javascript file without souce1 and soucre2 code?
Thanks.
Looks to me that you need to split your compilation into two phases, one to generate soruce1 and soruce2, and another one to generate reference1 and reference2. The best way to do this is to generate a .d.ts from the first batch of files then reference that in your second compilation.
to generate sources.d.ts:
tsc --declaration --out soruces.js soruce1.ts source2.ts
now your files should look like:
///reference path=’sources.d.ts’
Class reference1{...};
///reference path=’source.s.ts’
Class reference2{...};
the second compilation would be:
tsc --out references.js reference1.ts reference2.ts
You are asking the compiler to do conflicting things.
If you want a single output file, you use the flag:
tsc --out single.js app.ts
This tells the compiler to walk any dependencies, combine the output in the correct order and save it in single.js
If you don't want a single file, you leave out the flag and each TypeScript file will be paired with its output JavaScript file.
You are asking if you can combine files without including referenced files - that isn't possible.

How do I split my javascript into modules using Google's Closure Compiler?

I want to use the google closure compiler on the javascript source we're using.
In development mode we tend to break functionality to lots of files but for production would like to have them combined into modules.
When calling the compiler I can give it a list of files to include for compilation, but the output of that shows that the compiler did not save the order of the files list.
I searched about it and found that I can use goog.provide/good.require in order to control the dependencies between the different js files.
The problem with that is that it adds code to my js which I just don't need or want, for example:
goog.provide("mainFile")
will add this:
var mainFile = {};
to the compiled js file, something that I don't want.
We're not using the google closure library at all, all I want to use is the compiler.
Is there a way to tell the compiler the order of the files without including more "closure library" functionality which I have no need for?
I can of course create a tool of my own which will first take all the files, combine them into one which will then be the input of the compiler, but I would prefer to void that if it can be done by the compiler itself.
Edit
The goal is to be able to produce modules like the answer in this thread: Using the --module option in Closure Compiler to create multiple output files
And so I want to add to that the ability to control which files go into which module while also having control on their order.
For now I don't use wildcards, but I plan to do so in the future (if it's possible).
simply "cat file1.js file2.js > combined.js && compile..." is fine, but in our case it's a bit more complicated and we'll have to write a program/script that does that based on some logic.
If we can somehow tell the compiler the order of the files in advanced it might just save the time of implementing such a program.
Thanks.
Closure-compiler's ability to create multiple output files provides a powerful tool to separate input files into distinct output chunks. It is designed such that different chunks can be loaded at differing times depending on the features required. There are multiple compiler flags pertaining to chunks.
Each use of the --chunk flag describes an output file and it's dependencies. Each chunk flag follows the following syntax:
--js inputfile.js
--chunk name:num_files:dependency
The resulting output file will be name.js and includes the files specified by the preceding --js flag(s).
The dependency option is what you will be most interested in. It specifies what the parent chunk is. The chunk options must describe a valid dependency tree (you must have a base chunk).
Here's an example:
--js commonfunctions.js
--chunk common:1
--js page1functions.js
--js page1events.js
--chunk page1:2:common
--js page2function.js
--chunk page2:1:common
--js page1addons.js
--chunk page1addons:1:page1
In this case, you are telling the compiler that the page1 and page2 chunks depend on the common chunk and that the page1addons chunk depends on the page1 chunk.
Keep in mind that the compiler can and does move code from one chunk into other chunk output files if it determines that it is only used by that chunk.
None of this requires closure-library or the use of goog.require/provide calls nor does it add any code to your output. If you want the compiler to determine dependencies automatically or to be able to manage those dependencies for you, you'll need to use a module format such as CommonJS, ES2015 modules or goog.require/provide/module calls.
Update Note: Prior to the 20180610 version, the chunk flags were named module. They were renamed to reduce confusion with proper JS modules. The answer has been updated to reflect the new names.
Update Note 2: There is now a utility to automatically calculate and generate these flags for you: https://github.com/ChadKillingsworth/closure-calculate-chunks
You can also set the output path, for example with:
--module_output_path_prefix ./public/js/
See also:
Using the --module option in Closure Compiler to create multiple output files

Categories