I have been creating projects using npm. For AMD I am using the native node require because it is convenient and does what I need it to do. To run my projects at the moment I am using grunt-watchify. This allows me to point a file of entry and a file of output. So at the moment it produces one file uncompressed or mangled.
I would like to know what is the best approach for compressing and mangling my final file. I have tried uglify after the file is built by watchify but it does not seem to work correctly. I feel that is a dirty hack anyway. So here is my questions?
What is the best way to build a node project into one file? Grunt library suggestions would be great. Any that support compression/minifying would also be great.
Thanks
Removed my dependency on grunt-watchify and now just use grunt-browersify and grunt-contrib-watch. I then use grunt-contrib-uglify and grunt-contrib-cssmin to minimize files afterwards.
Related
is it somehow possible to build NodeJS together with some selected JavaScript modules? I believe that for native modules, I should be able to achieve this with node-gyp, but I have no idea how to do this for JavaScript modules. The main idea is to be able to use custom application without npm install.
I know that I can use any of the bundlers like pkg or nexe, but this has some drawbacks with respect to the development...
Thanks!
You can include JS files as described in here.
Just add a link-module parameter.
> .\vcbuild link-module './myCustomModule.js'
If I install a module via npm, what is the proper way to use the code in my website? I mean simply making node_modules static seems ridiculous, but I can't figure out how to easily create a static folder with the few pieces of JS I want to use in it.
Of course there are symbolic links and a lot of hacks I can think of off the top of my head, but I was just curious if there is a known workflow/way to solve this problem that I simply haven't read about yet.
Browserify and Webpack are the tools usually chosen to bundle up modules managed through npm for deployment to be used client side.
You want webpack
webpack supports pre-processing files via loaders. This allows you to
bundle any static resource not only javascript. You can easily write
your own loaders running in node.js.
I am using Webstorm a start a angularjs project. I've created a lot of *.js files. I have the include them using the tag one by one in the html files. whenever I created a new js file, I have to create the script tag.
The things I needed is just like gulp-concat, but without minifying. minified code are hard to debug.
Can anyone help on this? Thanks!
WebStorm doesn't have any built-in functions for combining files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-concat task (https://github.com/gruntjs/grunt-contrib-concat). It supports merging files. You can run the task using Node.js run configuration, or configure it as a file watcher, or use Grunt console.
Browserify (http://browserify.org/) is one more way to go - it allows using commonjs-style syntax when developing front-end applications, combining the files into a single file for production
Or, try Webpack (https://webpack.github.io/) - it's a modern powerful module bundler
So i've been searching for the best way of concatenate n (log) files in node.js
The final file cannot be more than 100MB, if there is more, i should create an other one and so on.
I have some different approaches:
Use grunt and grunt and https://www.npmjs.com/package/grunt-contrib-concat
Use a simple npm like buldify https://github.com/powmedia/buildify
Do it from scratch with the fs node.js module
I wonder if you could throw me some of your experience here and also this question could be useful for someone in the future.
Cheers!
Both grunt-contrib-concat and buildify were designed to concatenate JS source files into one bundle, so they are not fit for your task.
I would suggest using something like logrotate-stream instead.
I really like using cdnjs to load up javascript on the client-side, it makes my project smaller and cleaner, and loads everything faster as well. I currently use require.js for module loading, which can load from cdnjs and shim traditional scripts to work with it easily. I've been looking more into browserify recently as an alternative, and while I did find browserify-shim, which can shim non-cjs modules much like require does, I'm curious if there is a way to load a script from a remote source with browserify, or if you have to install everything locally no matter what.
If the answer is that you would have to install everything locally through npm, this makes things a little weird. On one hand, you can add node_modules to the .gitignore file and not have to worry about keeping all the deps on version control if you are using a package.json, but on the other hand, you'd need to get the modules back in there on deploy, which means an additional post-deploy step that would run npm install and that node would need to be installed wherever you are deploying to, which also seems a little awkward to me for a static site especially.
Really, any ideas or discussion on this would be great : )
The way I think about it is this, you have three options: concat the JS files together locally (browserify) before deployment, load them in real-time (require.js), or a mix of both. To be fair, you can use require.js to concat your files with r.js too. For me at least, I like how browserify is designed to use the same syntax and mentality as npm modules. I think in the end the weirdness your experiencing doesn't really matter. If all the code is packaged together, you deploy, and there aren't any dependencies, seems like a win to me. Also, I think this is more in line with Java and similar compiled languages are doing, which is putting all the deps together in a deployable package. I know I mention Java but don't let that scare you because really we are all benefitting from the ideas of those around us even the languages we think we don't like. If I had to bet my money, I would bet on browserify since it's offering (what I consider) to be a more mature means of handling modules (organized by file based rather than syntax). The npm also gives us a great way to share our code so two thumbs up for them.