I need to compile / compact an "ever-growing" javascript app (round abouts 40k LoC, currently).
I don't have the time to integrate the "appropriate" tool for what I'm trying to do, something like require.js, as it requires modification of said code.
I was planning to just manually pile everything together to do a compact/compile routine, but at this point, I think that will make it quite difficult to maintain. (Ultimately, I'd like to keep the file structure broken down into its current hierarchy.)
That being said, I've been using a tool called Winless for .less compilation, andI really like its functionality:
add a folder set
note the files you want to include
watch for changes in those files and recompile when that happens
I'm wondering if an analogous tool exists for js?
The Closure Compiler does a top notch job, and I hear that Uglifyjs is good too. I might end up using Closure's REST api to manually manage file sets, but I'm wondering if anything exists that abstracts the process a little bit - into a standalone windows gui?
I've been poking around for a couple weeks, but have not come up with anything solid.
Cheers -
Have a look at http://gruntjs.com/ - "The JavaScript Task Runner". It becomes dead easy to script tasks, which would be along the lines of
a) run JSHint (for spotting errors in your code)
b) Run any QUnit tests
c) and finally call Uglify.js to compress your source in to a compressed, deployable file (I include a version number in mine to avoid caching issues).
Related
The Chrome Dev Tools JavaScript and CSS Coverage Drawer is pretty neat, except for one thing... It would be nice if it could be left on, and not reinitiate its analysis between pages.
I would like to be able to analyze an entire site, a subset of pages, or a set of websites, and find what is unused amongst them.
I get that it would mean browsing entire projects and using every feature (or setting up tests) to be thorough/precise, but that's not as tedious as what I have to do entirely without such a utility/feature. (And it doesn't seem like you would need to be meticulous to obtain usable or initial observations from a sub-thorough audit. The DevTools utility doesn't facilitate automated tests on its own either.)
The codebase at issue is huge (1.9mb uncompressed on the front end), and (possibly) contributed to by many developers who may or may not have left relics, legacy code, or abandoned dependencies. There is possibly also code that is only relevant in parts of projects, which could reveal opportunities for reducing dependency scope.
Is there a way to begin to crack into code use without a laborious manual deep dive?
It was one of the first things that came to mind when learned about the Google's coverage utility, and I assumed it would be capable of analyzing multiple pages collectively, but it doesn't.
Is there anything else that does this? Does any utility exist that can search an entire site or multiple pages and find unused JS and CSS?
Side note: The CSS is in SASS. For that and other reasons I may need to manually analyze the results and improve the code, which is trivial comparatively, so I'm not looking for a feature to automate code improvements. It's a similar situation with the JS which is minified.
This is not a request for a recommendation on poduct/software. It is asking if task X is possible, which is technically answerable with a yes or no.
UPDATE: It does seem like there are utilities for CSS, but still nothing found for JS.
For Static Analysis:
Try unusedcss.com to analyse unused CSS code across the entire website. More - Helium CSS
Try deadfile which is a simple util to find deadcode and unused files in any JavaScript project.
For Dead-code Removal:
Try purgecss to remove unused CSS code from your project.
Try Google's closure compiler which parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left.
That being said, detecting unused code is a hard problem to solve, because there are countless ways to invoke a given piece of code. Hence, these tools wisely and with your best judgement.
I have been wondering why do we need uncompressed files for development and minified for production? I mean what are the benefits of using uncompressed files over minified?
Do they give you better error messages or is it just that if we want to look something up we can go through code of uncompressed files?
Might be dumb question to some of you but I never had habit of going through code of well known big libraries and if I am not wrong, very few people do it.
The main reason for this is usability. When a js-file is minified and you've got an Error and trying to find a place where it is located, what would you find? just a minified string like
(function(_){var window=this,document=this.document;var ba,ea,fa,ha,la,na,oa,pa,qa,sa,ra,ta,wa,xa,za,Aa,Da,Ea,Fa,Ga,Ia;ba=function(a){return function(){return _.aa[a].apply(this,arguments)}};ea=function(a){return ca(_.p.top,a)||ca(da(),a)};_.aa=[];fa="function"==typeof Object.create?Object.create:function(a){var b=function(){};...
and so on. Is it readable for you? I don't think so. It's not readable at all.
For a much better understanding of the code, you need to uncompress it. It will add some additional spaces and format the code in a much readable way. so it would look like:
(function(){
var b = j(),
c = k (b);
})();
It allows you to move from one piece of code to another and discover the code or search your error inside.
Also, for production, you need not only minify your code but compress it as well. So, it would be nice to use Uglify library for that.
It removes unnecessary spaces, rename variables, objects and functions for much smaller names like a or b12. It increases downloading speed.
Hope it helps you.
There may be several reasons why one might prefer uncompressed [unminified] files during development. Some reasons I can think of:
Reduce time to view changes while coding by skipping the minification step. (If you use minification as a part of your build step during development, you may have to wait for the minification to complete each time you make a change to see it in the browser.)
If code mangler is being used, variables may be renamed and not intuitively apparent as to what they are actually called in the codebase
If you are using webpack or some similar module loader, it may include extra code for hot module reloading and dependency injection/error tracking when not minified (which you wouldn't want in production)
It allows debugging to be easier, readable and intuitive.
Minification and code mangling are done MAINLY to make the delivery of those assets more efficient from the server to an end user (client). This ensures that the client can download the script fast and also reduces the cost for the website/business to deliver that script to the user. So this can be considered an extra unnecessary step when running the code during development. (The assets are already available locally so the extra payload cost is negligible)
TLDR: Minification and code mangling can be a time consuming process (especially when we are generating map files etc) which can delay the time between changes and the time those changes are visible on the local instance. It can also actually hamper development by making it harder/less intuitive to debug
I got emscripten working, but it generates huge self executing files. Is it possible to make emscripten generate small functions that I want to optimize so I can copy paste them into my existing application easily?
Thanks!
I would advise against a copy/paste of some generated function from the inside of the Emscripten-generated output unless you have identified that bandwidth / compiling of the ASM/Javascript in the browser is a limiting factor that affects the performance of the application. Going down that route I suspect makes would make updates full of pain that I would avoid unless necessary.
What I think is better is to use the techniques in the Code Size section of the Emscripten docs
Some of the fairly straightforward ways are:
Using NO_FILESYTEM to prod Emscripten to not include some standard libraries (assuming you don't need them).
Using NO_BROWSER if you can
Using NO_EXIT_RUNTIME to not include some functions required when exiting.
Tinkering with the optimization flags, but according to the docs -O2 offers
the smallest and fastest output.
It is possible, but not well documented yet: you can use the --separate-asm flag. See
https://gist.github.com/wycats/4845049dcf0f6571387a
and
https://gist.github.com/kripken/910bfe8524bdaeb7df9a
for examples.
This may seem like an unusual request, but does anyone have T-SQL (MSSQL2008) code to "minify" javascript code?
I have a MVC site that uses a series of stored procs to generate the contents of a *.js file, and preferably after the SPs built the javascript, it could use a UDF/SP to 'minify' it.
I thought about creating a second SP set that would contain the minified version, but that would be a maintainance nightmare (doubling the current 10 SP's that build the javascript code).
I didn't know if the logic used to minify was simple enough that an SP/UDF could do it, and if lucky someone had already written it and was willing to share :)
Thanks in advance!
I don't think that minifying javascript using a SP is a good idea. You will end up with something really complex I guess. The simplest minifier that I know is jsmin and it still 300 lines of C.
Another approach could be to user a minifying proxy as a web server. I guess that it's quite fast (less than 20 lines of code) to come up with something using nodejs and uglifyjs.
the new guy here. I've been looking for a good solution to using Stylus (compiled CSS) client side.
Now, I know the tips regarding not using compiled CSS client side because:
It breaks if JS is not in use.
It takes extra time to compile in a live client environment.
It needs to be recompiled at every single client, which just isn't green.
However, my environment is an extension made for Chrome and Opera. It works in a JS environment and it works offline, so neither 1, 2 or 3 applies. What I'm really looking for here is just a way to write CSS more efficiently with less headaches, more variables, nesting and mixins.
I have tried Less, which is the only one of the trio Less, Sass and Stylus which currently works nicely client side. So, does anyone know a good solution for Stylus?
CSS Preprocessors aren't actually meant to be run client-side. Some tools (i.e. LESS) provide a development-time client-side (JavaScript) compiler that will compile on the fly; however, this isn't meant for production.
The fact that Stylus/Sass do not provide this by default is actually a good thing and I personally wish that LESS did not; however, at the same time, I do realize that having it opens the door to people that may prefer to have some training wheels which can help them along in the beginning. Everyone learns in a different way so this may be just the feature that can get certain groups of people in the door initially. So, for development, it may be fine, but at the time of this writing, this workflow is not the most performant thing to do in production. Hopefully, at some point, most of the useful features in these tools will be added to native CSS then this will be a moot point.
Right now, my advice would be to deploy the compiled CSS only and use something like watch or guard or live-reload or codekit (or any suitable equivalent file watcher) in development so your stylus files are getting re-compiled as you code.
This page likely has the solution: http://learnboost.github.io/stylus/try.html
It seems to be compiling Stylus on the fly.
Stylus is capable of running in the browser
There's a client branch available in the GitHub repo
I don't totally understand your question but I'll offer some of the experience I've have with compiled css using LESS.
Earlier implementations needed javascript to compile the LESS files into CSS in the browser, I've never tried to work this way didn't seem that great to me and as you say if JS is switched off your in for a rough time.
I've been using applications recently to compile the LESS code into valid CSS, this gets around the need for JS to convert the source code.
The first application I used was crunch http://crunchapp.net/ which worked quite well but didn't compile the css on the fly.
The application I'm using now is called simpless http://wearekiss.com/simpless and this creates valid css on the fly so as soon as I've hit save in sublime text and refresh in the browser I can see my changes to the css.
Using this work flow, I'm able to get around the issues your raised above, when I'm done doing development I just upload my css file outputted from simpless which is also heavily minified which also saves time in terms of needing to optimise the css further.
I hope I have understood the question correctly, if not apologies.
Cheers,
Stefan