I am writing code for webtask.io and it seems as if I can only upload one file to run. I would like to organize my code into multiple files with different modules but then have them be compiled into one for upload. I have tried gulp with gulp-concat but this just concatenates the files without preserving any execution logic. I would assume there is a simple way to do this.
Webpack works well, especially with the webpack-node-externals' package: https://www.npmjs.com/package/webpack-node-externals.
Just set the --bundle argument.
$ wt create index.js --bundle
Related
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'
I'm using grunt concat/uglify to reduce the number of calls being made to load JavaScript.
I removed all the hard-coded links to the actual javascript files, and now reference the one javascript file produced by grunt.
how can I continue to debug/view my javascript in my development environment?
Is that what source maps are?
i.e.
https://www.npmjs.org/package/grunt-concat-sourcemap
Yes. You will need to generate a sourcemap to continue debugging your code easily.
There are two types of sourcemap, but the sourcemaps need to be maintained through each transition. SO if you concat in one step an minify in a second step, the minify process needs to know that the concat step generated a sourcemap and generate it's own sourcemap based on that sourcemap, so that the minified code sourcemap corresponds to the original input, not the input from the concat step.
There are several ways around this -- the easiest way is to just not minify in your test/deveopment environment. There are also minifiers that will do the sourcemapping correctly for you, but they can be hard to configure.
You might also want to take a look at browserify -- this is a tool that lets you write your front-end browser code like it was node modules, and it will concat and generate sourcemaps for you!
Alternatively you can also just rely on gzip compression from your server and run your code through a minifier -- this works surprisingly well.
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.
When I use Node.js to compile a single TypeScript file from project, which has dependencies on other files I get multiple "Could not find symbol .." errors. Despite these errors JS file is created correctly. There are no explicit references in TypeScript files.
Is there a way to suppress these errors? Or tell compiler where to look for dependencies, but not recompile all files?
The reason I want to do this is performance. My goal is to use Grunt to watch for TypeScript files. On change it would compile them to JS, do some transformations, minimize, bundle and run unit tests. However, only a single step to compile all 160 typescript files to JS takes around 8 seconds, which is painfully slow for development process. Compiling only single changed file should speed it up.
There isn't an option at the moment. I've been planning on adding it to grunt-ts for /// <reference's https://github.com/basarat/grunt-ts/issues/34 but the same can apply for node.
In an attempt to separate my .ts source files from the .js output, I'm trying to implement a formal file-watcher in TypeScript and it seems as though the ability to specify an output path for a single file does not exist.
The flow, just to be clear: I begin watching my entire src directory, make a change to, say, src/views/HomeView.ts, and i want node to pick up that the file has been changed, and move the compiled version to public/js/views/HomeView.js.
Using tsc myfile.ts --out myfile.js it travels through all of the modules and compiles each in the same path that the .ts file exists, without placing the final file(s) in the properly specified path. It does however create an empty file where I would like it to end up.
I'm wondering:
1) Is it possible to use the --out parameter and only compile that one file? I do not want it to traverse imports and compile every single file, but merely do syntax / error checking at compile-time (and that's only a secondary requirement, not necessary); and
2) Is there a bug in the compiler that prevents it from properly combining / creating files? Again, the final output in the --out path directive is empty, but a file is indeed created.
Any help would be appreciated.
* Update *
While I don't want to close this question as I do believe it's still an issue, I went ahead and implemented the core TypeScript compiler to achieve what I needed to do, bypassing tsc altogether. Please see https://github.com/damassi/TypeScript-Watcher for more information and usage.
When you use the --out parameter, you get a single file with the compiler walking the dependencies and working out the correct order for the final file.
For example...
tsc --out final.js app.ts
Will find any dependencies in app.ts and compile them all too. After it works out the correct order it will save all of the JavaScript in final.js. If this JavaScript file is empty, it is normally indicative of a compiler error.
It is not possible to use the --out parameter to generate a JavaScript file for just the TypeScript file you specify, unless that file has no dependencies.