I am finished up with my google chrome extension development. Now its time to deploy on google chrome extension dashboard. But the problem is How do I minify my javascript files (background.js and content.js). I can use online tools available but they do one file at a time and do not consider the dependency on other javascript file.
For example, message passing between background.js and content.js is done by a key value, which tells the other party that what kind of message is this.
I am not sure whether chrome itself minifies my javascript file. I little illiterate here. Please help.
Chrome doesn't perform any minification out of the box. Your Chrome extension will load the JavaScript/CSS files as is - minification is completely up to you. Most extensions are left unminified for ease of debugging and for other users to be able to inspect the code. There should be negligible performance gains typically for extensions.
If you do want to minify you can run uglify tasks using grunt or gulp.
To minify HTML, try HTMLMinifier
To minify CSS, try CSSNano and csso.
To minify JavaScript, try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
Ref: Minify Resources (HTML, CSS, and JavaScript)
Related
Developing .NET web projects, I'm used to using either the bundleconfig.json and/or compilerconfig.json file to bundle and/or minify javascript (and css) files. Is there a way to use either of these methods or some other method to minify a source javascript file (located in a folder outside of wwwroot) to the root .js file extension? I don't want the minified output to be filename.min.js, I want it to be filename.js (but minified).
I know ultimately, I can manually rename the files to accomplish this, but I'd rather it be automated in Visual Studio if possible.
Also, if it helps, I'm currently building this project in .NET 6.
Search for Visual Studio Code Minify plugin on Google. There are many here. For example, https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier https://marketplace.visualstudio.com/items?itemName=fbdegroot.Minifier.
This is about how to use Visual Studio 2017 with both Bundler and Minifier and also the "Visual Studio Installer Projects" extension.
My web app has only one main page, so the <script> tags are all there on one ASPX page, about 40 of them as there are 40 JS files. When I run bundler and minifier, I want one script tag to point to the bundled and minified JS which is now in one file (and CSS is also bundled from 7 files to one)
When running in release mode I want to use the bundled and minified version so its a simulation of what will be running when live.
When running in debug mode I want to use the unbundled files so I can debug the javascript in the IDE and see the CSS in f12 etc.
I think this means that my one page, a.aspx, has to have two versions ?
When building using the installer projects extension, I want to build only in release mode and that would be using the single bundled JS and CSS files, I don't want the other uncompressed javascript and CSS files shipping in the project even though I want them there when debugging.
How do we go about setting up a project to achieve this ? Is it even possible ? or do people write code to copy out the projects and edit the project files before compilation ?
thanks in advance
I was searching over the internet to find a good document about how to install Closure Compiler from google on my Debian Nginx server, and got nothing. all I got so far is Closure Compiler. I want to install this tool to compress and minify both css and js files independently so that these static files get lighter on page load when requested.
Is there any good source how to do that?
all I find is about Yui compressor which is not as good as Closure Compiler as I read.
any thoughts on that?
Closure Compiler does not minify CSS files, just JS files. For that you want: https://github.com/google/closure-stylesheets
Closure Compiler isn't a good choice if you want to minify arbitrary JS files without testing the result. It doesn't back off when faced with eval or with or IE's conditional code like some other compression tools do.
If you are using Apache perhaps you might like Google's PageSpeed module which is designed to work in the general case.
I'd like to start bundling our javascript files. I've found that it's really easy locally using the web essentials plugin, however I need to set up the build server to generate the bundled .js file.
I'd rather not check this generated file into TFS as it will cause conflicts for our developers, and also since it's generated from the source I feel that the server build should generate it.
Is there a command line utility for doing the script bundling outside of visual studio that could be used as part of a build script? My google-fu is failing to find one.
Many thanks,
As long as you wrote it as proper AMD modules, require.js comes with a tool to turn all your files into an optimized bundle.
What tools can minify JS/CSS files after saving files without using console? I want something like SimpLESS. Write and update some js and css files and they minify and concatenate in two "build" files like that daemon program do automatically with LESS.
For Windows: Smalify works for me, if I'm not using CoffeeScript. I haven't tried them, but there are several other CodeKit alternatives here.
You can always find a plugin for your Text Editor. I don't know which editor you are using, but most of the popular ones either have build systems, have strong plugin communities, or both.
Sublime Text 2: Tons of plugins, and you can customize a build and save script.
Notepad++: Vibrant community, has minification plugins that would work for you as well.
CodeKit for Mac.
Check this python script.
http://github.com/hkasera/minify
It minifies js as well as css files too. It stores detailed log files and you can add this script as a git hook and save yourself from doing it manually everytime.
Hope it may help!