What is the difference between "gulp-browserify" and "uglify.minify". Both are used to minify the files. I am trying to compress a group of JS file to a single file both serves good which is preferable.
gulp-browserify (which is no longer being maintained by the way) is used to concatenate (or to use the browserify vernacular "bundle") application files that have been written using commonJS in order to use them in the browser (which otherwise you wouldn't be able to do). The browserify application itself doesn't appear to actually have a minify option, but there is a plugin you can use that does minify the files after they have been bundled.
Uglify will just minify "normal" JavaScript files. If you want them concatenated then you would also need to add something like gulp-concat to your gulp configuration in order to do that.
Related
I have a site that contains the base javascript and css for a number of other sites. Most of the sites use a javascript bundle that has everything in it, although a few of them are lightweight and only use a few of the scripts. I'm learning how to use gulp to manipulate these files and mostly understand what's going on. However, I'd like to be able to perform the following sequence and I'm not sure how.
Compile my coffeescript files
Copy the compiled files to a folder
Minify the copied files
Bundle the compiled files into one file
Bundle the minified files into one file
Is there any way to make this happen all within one task?
Below the list of tools how u can do it. And the important one is documentation.
In short you have to create gulp task "build",for example, which will run tasks below.
gulp sequence
gulp coffee
gulp minify
gulp concat
and so on)
In my MVC 6 app, as a replacement for the older js/css bundling & minification-system, I want to produce 1 javascript file that I can reference in my HTML. This javascript file is page/action-specific so I can't just concat all .js files in a folder.
With CSS (using LESS) I already managed to do this by using #import, the created .css file will then be a combination of the original .less file plus all the imports merged into 1 file. Now I'm trying to do the same with my .js files.
In GULP I can easily minify each seperate file, and place them in the correct folders, but I don't know how to merge them with the right files. I dont want to create a gulp task for each file/js telling what to concat.
I thought about using TypeScript to reference other js files and then compiling them with GULP to one file but this seems a bit harder. I'm open to other frameworks that can manage this as well.
In typescript using ///reference or import module doesn't actually result in an import when compiling like it does with LESS.
So for example, consider the following js or typescript-structure
scripts/common/master.js (or .ts etc.)
scripts/maincontroller/index.js (uses master.js)
scripts/maincontroller/support.js (uses master.js)
desired result after compile/merge/concat with gulp:
wwwroot/js/common/master.js (unchanged because nothing referenced)
wwwroot/js/maincontroller/index.js (concat with master.js)
wwwroot/js/maincontroller/support.js (concat with master.js)
This is an interesting design. It actually means that I don't benefit as much from my browser caching, because I end up downloading master.js three times (but in three different files) - and that is just based on the three files in your example.
If you have a large number of files, keep everything as individual files and use a module loader, such as RequireJS. This way, master.js is cached after the first page and they only need to load index.js on the next page (and so on).
If you don't have a large number of files, bundle them into a single file and load it late in the page.
GO to solution explorer and right click on your project and click add references.
Then go and browse your references files. :)
sry for bad english!
Found a way to achieve this by using http://browserify.org/ with GULP. I can use 'require('master.js')' in my index.js and browserify will concat the 2 files together. Not the easiest task but it seems to work as desired.
I am trying to get Swig (the template language) working on Parse Cloud Code with Express. Parse Cloud Code is a Node/Express host that doesn't allow NPM. Ridiculous, I know. I can still load external files into code with requires statements however, so I think that there's hope I can get this working.
So my question is how do I get the whole entire Swig package into a single JS file that I can include from my Parse Express app like so:
var swig = require("./cloud/swig.js");
Worth noting that Parse breaks normal require statements so that the NPM package as-is doesn't work without modifying each and every single file in the node_modules folder to have cloud in its path (which is why my above path has cloud in it). Parse also chokes while uploading lots of small files. Concatenation is a need on this platform.
I have tried playing with browserify for hours, but no combination of anything I do makes exposes the Swig object when I load the browserified file with the require statement. I think it may be the right option since the Browserified file includes all the files from Swig, but it doesn't expose them externally.
My question is either can this be done in browserify, and if so, how? Or is there another way to concatenate a NPM repo down to one file so it can be more easily included from this platform?
Thanks so much.
Browserify is not the right tool for the job.
As the name implies, browserify is intended to be used to generate files you want to execute in the browser. It walks the require calls from an entrypoint (i.e. some JS file you pass to browserify) and bundles them in an object that maps their names to functions wrapping the modules. It does not expect a require function to already exist and doesn't make any use of it. It substitutes its own implementation of require that only does one thing: look up names from the bundle, execute the matching function and return its exports.
You could theoretically require a browserify bundle, but it would just return an empty object (although it might mess with globals). And in all likelihood it might break because the bundled modules think they are being executed in a browser. This won't do any good.
The only sane option if you want to stick with the host, is to copy over the node_modules folder from your local project folder. This may not work if your computer and the server are not 100% compatible (e.g. 32-bit vs 64-bit, Debian vs RedHat, OSX/Windows vs Linux) but this mostly depends on your exact dependencies (basically anything that is built with node-gyp can be a problem).
Node.js uses the node_modules folder when looking up dependencies in require calls automagically. If you can somehow get a node_modules folder with the right contents on the server, require("foo") will work as long as node_modules contains a module foo.
Ultimately, you are trying to use npm modules in Parse Cloud code and currently it's not possible:
https://parse.com/questions/using-npm-modules-in-cloud-code
But if you are only trying to use Swig, then as a work-around, you can consider using underscore template instead. Parse already includes underscore:
https://parse.com/docs/cloud_modules_guide#underscore
Recently I've started using Grunt and it really helped to minify/concatenate .css files and minify/uglify/concatenate .js files. Also I automated compiling and restarting server with grunt watch, express. I was happy.
Suddenly I wanted to uglify my .css files when I saw 85 occurrences of ".wrapper" class in my style.css. This .wrapper class used in my templates (jQuery.tmpl), .js files. I've seen uglified .css classes in gmail source code and I hope I can do it too.
My purpose is to replace '.wrapper' with '.w' (any short name) in all .css, .html, .js files. How can I uglify all classes, ids in .js, .html, .css files relatively?
There are 2-3 processes at work when you "uglify" something:
Minification - Eliminates unnecessary whitespace in your text files.
Obfuscation - Where you rename variables, classes, etc. into smaller names to save characters.
Concatenation - Where you merge multiple files together to eliminate unnecessary HTTP requests.
It looks like you're primarily talking about obfuscation so that's what I'll address. There are two tools that I know of that work pretty well and can be used in a build process:
HTML Muncher - HTML Muncher is a 5 year old Python based tool. It can only deal with HTML, CSS, and JS files so you'll have to compile your static assets before shipping it over to this Python based tool. Also, it doesn't work well with escaped class/id names or special characters (so keep yours alpha based and only use digits after the first alpha character). Finally, it obfuscates names based off of a hashid.. so the class names aren't as succinct as you'll want them.
The css-loader is used as a part of Webpack - Webpack allows us to use loaders to transform files and pass them in as dependencies in front-end "bundles". The css-loder has this cool feature called Local Scope that essentially allows you to rename your classes and id's based on your webpack config. Webpack can be difficult to setup and it's pretty difficult (at the time of this writing) to get these obfuscated class names into HTML files. But if you can get it working and make it a part of your build, I think this tool has a lot of promise!
At this time, I'd say that if you can't make Webpack a part of your build, it's probably not worth obfuscating your CSS at this time unless you can handle all the problems that HTML Muncher has.
I have a project written on PHP and JavaScript.
For example, I have two main JavaScript files
main1.js and main2.js.
They use the same functions, and I want to extract the functions to lib.js etc.
On develop environment it's more useful to use 3 different files, but on production i'd like to have 2 minifyied files with lib.js included.
I want to see changes on dev immediately without any preprocessing, and I want to use some preprocessing on production.
For example I can write a javascript function require(filename) that loads needed js file, but how to tell minifyer to include the file inline on production?
You should look into YUI Compressor
and also into creating makefiles
you can also compress CSS with YUI Compressor
If you are using netbeans then you can use the plugin from here
Plugin
Also you can use
minifycss
YUI
For online compression
Coffee Script is used for caching the js files on browser side. It create a single js file from all files, and minify the resultant code.
you can try these for minify javascript and css online.
http://minify.avivo.si/#results
http://gtmetrix.com/minify-javascript-and-css.html
http://www.minifycss.com/