How get grunt-closure-compiler to apply minimization to each file separately in a directory - node.js

Is there a way I can get grunt-closure-compiler to apply minimization to each file separately in a directory (overriding the original) instead of producing a single file as the output. If I can't override the original I am happy to place output files in a separate output directory.
https://github.com/gmarty/grunt-closure-compiler
Normally the procedue would be like this producing a single file:
grunt.initConfig({
'closure-compiler': {
frontend: {
closurePath: '/src/to/closure-compiler',
js: 'static/src/frontend.js',
jsOutputFile: 'static/js/frontend.min.js',
maxBuffer: 500,
options: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT'
}
}
}
});

You can use the module option of the Closure Compiler to produce multiple output files. You would have to list each JavaScript file as its own module, so if you have many JavaScript files this could be pretty tedious.
The module option is not very well documented, but see the posts below to see how it works:
Using the Module Option in Closure Compiler to Create Multiple
Output Files
How do I split my javascript into modules using Google's Closure
Compiler?

As the other answer suggests, you need the modules option. However grunt-closure-compiler doesn't actually support this.
There's a fork of it which supports modules. It doesn't use the standard grunt file config so you can't use globbing patterns to get it to take all of the files in a folder. I've gotten around this by writing a grunt task to create the modules object and pass it into the config for the closure-compiler task.

Related

babel-core 'transform' function cannot find plugin

I have a global node module that uses babel-core transform function.
I have no .babelrc at the root of my module.
It takes a file and basically just use transform to 'compile' it.
const result = transformSync(content, {
filename: src,
});
There is a .babelrc file along with the said file and I'm indeed able to find it
{
"presets": ["#babel/preset-env"]
}
but it complains about not finding '#babel/preset-env' which is right, because the module is installed with mine and not the file/.babelrc being transpiled.
I've tried many options in https://babeljs.io/docs/en/options but still can't make it work.
How can I configure transform so it get plugins from my module while loading babel configuration from the folder of the transpiled file ?
By design, Babel's plugin loader searches for plugins relative to the config file that references them, or uses the cwd for plugins passed directly in the transformSync options. Control of that isn't exposed to utilities calling Babel.
Changing those sematics would mean that a Babel config file would vary in behavior based on the tool that was loading it, which would be very inconsistent for users, especiall considering that one of the main benefits of having the config file format is so that config can easy be shared across multiple tools calling Babel, for instance one for tests and one for bundling.
If you want users to be able to customize your tool, it sounds like what you may actually want is your own entirely separate config file for your tool, so you can define whatever semantics you want for that.

Google Closure Compiler to concatenate files using requirejs

I am using Google Closure compiler to concatenate and minify files. I am using require and my module depends on some JS files. Part of the JS files belong to an internal JS framework and several others depend on modules which our team has written. My aim is to concatenate all the dependencies in 1 file and then minimize it. Following is the code (the files prefixed with 'oj' are the framework files)
define(['ojs/ojcore',
'knockout',
'jquery',
'generalApp',
'modules/helpers',
'modules/facade/mrd',
'modules/facade/trf',
'modules/facade/crf',
'modules/models/sm',
'modules/models/mm',
'modules/list/dls',
'modules/utils/cm',
'ojs/ojchart',
'ojs/ojmasonrylayout',
'ojs/ojmenu',
'ojs/ojbutton',
'ojs/ojfilmstrip',
'ojs/ojarraytabledatasource',
'ojs/ojselectcombobox',
'ojs/ojdialog',
'ojs/ojcheckboxset',
'ojs/ojpagingcontrol'
], function (oj, ko, $, app, helpers, mrf, trf,crf, sm, mm, dls, cm) {
});
These files are in-turn dependent on other JS files and I only want the dependent JS files to get concatenated in the final JS file. Any idea how to do the concatenation using the Google Closure Compiler?
I tried using --process_common_js_modules --transform_amd_modules flags but the compiler threw errors since its unable to find the framework files which are located under ojs. There is a requirejs configuration file in which we are declaring path variables but I dont know how to specify the config file during the concatenation process.
Thanks in advance
Closure-compiler does not know how to order dependencies natively with AMD modules. Instead, use the requirejs compiler to concatenate the files in the correct order and then use closure-compiler for minification. This is done by setting the requirejs optimize flag to none.

Gulp + RequireJS Remove Vendor Files

I'm having a problem using Gulp to compile a RequireJS project properly. What I need to do is have gulp create a single distribution file that only includes the file necessary to have the application run.
In our application we are following a modular approach breaking out major pieces of functionality into different repos. So while developing my piece I have RequireJS including angular and many other vendor libraries that are common to all of the projects in the application. However when I go to move my piece into the larger application I no longer need these files in the final output since those dependencies also exist in that application (and having those extra libraries also makes the final distribution file over 300K).
I've tried creating another main.js (called gulp-main.js) file that only includes the dependencies that I need but when I run the gulp process it fails. I don't get an error but it seems to be failing because I'm not including the required dependencies for the project to build successfully. Below is the config object that is being passed to the RequireJS optimize method.
var config = {
baseUrl: 'app/',
mainConfigFile: 'app/main.js',
out: 'dist/app/output.js',
name: 'main'
};
Any ideas on what I could do to either remove the unnecessary vendor files or even split them into a single vendor and a single non-vendor file would really be appreciated. I have already tried using the modules array option but that does not produce the results that I am after since it seems to create a single file for each item defined not a single compiled JS file with all scripts contained within.
Thanks in advance.
When you don't want some file in your final output. add " ! " in Your gulp task's src
example :
gulp.src(['./app/*.js', '!./node_modules/**']) // '!./vendor-libraries-dest to igonore'

Refactor multiple, similar requires (using Browserify)

I've got a very crude implementation working:
var screens = {
a: require('./../react_components/screens/a.jsx'),
b: require('./../react_components/screens/b.jsx'),
c: require('./../react_components/screens/c.jsx'),
d: require('./../react_components/screens/d.jsx'),
e: require('./../react_components/screens/e.jsx')
};
Which works fine, however, I'd like to make it a little more scalable, so that when I change a filename, or add a new file to the /screens folder, I don't really have to keep updating this list of require statements.
I'm using Browserify, so I do have a build step I can hook into if need be (this will be ran in the browser)
So for node/commonjs itself there are modules such as requireindex that will automate this kind of thing. However, the fact that these approaches determine the dependencies at runtime by looking at the filesystem defeats browserify's static analysis so I'm not aware of any of them that are browserify-compatible. Therefore, I'd suggest a code generation route where you use a module such as glob to discover the files you want to export, but then write out a full .js file with the exports all statically coded, and point browserify at that file, which you can regenerate every time during your build step.

Using require.js to load non-AMD files and files with other than .js extension

Is there any clean way to load files with other than js extension and not AMD content?
I use the enforceDefine config to make sure my actual AMD code works while developing.
So far I've managed to put together a plugin that sets enforceDefine to false, so I can load 3rd party libraries like so: require(['noamd!handlebars']). That doesn't seem too much hacky to me but I'd like to know if there's a better way.
I'm currently testing the noext plugin and it does its job but also in a kind of a hacky way. I've noticed that it applies the noext parameter twice to the url (test.txt?noext=1&noext=1). I can live with that but optimally I'd like to git rid of all extra parameters. Can that be done?
To load files that aren't JS (such as .handlebars, .mustache) then the text plugin will suit your purposes.
To load normal js files you can use RequireJS as a script loader:
require(['full/path/to/file.js'], function(){
// Fired when file is loaded but if non AMD
// no value will be passed to this function
});
If you would like to treat the non-AMD file as a module, then you can use the shim config to implement it.
you can append a ?MEH=BLAH to the end to stop the .js appending
eg
requirejs.config({
paths: {
"dynamicstripconfig": "../php/domain/config.php?dynamic=1"
}
});
Additionally there a plugin for that as well, but doesn't support paths -> https://github.com/millermedeiros/requirejs-plugins
Added a issue with fix for path support -> https://github.com/millermedeiros/requirejs-plugins/issues/47
If your file isn't actually a dynamic js file then use the text plugin -> https://github.com/millermedeiros/requirejs-plugins

Resources