i am building a website with Cakephp Framework and Bootstrap 3 for GUI. Currently i use Minify 2.1.7 to combine and minify css and js files.
When i started playing with the idea to use Bootstraps's less files for more flexibility and cleaner css code i researched more information about Minify in order to combine it with a less parser. Unfortunately i found out that Minify is said to be a great security risk and should not be used. People recommend grunt or assetic instead. Both tools are very complicated to use and afaik they are not php only but also require certain binary support for parsers etc.
Is there a way to or a php-tool like Minify that can combine, minify and and parse less?
Is there a way to use gruntjs, assetic or other tools for my usecase? (php only)
Is Minify really such a security issue?
There are grunt tasks for minify and compiling most assets, here is one for less grunt-contrib-less.
Grunt can be used with servers written in any language, use it to generate your static assets and serve them with whatever language you want
Related
I was wondering how you would go about managing .SCSS files when a project has launched. For example I manage a number of websites & use the power of SCSS while building them.
However once a project has launched if I'm required to make a small edit currently I just ftp to the minified .css file and tag the extra few lines to the bottom... Bad I know!
Then when it comes to a larger change to an existing project the .scss files are rendered unless as the .css is ahead of the .scss therefore re-compiling the .scss will overwrite smaller chnages that have taken place.
The only way I could think to go about this would be to create an _updates.scss file and tagging all the small updates into this file. However this will take much longer than the current ftp'd changes.
What would you recommend?
I'd suggest still using Sass, it seems a waste not to after you've used it this far too for building the majority of the styling. It sounds like less of a Sass vs CSS issue (once on live) but more of a poor workflow.
If it seems slow editing once it's on live, consider an improved workflow - Use Git for version control (or similar), and possibly setup deployments, along with Grunt/Gulp to make Sass watches and recompiling a little easier to once it's all setup (sometimes it's a good idea to extend the functionality of these task runners to lint and minify code). Then you can stay up to date (using Git), make required changes and then you can deploy the compiled stylesheets. I use this simple workflow for a lot of projects, big and small and it's very efficient. Keeping an efficient level of maintainability for codebases is essential i think, and the first place you can improve this is your workflow. (see above)
I'm planning on learning SCSS, but not sure if it's only meant to help the dev, or that the server of the website I'm making should also have knowledge of that.
It's going from SCSS -> CSS, so the server shouldn't notice anything ?
SASS/SCSS is a language that has features allowing the author of CSS to keep track of properties within CSS in a more organized fashion. It also allows variables and other things which are not part of the CSS language. This is done by compiling the language into plain, regular CSS.
So a program is needed to translate/compile SASS/SCSS into CSS and that's easily installed on your computer or server. Other than doing the compile, it doesn't mean anything to the server at all.
It's an aid for the developer, not the server. To the server, it's just text it serves along with the HTML, javascript and other things.
Great choice to start learning SCSS. You can do either. You can use a server middleware to auto compile your sass when it changes, or, do it yourself with a compile tool and serve the resulting css file along with any other assets you may have.
I'm writing a small Mobile Web Application to get started.
So far so good, however I'm considering optimizing performance server-side.
After read about server compression and caching, I'd like to implement fingerprint of static resources. Basically, both W3 Mobile Web Application best practices and Google performance guide recommends it.
I'm using Grunt as the main tool to switch from development to production.
Found that Grunt got two plugins that can help me achieve that :
https://github.com/testdouble/grunt-asset-fingerprint
https://github.com/sapegin/grunt-fingerprint
However, I'm not sure how to update the html file to update link matching updated fingerprinted assets. Should i use some template variables ? I'm not a Grunt expert, use it only a few times for simple task so that might be the template system I have to dive in.
Anyway thanks by advance
If you're not too comfortable writing your own grunt tasks and would like to have asset fingerprinting as well as a ton of other features I suggest you look into Yeoman
http://yeoman.io
It'll set you up with a template for your webapp that just works. I've started using this quite a lot.
Using asp.net server side I can do style bundling for .css files and script bundling for .js files. Alle .css or .js files are packed into one file for each format and minified.
Now I am also using requirejs on client side and asked myself now should I still use the requirejs optimizer to compress the .css and .js files like my javascript libraries (Often these libraries are already compressed...). Ok there are still the requirejs modules which are my viewmodels etc... which can be compressed but often those files are 3-4 kb not really worth the effort I think.
I also asked myself is requirejs optimizer worth the time I have to invest when there is anyway gzip compression for files which gives normally the best results.
So do you think I should go for requirejs optimizer or is style/script bundling on asp.net and gzip compression on IIS server totally enough?
Optimization with RequireJS is similar to what asp.net bundling does. Bundling achieves a slightly different goal to gzipping.
The point of bundling, is to lower the amount of http requests you need to make. Making 1 request is better than 5.
That file requested can then be minified & gzipped to reduce the size of data transferred.
Similar reductions can be achieved by using well-known cdn's. The idea being, why download jquery from your server, again, when the user probably has jQuery from XYZ's cdn already in their cache?
Whether you choose to use ASP.Net's bundling or RequireJS, is really up to you. I prefer ASP.Net bundling as it requires no additional steps in my build & deploy processes.
I am getting into less.js, for development and production on client sites. It's amazing how it can extend CSS, and for me there isn't really that much difference in speed when using it.
I'm wondering if it's really that important to keep a .css fallback file for less.js? I'm sure if a user is browsing without JavaScript enabled, then they wouldn't really be able to browse much other sites anyways. What do you think? Does it really matter?
Some say it's not mean't for production, but is that true?
If your using less I suggest you precompile your less files into CSS files. Relying on less to parse your css files on the client side is introducing another point of failure.
On their website http://lesscss.org/ there are plenty of examples of how to do this.
If your using .NET you can use T4 Templates or you can use DotLess which uses an httphandler to compile the less file on the fly server side.