Web Development Tools – Build Tools for PHP, HTML, CSS, JS

cssgoogle-closurehtmljavascriptPHP

What are some recommendations for a build tool that would allow me to upload changes to a web server or a repository and minify the js and css automatically, and possibly even run Closure compiler on the JavaScript?

I'm not worried about doing anything with the php code other than update with most recent changes although in the future would like to have phpdoc updated automatically.

Just wondering if there is some way to do all this other than an amalgam of scripts that run or have to be invoked every time?

Best Answer

The way I read this it sounds like you looking for a Continuous Integration server. You could leverage something like Hudson or phpUnderControl allowing you the flexibility to use almost any pre-build and deployment tools you want. And builds can be scheduled or run as required.

A quick Google search should get you started.

If all the flexibility, automation and the bells and whistles are not required you could consider using Phing. This article is a good place to start.

Related Solutions

Javascript – Code review guidelines for CSS, JS and HTML

Some things to look for:

Is structured information identified using the appropriate HTML tags? H1-H6 for headings, UL/OL and LI for lists, etc?
Are no legacy HTML tags (<b>, <i>, <center>, <font>) used?
Does the site use the least amount of markup possible?
Is style information externalized to CSS files?
Is all Javascript externalized? including event handlers?
Do CSS class names refer to the function in the page (img-caption), and not form (bold-red) or content (pink-elephant)?
Are images in the appropriate format (PNG or JPEG, depending on the type)?
Have minimized versions of Javascript libraries been used?
Optionally, have all locally-developed Javascript and CSS files been minimized?
Does the HTML / CSS validate?
Has YSlow (or similar) been used to check/optimize performance?
(mostly) [SEO] Is the site accessible with Javascript turned off?
[SEO] Is the most relevant content found at the top of the HTML?

Javascript – Guidelines for HTML/CSS/JS optimization process

I worked on a project which were very close to your situation. The requirements were the following:

On development side, each page can have one or several JavaScript files and one or several CSS files. All those files are local.
In production, there must be one and one only JavaScript file and one and one only CSS file. Those two files are hosted on a distant server, optimized for static files and configured for client and server side caching.
Each page has a link to JQuery hosted at Google CDN in both development and production environments.
The deployment process must be automated.
The deployment process must not modify files other than JavaScript and CSS files for compression.
The website is written in ASP.NET.
Every page of the website uses the same CSS and the same JavaScript.
On development side, CSS and JavaScript files are always in a specific predefined directory.

Here what was done by my colleague who worked on this part of the project.

All files except JQuery are minified and combined into two files: g.css and g.js, g for global. This is simply done by walking though the specific directory and searching for those files. After minifying them, the two files are send to the static content server, if they were changed since the last deployment.
The process is executed at every build, since we couldn't find how to execute it at deployment only. It doesn't matter, after all, since it takes a few milliseconds to walk through all files and check if they were modified since the last build.
The website is deployed as is, except the original JavaScript and CSS files. We don't need them in production.
The masterpage (in ASP.NET) contains a specific method which is adjusting the calls to the JavaScript and CSS files depending of the context.

This method is like this:

public string MakeCssCalls(IList<string> cssFiles)
{
    // ...
}

In development environment, it returned the links to CSS files inside the cssFiles argument. In production, it ignored this argument and just returned "<link rel="stylesheet" href="http://static.example.com/g.css" type="text/css" />". It made the difference between production and development by comparing the machine name to the list of names in Web.config file: some machines were configured as being development machines; all machines outside this list were assumed production servers.

Performance-wise, it would be smarter to have a different Web.config file for production, indicating that we are actually in production (and, for example, precising the exact link to the static server with those files; in our case it was hardcoded, and that sucks). We couldn't do it this way because one of the requirements of this project was to have a single Web.config file for all environments, but if you can, do it.

Also when is the testing generally performed? I think it should be performed on the optimized files (just in case the compressors have some bug).

We tested the website on non-minified versions of files. We never had any bug coming from Google Closure (nor our home-made crappy CSS minifier).

Best Answer

Related Solutions

Javascript – Code review guidelines for CSS, JS and HTML

Javascript – Guidelines for HTML/CSS/JS optimization process

Related Topic