I am have been building web applications for several years, exploring and looking for ways to improve the web app performance. I would like to ask if there is any method to minify css/js when we launch the web application automatically? I do not use any php frameworks, rather i built my own.
I was exploring one web application and i saw they have this
<link href="/assets/application-76c372b1409e29d226c9566022d5546f.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-cb571d9ff5185e712000e3378494e4ee.js" type="text/javascript"></script>
I seen similar sites that has js and css files stored in /assets/ etc with a name starting with application- too. I would like to know if anyone of you know what mechanism they are using? I am sure they compressed their files the same way.
Any idea what framework/programming langugage they are using?
advice appreciated. thanks
Often this functionality is built into the web framework that you are using, or an external series of programs like SASS, Compass, Uglify, and Grunt do the work. There are MANY ways to do this, but I'm going to explain the principle and just one way of doing it.
Generally, the principle is that during your deployment process, you concatenate all of the files together, take a hash (like an MD5 sum) of the content, and create a file name based on that hash.
So for example, if you had:
source/assets/reset.css
source/assets/main.css
source/assets/fonts.css
You could clear out the output assets directory, which is separate from the source assets directory so you don't overwrite anything, then concatenate these 3 files together, take the MD5 hash, and then create a file named application-$hashvalue.css, and write the contents to it.
Concatenating is helpful, but you could also run it through a minifier such as CSSMin, JSMin, Google's Closure Compiler, and many others.
Now that's all if you want to do it by yourself, by hand. You're of course not the first person to solve this problem, and there are a variety of tools to do this for you.
An general example set of tools to do this for you:
Grunt, as a task runner. Sort of a supervisor of everything else.
Uglify, a minifier for JS
SASS + Compass to manage and minify your CSS
grunt-contrib-uglify: a plugin to connect Grunt to Uglify
grunt-contrib-compass: a plugin to connect Grunt to Compass
So then you just run your grunt file and it will compile everything out for you. You could do this during deployments or have a directory watcher running locally.
PHP-specific asset management:
https://github.com/kriswallsmith/assetic
Unfortunately that's the only one I know of, as I don't use PHP much anymore.
Related
My original problem was linking multiple stylesheet frameworks. My primary option was Materialize and for reasons, i'd like to integrate Bootstrap on some buttons and other components. After hours of desperate research, i found myself staring at css pre-processors, e.g. LESS and SASS. I found out that you can do dynamic css using these badasses.
Investing a couple more hours deciding which to use, I ended up failing to install both.
So far I managed to download bootstrap sass and integrated it inside my project and compiled it using grunt (follow this instruction). I don't know how to use it and where to start.
I found some cool references here but it was not enough to get me going.
.bootstrap {
#import "/bootstrap.less"
}
I have so my follow up questions to the post:
should I link the less file on my index.php?
can I use any editor and compile the less with any less compiler?
should i link the compiled less or the created css?
do I even need to use LESS for this?
Note: I'm a total newbie with LESS and SASS. Any information is a ++.
I personally prefer Sass and I use it a lot even for small CSS stylesheets!
Here you are my answer:
Absolutely not! A less file is not intended for browser parsing. It is intended only for development purpose, that is to produce one or more .css file.
Feel free to use any editor you prefer and compile with any compiler you prefer. For example, I use Scout-App for Sass.
You must link only .css produced files.
It depends on your project and/or your needs. LESS and Sass are very similar.
Other tips for you:
Install on your CodeIgniter app an asset helper, and in asset folder place your css and less files. See the directory structure below:
application
system
user_guide
assets
--css
--less
--js
--img
ecc...
Put your less file separated from your css file. Link css file with the asset helper and you will have autoupdatable style!
If you use Git, remember to ignore css folder and track less or sass folder.
I hope you can find these tips helpful!
UPDATE: It's a shame that no one answer to this question in time!
All the tutorials on optimizing website assets with grunt and grunt-usemin are based on the src -> dist deploy strategy. basically processing the items in your src folder and compiles them into the dist folder.
But PHP doesn't work this way. It isn't compiled and "distributed". The source and target page are the same. Which makes it a destructive process.
How do you work around this? Any tips on using Grunt in PHP project in general?
Thx.
We do something similar. We created an index.src.html with the non-minized sources, and create an index.html from this file using usemin, and we have a "proxy" php file which opens the index.html if it exists (which means we are in the production environment and the assets are built), otherwise the index.src.html if the assets haven't been built or we are in a development environment. The main idea is to separate the important parts for usemin to a different file.
The usermin plugin is for preparing static assets (concatenate, minimise,...). Static means the server gives the same content for everybody. This constraint doesn't apply to PHP...
If you would like to use this tools to optimize your php generated pages assets, you should create input files which can be parse-able by usermin. For example you can collect the javascript/css file references into a template or a different php/html, and you include/use this file where you need, and after the build you use the usermin parsed version of it.
The ideal approach would take advantage of the dynamic nature of PHP to make the "distribution" URL replacement. The process would be:
Your build tool creates some kind of manifest or machine readable file with changes applied. Some tools, as gulp-rev will do this for you.
Read the manifest from PHP and replace the resource URLs with the final ones.
I have been looking into incorporating an asset management/pipelining tool (probably Assetic) into my PHP project.
Since assets can be grouped into collections or wildcard-based paths using such tools, if I wanted to set up a watch process that re-compiled/minified only those source files that had changed, how would I do that given that assets have to be looked up by name (see example below)?
(I noticed that for Symfony there's a watch task for Assetic but I'm not sure that it re-compiles only the changed file(s) and also I would have to make it work outside of Symfony since my app uses the CodeIgniter framework.)
In Assetic, you can create a wildcard-based asset, e.g.:
new GlobAsset('/path/to/compass-sources/*')
You can tell it to send the assets through a filter (Compass in this example) and then output the result (CSS) to a folder like public/css.
Let's say I set up the watch process using node.js's fs.watch so that I can theoretically tell Assetic to re-compile a particular asset whenever one of its source files changes.
Since my node.js script would only know the name of the actual file that changed (e.g. compass-sources/layout.scss), how could I look up which AssetCollection or GlobAsset that particular file belonged to (say an asset called global-styles) in order to recompile it?
I'm open to alternatives here. I looked at grunt and may very well use grunt-contrib-watch to handle the file watching, but I like the idea of using Assetic because the project is in PHP and I think that will be easier on future PHP developers working on the system who may not be familiar with node.js. It seems grunt take a different approach where assets don't necessarily go in named bundles. Mostly I want to understand the conceptual approach of named asset bundles (like in Assetic) as it relates to my goal of recompiling assets whenever the source files change.
I'm having a bit of an application structure design dilemma.
I have created a web app that creates online surveys. It all works fine, but I would now like to create a new site that does different types of online surveys. This new site will be pretty much 95% similar in terms of layout, logic, functions, etc.
Rather than duplicate all the code from the current web app, I'd like the new app to share in the "fountain of knowledge" created by the current app - so to speak.
Can anyone enlighten me with their experiences of doing this sort of thing? Their best practices?
As a rough guide, I'm currently thinking of using symlinks for all the major logic files (library.php, functions.php, etc), and then deciding which logic to use based on which URL the user logged-in from.
Does that sound like a good or bad idea?
Would it be any better or worse to divide the whole system in to 3 sites, with the site in the middle containing all the common elements and logic? This middle site would have no independent use - it would be used from either of the 2 applications looking for functionality and assets, etc.
Any help and experience on this matter is very much appreciated indeed.
I'm very wary of going down a dead-end solution.
Kind Regards,
Seb
Good solution if:
you host your website yourself and creating symlinks between differents virtual hosts is not a problem
you won't have to make significative changes between the 2 websites
But instead of using symlinks, I could take advantage of PHP's include_path directive and put the common libraries in this path. This way, just write your includes relative to this path, the files will be accessible from any site you want on the same server.
The second advantage of using include_path is you can bypass any open_basedir directives which wouldn't allow you to include files which are not in the same virtual host base dir.
This is how I'd do it...
Create a core library.
Create you 2 site directories.
Create site specific code folders in
each site.
Create core library folders in each
site that simlink to the main core
library created.
What is a benefit of having "build/" folder where all the sources will be placed and "built"?
Maybe it's a silly question, but I'm trying to understand Continuous Integration with PHP. Any example of build.xml for phing uses such build/ folder, but what's a sense in that for PHP where a checked out project doesn't require a compilation, only a basic configuration. Copying it all into build/ will just complicate the things, because you'll have doubled files and +1 folder to the web root path (if you'd like to have web UI to run selenium tests on)
Particularly I need phing for two cases:
1) let new user setup his first installation (or update old), right on a working copy
2) run unit/func-tests, phpcc, phpcs, phpdoc etc (all that usually on CI server)
Should I have "build/" for the second task? What is the best practice for PHP?
There are several good reasons to have a build directory (i.e., deployment to multiple environments, performing some text replacement, minimizing and combining CSS and JS, optimizing images, handling of config files etc.)
However, these may not apply in your use cases. There is no rule saying you need this directory. Depending on your thinking on testing in production, a build directory may be a good reason to keep this directory.