Hopefully, this is not a duplicate question.
I want to know the best practice, as i am very new to the whole front-end development, how people develop/test javascript/css and at the same time ship their code and all dependencies as minified. What kind of build process do you use?
Here is an example: say you have style.css and app.js with dependencies to bootstrap.css and jquery.js.
How do you include full versions of these files in html when developing and then use the minified versions when releasing? Do you minify the third-party css/js such as jquery and bootstrap yourself using YUI compressor (or some other tool similar) or use the downloaded minified versions? How do you swap between full versions of code and the minified versions?
Thanks.
I would maintain your codebase only uncompressed and use ant (http://ant.apache.org/) or something similar to create a build process which runs your tests, maybe runs jslint over your code, and then minifies it and copies it into a structure that is ready to be released.
The build could name the files as required so you dont have to worry about the minified filenames being different.
I do this by using pre-compilers for css and javascript. There are many ways to do this effectively, I write the code using SASS and use two apps: prepos (win) & scout (win/osx) to compile the code either minified or human readable.
I recommend that you watch this video on this topic by CSS Tricks:
http://css-tricks.com/video-screencasts/124-a-modern-web-designers-workflow/
Related
I have a large project entirely built in JavaScript, I have an ordered and "inside modularized" 5k lines .js file that's the engine of whole site.
Now I have to make other site (extension of this one) in which I'll have to repeat a lot of code, my question is, I've seen lot of possibilities using Browserify, CommonJS, etc. But that's not what I'm searching, I'm searching modularize JavaScript just like C/C++, making #includes with the files of the functions or functionalities and reuse code like that. I'm already doing this including other JS files in HTML, but that JS files are only variables and some arrays, not functionality of the site.
I use jQuery too, in that large 5k lines .js file I have almost all inside the jQuery document.ready event, that's bringing trouble too, because I'll have to make a document.ready event for every file?
I need some orientation please
CommonJS will let you require() modules, this is the foundation for the NodeJS module system. Browserify simplifies this implementation for use in browsers and even allows you to require Node modules (as long as they don't depend on binaries, the file system and other features a browser doesn't support).
var lib = require('someLibrary');
ECMAScript6 (aka: ES6) brings imports to javascript. While browsers don't fully support ES6 yet, you can use Babel to "transpile" ES6 to ES5. This ES5 will take advantage of CommonJS to replicate the importing behaviour.
import { SomeClass, someFunction, someValue } from 'some/library';
In all cases, your javascript will require some kind of pre-processing to transpile it into javscript a browser can understand. This usually means taking all your separate source files and bundling them into a single minified bundle file. This reduces the number of requests the browser has to make.
To handle all this transpiling and bundling, several popular build systems exist including Grunt, Gulp and Webpack. Grunt is older and typically slower because of it's configuration-based design. Gulp is simpler and faster because it relies on NodeJS streams. Webpack is the newest and most powerful, but at the cost of complexity. For what you're hoping to do, I'd recommend looking at Webpack since it can modularize not only your javascript but your stylesheets and other web assets.
http://webpack.github.io/docs/tutorials/getting-started/
Use webpack to bundle your code http://webpack.github.io/docs/tutorials/getting-started/
I deployed my application, I find that the loading time is much .. there isa way to compress css and js files ? , knowing that I use in each page that the necessary and sometimes js version minified .. thank you
In my experience with compressing JS files, use UglifyJS, and CSS files I prefer using Compass with Sass, which not only can minify CSS files, but also support the superior (personal opinion) SCSS-syntax.
Both engines work well along with GruntJS, which is a NPM module and a tool to perform various tasks. I use the following plugins with Grunt:
Grunt-contrib-compass for the Compass tasks
Grunt-contrib-uglify for the UglifyJS tasks
Additionally Grunt-contrib-concat if you just want to concatenate various files
And several other modules to run a local server, optimize images, etc. Have a look at the plugins page for GruntJS.
The Setup:
I have a large SPA app using many JavaScript files that are bundled using Web Essentials bundling in Visual Studio 2013. I then include the minified js files generated by Web Essentials on my HTML page. This application does not use ASP.NET
The problem:
I would like to be able to distribute the HTML page with a single minified script referenced for production but the individual unminified scripts for development.
Reasons:
The minified scripts even with the map files make it difficult to debug. Variable and parameter names have been minified and thus the debugger does not match the source. Additionally, since everything is in one file, its hard to look at for development.
Current solution:
I have a grunt task that goes into my html file and modifies it such that the <script> tags are replaced. This has the con of growing with every file I add to the page.
Does web essentials offer a better solution than what I am currently doing that I might have simply overlooked?
You are mixing the bundling tool with the reference implementation.
Web Essentials 2013 builds bundles of compressed (minified) JavaScript, CSS, LESS, SASS and image files. Web Essentials should create the minified bundle regardless whether you are in Debug mode.
You are looking for a way to selectively reference minfied files in Release mode and originals in Debug. That may mean rather involved Razor coding to check for release version and render reference calls.
A better solution is to use ASP.NET Bundling and Minification.
It's easy to debug your JavaScript in a development environment (where the compilation Element in the Web.config file is set to debug="true" ) because the JavaScript files are not bundled or minified when debug="true"
The minified bundle will still exist if debug="true" in your Web.config. But at run-time, the framework will reference the originals files instead of the minified. Your Web.config is now responsible for maintaining which version of your assets are referenced.
Web Essential bundles are passive assets. There is no functionality in Web Essentials to distinguish between Release and Debug mode because that is a run-time action.
Note: Web Essentials 2015.0 has removed bundling and minification.
Important!
Web Essentials 2015 no longer contains features for bundling and
minifying of JS, CSS and HTML files as well as compiling LESS, Scss
and CoffeeScript files. Those features have been moved to their own
separate extensions that improves the features greatly
The common practice is to use the ASP.NET Bundler. This is another reason to get away from bundling with Web Essentials.
i ma not sure if Web-essentials can handle that scenario though
As per my current project experience below are the things i use to debug the code locally while development-
For local debugging if you are using the ASP.NET bundling feature and must have specified the file references in the BundleConfig.cs. You can enable the browser to Load each file as is by Setting the flag BundleTable.EnableOptimizations=true; in the Global.asax file. And we load the single bundle file to work on local environment
For Production we use the minified versions of the file references.
eg in your HTML you can have a check like this
#if(local){
#Scripts.Render("~/Scripts/src/BundleName");
}
else{
//Which is an partial HTML which contains the minified file references
Html.RenderPartial("ClientTemplates/MinifiedScripts");
}
Thanks
I have just used the Bundler/Minifier from here: https://github.com/madskristensen/BundlerMinifier
To help see the unbunded and unminified JS and CSS I have created a helper to render both depending on whether the web application is running with debug enabled.
see: https://bundlerminifierhelper.codeplex.com/
Example:
#Html.Bundle("/Content/Styles/Site.min.css")
#Html.Bundle("/Scripts/Scripts.min.js")
Note: Using relative paths, including the forward slash (/)
When debugging all the input files will be rendered out to the page, and when not debugging, the supplied path will be rendered out.
For CSS, I can use SASS to import one CSS file to another and produce only single CSS file. What is the similar method for Javascript files?
You might want to check out Closure Compiler (which is a Google product).
You would probably want the Closure Compiler Application form of the product.
A sample workflow would probably look like:
Create a list of your JS files and paths
Run the command to compile and concatenate files (java --jar compiler.js --js path_to_file1.js --js path_to_file2.js (etc.) compiled.js)
Closure Compiler also has a related project, Closure Stylesheets, that does the same thing for stylesheets.
This approach, of course means that there's a pre-compilation step. Depending on your backend, there also exist libraries that do the compilation when the page is built. For example, for JSP, there's Granule a tag library that creates the compiled JS and CSS files at page build.
There's a third possibility: modularization. Since you gave the example of being able to import CSS files in SASS, an analogue for JavaScript is using a module library, using either the CommonJS standard, or (the one I prefer), the AMD (asynchronous module definition) pattern, which I have personally used with RequireJS. RequireJS also comes with a nice optimizing tool that will bundle up (minify, compress, concat etc) all the required files for your application
UPDATE
Since you mentioned that you are using Django in the comments (might be useful to update the question with this info too), see if this answer helps too
You could use minify which allows you to minify and combine javascript files. It also works with CSS.
There is really two questions here.
1) should minification be done by hand or done as part of a build?
2) should the minified files be version controlled?
I"m trying to define a go forward path for the current project that i'm working on. I've done some speed evaluations and I believe that my current site could have big performance improvements with just adding some compression / minification.
Here is the basic setup
IBM Commerce 6.0
a ton of large js files (nothing has been minified or compressed)
a ton of large css files (nothing has been minified or compressed)
should minification be done by hand or done as part of a build?
As part of the build. That way you can't forget to do it. You don't usually need minified code in the development environment, you can build by hand if you find you need to debug problems that only reveal themselves in minified code.
You can test the minified code on your staging server.
should the minified files be version controlled?
Not by your source control. If you have an archive of historic build artefacts then they should be part of that.
That all depends.
Sometimes it's useful to have this done on the fly based on a configuration setting. For example, if you're deploying to a test environment and you have minified your JS and discover a bug that only occurs in that environment, it's often handy to flick a switch so your application starts serving un-minified source files for debugging.
you Can Use smartoptimizer That Can minify and compressed your JS and CSS
And Can cache This file Until No Change Happen In File.
Download smartoptimizer
one of the this website project is about minify and compressed js or CSS with php. the advantage of this program is detect js and css then minify and compressed .if js or css change this program detect it and renew minify and compressed file