I'm learning Gulp and I'm wondering how to use it in a typical project
I have a Laravel project with a public folder that has a /js folder that holds all my javascript files..
Now for the live server I would like to minify them, I have gulp-minify working but how do you arrange the folder structure? Any idea's on a good practice to do this?
Method 1: Concat all javascript files into one
So the idea is to concat all the javascript files into 1 javascript file and include that.
My question here is: I have a lot of page-specific javascript, Like my homepage has a slider which relies on a certain div with an ID, But on other pages that element isn't there, so the elements necessary to make the javascript work aren't there, and the code isn't needed for that page?
On Topic
http://ryankent.ca/starting-a-new-project-with-laravel-5-gulp-bower-and-bootstrap/
I'm very interested in your ideas!
You should do sth more than minifing files. You can merg all js files using concat.
It's usually better to load single file instead of 10 small files.
My recomendation is to minify and concat all files from js and put in level up - just in your public.
There are a few different approaches.
One is to have separate /src (for the source files) and /build (for the minified files) folders inside your /js folder. Another approach is to append .min to the minified files and keep them alongside your source files. A potential downside of these approaches is that you will have to update all references to your JavaScript files in your templates.
Lukasz's approach is probably the one I'd recommend, since it requires the least work. Ultimately, it's up to you and your personal preference.
For page specific javascript you can use gulp-htmlmin: it's born for html minification but it can also minimize your inline javascript calling uglify under the hood.
Related
Do i have to include all my javascript file while loading main index page?
In single page application when we are not logged in, we include all of our .js file in main index file. This contains js file that is only needed when users are logged in.
What is better approach of managing angular app in this context?
Simple answer: yes.
Your application is a single-page one, so you can combine all JS files into one and load it at one request. It saves time for processing in the future.
Alternatively, create two pages login.html and others.html, then load two different sets of JS files accordingly.
Normally, nowadays the bandwidth is not the bottleneck, loading a larger JS file does not make trouble (usually).
You can split your code into multiple modules and then just load the js needed for that module.
I suggest using Gulp with packages to inject HTML when appropriate. You then have single lines of code as place holders for your Javascript and you run the Gulp task to inject the Javascript into the areas where it is needed.
You could also run gulp tasks to minify your js into just a few minified files. You will need to be sure your js in min safe (gulp can do this too).
If you make AMD - most often using RequireJS - then you won't need to include all from the very beginning.
A while ago we did a similar project, although without AngularJS, and by using RequireJS we made the different pages, which use different files. And this way people's browsers will never download certain files if they never go to certain pages.
(Of course, we had many pages inside the app, not just 2 or 3, where this wouldn't make any difference.)
What are some standard practices for managing a medium-large JavaScript application? My concerns are both speed for browser download and ease and maintainability of development.
Our JavaScript code is roughly "namespaced" as:
var Client = {
var1: '',
var2: '',
accounts: {
/* 100's of functions and variables */
},
orders: {
/* 100's of functions and variables and subsections */
}
/* etc, etc for a couple hundred kb */
}
At the moment, we have one (unpacked, unstripped, highly readable) JavaScript file to handle all the business logic on the web application. In addition, there is jQuery and several jQuery extensions. The problem we face is that it takes forever to find anything in the JavaScript code and the browser still has a dozen files to download.
Is it common to have a handful of "source" JavaScript files that gets "compiled" into one final, compressed JavaScript file? Any other handy hints or best practices?
The approach that I've found works for me is having seperate JS files for each class (just as you would in Java, C# and others). Alternatively you can group your JS into application functional areas if that's easier for you to navigate.
If you put all your JS files into one directory, you can have your server-side environment (PHP for instance) loop through each file in that directory and output a <script src='/path/to/js/$file.js' type='text/javascript'> in some header file that is included by all your UI pages. You'll find this auto-loading especially handy if you're regularly creating and removing JS files.
When deploying to production, you should have a script that combines them all into one JS file and "minifies" it to keep the size down.
Also, I suggest you to use Google's AJAX Libraries API in order to load external libraries.
It's a Google developer tool which bundle majors JavaScript libraries and make it easier to deploy, upgrade and make them lighter by always using compressed versions.
Also, it make your project simpler and lighter because you don't need to download, copy and maintain theses libraries files in your project.
Use it this way :
google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");
Just a sidenode - Steve already pointed out, you should really "minify" your JS files. In JS, whitespaces actually matter. If you have thousand lines of JS and you strip only the unrequired newlines you have already saved about 1K. I think you get the point.
There are tools, for this job. And you should never modify the "minified"/stripped/obfuscated JS by hand! Never!
In our big javascript applications, we write all our code in small separate files - one file per 'class' or functional group, using a kind-of-like-Java namespacing/directory structure. We then have:
A compile-time step that takes all our code and minifies it (using a variant of JSMin) to reduce download size
A compile-time step that takes the classes that are always or almost always needed and concatenates them into a large bundle to reduce round trips to the server
A 'classloader' that loads the remaining classes at runtime on demand.
For server efficiency's sake, it is best to combine all of your javascript into one minified file.
Determine the order in which code is required and then place the minified code in the order it is required in a single file.
The key is to reduce the number of requests required to load your page, which is why you should have all javascript in a single file for production.
I'd recommend keeping files split up for development and then create a build script to combine/compile everything.
Also, as a good rule of thumb, make sure you include your JavaScript toward the end of your page. If JavaScript is included in the header (or anywhere early in the page), it will stop all other requests from being made until it is loaded, even if pipelining is turned on. If it is at the end of the page, you won't have this problem.
Read the code of other (good) javascript apps and see how they handle things. But I start out with a file per class. But once its ready for production, I would combine the files into one large file and minify.
The only reason, I would not combine the files, is if I didn't need all the files on all the pages.
My strategy consist of 2 major techniques: AMD modules (to avoid dozens of script tags) and the Module pattern (to avoid tightly coupling of the parts of your application)
AMD Modules: very straight forward, see here: http://requirejs.org/docs/api.html also it's able to package all the parts of your app into one minified JS file: http://requirejs.org/docs/optimization.html
Module Pattern: i used this Library: https://github.com/flosse/scaleApp you asking now what is this ? more infos here: http://www.youtube.com/watch?v=7BGvy-S-Iag
I am using jquery fileupload plugin and it has 7-8 js files which it loads.
Now others developers are also working on site and sometime it cause confusion and difficult to find which js file is used where.
So i am thinking if i can combine 7 files in one file so that i can know that thats my file
Try this to compile your javascript file or code.
http://closure-compiler.appspot.com
While possibly overkill in this particular case, it might be worth checking out grunt. It will let you keep your files divided into multiple files for when you are working on them, and as soon as any file change compiling, minifying and combining them into a single/groups of files as desired, while also allowing you to define the load order of your code.
It requires some setup the first time you run it (which you can later use as a template) but greatly improves the process of combining/minifying files, and also has support for processing coffescript and sass among others, as well as writing unit tests for your code.
I use Rake to compile Javascript (and SASS to CSS, as well). It minifies the files in a unique JS. It's written in Ruby, but it's easy to configure and it works very fine.
But if more developers are working on the same code, another good idea I strongly suggest is to to use a SVN (sub-version control system), as TortoiseSVN or Git. This will allow many developers to work on the same source files, without losing any change.
On an average I have 30-50 lines of javascript specific to the page (it is not common). How should I structure my Javascript code so that it gets downloaded in an optimal manner on the client.
If I put that in a common Javascript file then the initial page download will take time because it will even download Javascript code that is not for that page.
If I put it embedded within the page itself then disadvantage is that it is never cached.
How should I structure it in optimal manner? I have round about 30-50 pages in my application.
When developing, use a logic folder structure so you can put all files in a folder and you can find them easier. When in production, concat and minify your code/files and use one reference to that minified file.
If you want to seperate even in production, think of a way to concat files as much as possible and minify that files. To load files when needed, you can think of a library as RequireJS.
I have the same directory/file structure under js as I have for the html (php) files, so when I'm on any url (/example1/example2) I include /js/example1/example2.js
Let's say my page structure is :
1. one.html :
includes -> a.js , b.js , c.js ,d.js
2. two.html :
includes -> a.js , b.js, x.js, y.js, z.js
3. three.html :
includes -> a.js , b.js, s.js, x.js, y.js
and so on.
Some pages are more visited than others, say 3 pages contribute 99% of all page views of the website.
I am looking for a solution to:
i) Combine and minimize files in groups which can be included in the pages.
ii) Has some logic to map files names of the group, to final combined file name.
iii) Includes a minifier like Google Closure compiler / YUI compressor.
One solution I have looked at is:
PHP minify
which does most of it. However it has following drawbacks for me:
i) I would be hosting my static combined files on a CDN server,not on same web server hosting PHP minify, hence PHP minify's logic to server files by group name does not work for me.
ii) PHP Minify uses PHP CGI to process and serve the scripts, whereas I would want my minified content to be served directly from the CDN server.
Does PHP Minify have some functions to map group name to combined file name, which I can use in my webpage to directly set CDN path of the combined JS file. eg
<?php
$groupName = array("onePage" => array('a.js','b.js','c.js','d.js');
?>
<script type="text/javascript" src="http://www.MYSTATICSERVER.com/js/<?php getMergedFileName($groupName)"></script>
Rather than calling PHP Minify's PHP script to get files of a group, which is
actually a PHP page call,which then serves the javascript content from previously
generated files:
<script type="text/javascript" src="http://www.MYWEBSERVER.com/min/?g=onePage" ></script>
( I agree most of this is doable by combining different solutions with custom deployment scripts and minifying tools eg ANT,FABRIC + YUICompressor/ClosureCompiler, but I am looking for a well developed configurable solution that I might have missed )
Updated to show example for minify
It does appear doable using minify. I'm not sure if you have tried this out, but putting it out there for anyone else who might need it
1) Minify can generate a combined and gzipped copy of your scripts and use it as a cache so that it need not process all your files for ever request. To enable this, just edit config.php file with the location of the temp directory
$min_cachePath = 'c:\\xampp\\htdocs\\min\\cache';
2) After you add all your groups in groupsConfig.php, just make a request to each group so that minify generates the outputfiles in the cache folder
3) For each group, you will find 2 files in the temp folder named so:
minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4
minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4.gz
4) You can rename the files and deploy them directly to your CDN as required
5) If your CDN allows url rewriting, you can rewrite your script url to serve up the JS, without the need to change the location in the pages that you serve.
Unless you have a huge number of different configurations, I'd recommend you do it using YUICompressor and deploy to your CDN network. It is actually quite trivial to automate something like that using a simple shell script. If however you have a really complicated setup, you can consider using a build tool like grunt that runs on top of node.js. I have been using Grunt to build JS files for different projects using the same codebase, and it works quite well. In addition, lint and compression are supported OOTB.
My own projects are much like yours; HTML with both external and interned JavaScript, CSS and images. I too have looked around for a ready-made solution and wasn't able to find it, so I've developed my own. Here's a run-down of the system I've created. If you're going that route I hope this gives you an idea of what to look for.
The system starts by checking out a particular revision of the project you wish to deploy. You need to establish a translation between paths on the local file system and their respective remote paths (e.g. CDN or web server); in my case, all assets are loaded from a fixed directory inside the project.
I start by parsing all HTML templates (I have an MVC to separate HTML from PHP code); this collects all JavaScript, CSS and image references:
Image references inside HTML, JavaScript or CSS get replaced by their location on the CDN.
Interned JavaScript and CSS get compressed on-the-fly using Closure Compiler and YUI respectively.
Consecutive external JavaScript and CSS blocks get replaced by single bundles of compressed code / style; the bundle name is a hash of file names and their respective version (CDN will serve those files with maximum expiry date, so any change must cause a unique file name).
Then, all bundles get compressed, zipped, saved and uploaded to the CDN together with any images in preparation of deployment. PNG files are also "crushed" to reduce their size.
Finally, the whole project is uploaded and deployed (in case of multiple servers).
Conclusion it's a lot of work, but when it runs it's great to see it work :)
Create a grouping configuration file(xml/php), which contains the grouping rules for use in static html you have.
<groupings>
<group path='grouped_minified_js.js'><!-- multiple groups can be used for grouping js/css files. reuse this group by including the id in multiple views -->
<resource>PATCH_OF_FILE_TO_BE_GROUPED</resource><!-- multiple file to be grouped -->
.
.
.
</group>
<group path='xyz.css' /> ...<!-- additional grouping rule -->
</groupings>
create a php script which reads this config and uses PHP minify to create grouped minified js/css files at the path specified in group definition.
Use these paths to include grouped files into the static html files.
Run the script to test your pages and deploy the grouped files to the CDN.
grunt is great. If that doesn't work, try cassette: http://getcassette.com/