I'm new to AngularJS and Grunt. I have two grunt tasks setup in GruntFile.js for dev and production. For production I'm uglifying & combine many js files into one.
I need some guidance/tips on how to debug uglified javascript code in production if any problem arises. I tried googling asking my co-workers but no help hence my question here on stack-overflow.
Is there a way to un-unglify scripts in production on the fly to debug or
some configuration that toggles to use uncompressed files for debugging and compress files after the job is done.
You guys gave me some amazing approaches. Thanks
If there are some more ways kindly please do share.
Don't debug minified code without source maps. You'll go crazy if you don't. Also, can't you rebuild the code instead of trying to fix minified code?
I use Chrome, but I'm sure FF has a similar tool:
That little brackets button at the bottom of the script panel prettifies on the fly. Works whether the code is sloppy or full-on minified.
It's a good solution for quick-n-dirty, but you will run into problems if you rely on it. Source Maps are recommended. See #Kosch's answer for a decent write-up. funny, we posted identical links
Related
This is just a general question but are there any Visual Studio plugins that will minify your JS and CSS files on build/deploy?
I search a little bit and found one called Bundler & Minifier but reading the recent reviews, there are many that say the current version is buggy and does not always work. I don't want to risk anything going wrong with my website.
Are there any other plugins out there that you have used consistently and are reliable?
Please let me know!
Thank you.
This is a pretty general question - but as a newcomer to taskrunners I'm a little confused about the workflow. I understand that you can create a task that does things like uglify and minify but what about debugging while you write the code? Specifically, if I need to view my js source to identify issues, what would be my workflow? Do I create a different task that doesn't effect my javascript files for developing, then run the task that does everything when I know things are working properly?
It's hard to answer in context of the parts of your workflow you hint at but don't mention, but for uglification/minification one good solution would be sourcemaps, or more specifically, since you're asking about gulp: gulp-sourcemaps.
From their docs:
gulp.task('javascript', function() {
gulp.src('src/**/*.js')
.pipe(sourcemaps.init())
.pipe(plugin1())
.pipe(plugin2())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
Those plugins (plugin1, etc) would be things like uglify, but do need to be sourcemaps-compatible.
All this allows your browser to find its way back from concatenated, minified code, all the way to the correct source files.
As a footnote, the alternative you already mention can also work okay: compose your build tasks in a way that you can serve source (or at least: unminified) files in development, and provide minified code in staging and production.
As with all such (somewhat) broad questions: it depends.
Browserify great and all, and makes it really sweet (even compared to require.js), but the idea of bundling everything into one minified file although sounds great for final version of the app, feels like something I would like to avoid during development. Wouldn't it make difficult to debug stuff?
Is it possible to use browserify and still keep all javascript files and make it more transparent for the browser during development? And when you ready to ship it run browserify bundler and minify everything into one file?
Or maybe there's better approach - like keeping all scripts listed in a partial that gets included to the main page for development or something like that?
Upd: I just found that there's an option:
--debug -d Enable source maps that allow you to debug your files separately.
Is that helpful? I guess it is. But I suppose it still makes it difficult if want to use coffeescript source maps
Indeed you shouldn't use minified/concatenated Javascript in development. Luckly there are a myriad of ways of solving this particular issue, I recommend taking a look into an automated build process like Grunt.
Folks, is there any smart way to easily find unused files in entire solution? My project was consolidated by previous developer and it gained size at least 3x. I'd like to shrink the size of project but I cannot find quick and easy way. Any advices?
This open source project might be a good place to start. It's meant to filter out unused images, but it should be pretty easy to change so it looks for unused files.
Find unused images in VS Web Projects
How about writing a program to do it? Could be a neat little project for a junior dev to write for you.
I think finding unused code is a job for a static analysis tool. As #kiru mentioned, Reshareper has this functionality and it is easy to use. They also offer a 1-month trial version.
The extension in the selected answer above only works in vs2012 while Code Maid works in vs2010 - vs2014:
There is a free extension called Code Maid that "is an open source Visual Studio extension to cleanup, dig through and simplify our C#, C++, F#, VB, XAML, XML, ASP, HTML, CSS, LESS, SCSS, JavaScript and TypeScript coding." Does images as well.
I'm fairly new to vim/Macvim and am wondering if someone could kindly direct me to a plugin or resource on getting good indenting and folding in Vim for ruby on rails javascript erb files that are a mixture of javascript+jquery which have some server-side calls mixed in.
I know it's a tall order with essentially 3-syntaxes being intermingled but I'm guessing someone's already solved this beast.
Thanks!
I had issues with Vim/MacVim and Ruby compatibility. The first time, I installed using Homebrew and ended up scrapping that version and compiling Vim from source. It's more work but you can specify the language support that is compiled and things work much better. This post has a good step-by-step guide on compiling Vim on Mac. Try that and then see if you still have issues with js.erb files
Depending on how the file is written you may be able to fold on indentation level. This can be done by passing ":set foldmethod=indent" while in a ViM file. More information on ViM folding can be found here: http://vim.wikia.com/wiki/Folding