I'm a bit new to Symfony and I'm don't know what to use for my static file management. I have read about Assets component and the Assetics bundle.
I know that Assets just includes the files and Assetics is a bit smarter as it can combine files and compress images. But I already use compass to minify and combine the css files so therefore Assetics is not really required.
Version control so the url of the static files change to by pass browser cache, is done by both.
Assetics is removed from 2.8 or higher, does this mean it is not best practice anymore?
I need to generate urls on three places:
Twig -> Easy to do with both
Controller -> Found only a way to do this with Assets
In css files -> Believe it is with both not possible
Wat would be the best to use in my case, any advise?
Assetic can be seen as a way to easily apply filters and compile your assets. The asset component basically is used to manage URL generation. As you said, both nicely are integrated in Twig via extensions, and controllers via the services.
Our application uses compass too, but Assetic makes sure that the compiling happens at the right moment without the need of compass watch at the commandline.
Think most of your questions are answered on:
http://symfony.com/doc/current/cookbook/assetic/asset_management.html
and
http://symfony.com/doc/current/components/asset/introduction.html
I've been using the RjFrontendBundle to run the front-end CSS/JS build, and also copy other static content into place from Bower/NPM/local sources. It provides a VersionStrategyInterface for the Assets component that creates, and uses unique filenames in production (renaming the files with an embedded hash, via the GulpJS rev-all package). In dev, it uses the normal filename.
Within CSS files, you can still reference CSS/JS, via a url() function, and the pipeline will rename them appropriately in dev and live.
The GulpJS build tool is used to minify and otherwise prepare the plain files. It comes with a setup console command to build the initial gulpfile.js and can also watch and rebuild files, updating the browser as they are changed, which helps with front-end development workflow.
The trend is to use standalone front end tools such as gulp/grunt/sass instead of assetic. The reasons are (probably) as follows:
gulp / grunt are independent from the framework, providing the same workflow for the front end guy no matter what underlying framework is used for the backend.
assetic has a different workflow than most of the modern tools. It assumes that you will write your script/css includes in the templates. Migrating from assetic to gulp could be a pain for large project.
as your project grows, assetic can become kind of slowish... As that happens, you will stop pulling your assets from the controller and start generating them the way gulp or grunt does. In this scenario, gulp and grunt are just better tools.
assetic lacks some important features, such as including processed assets into HTML code (inline). Because of the way assetic works (twig tags), it might be difficult to overcome this.
As for generating the URLs: assets are just files in the filesystem. Write a function or twig extension to generate URLs to those files.
Related
I am configuring grunt for SAPUI5 project. I can configure grunt taks for minify, test and etc. I see there is grunt-ui5 grunt plugin but I am not able to understand what exactly this plugin is doing or useful to SAPUI5 projects.
Thanks
The grunt-openui5 plugin by SAP is documented at github.
It can be used to build UI5 themes and package components and libraries into preload-files.
UI5 tries to load most of the modules of a component or library with a single request from a component-preload.json / library-preload.json file. If it cannot find a preload file, it has to request all modules individually resulting in many many requests and thus poor performance.
grunt-openui5 is used to create these preload files. It also minifies the code while doing so.
The grunt-ui5 plugin is something inofficial which seems to do similar things. You would have to ask the author directly to get more information. I recommend to use the official grunt-openui5 plugin.
For ui5 applications it's not common to use the grunt task for minification , instead we use the grunt-openui5 task. It will create the preload file, which is a json object that contains the whole app.
{
"version":"0.0",
"name":"app name",
"modules":[
"control1": "code for control1",
"control2": "code for control1",
]}
When control1 is required, ui5 just uses the preload to get the code for control1. In this way, ui5 avoids triggering a new request. Anyway, If the preload file is not present, it will have to request control1.js .
If you want to see a real preload file, open any ui5 app and go to the network tab of the browser.
Using the grunt-openui5 plugin for grunt, it will do the work for you, and will give you as a result a library.css, rtl, library-parameters.json (same thing, but for themes) and the preload.json (for the js files).
Instead of using grunt-ui5, I would recommend you to use the the oficial plugin grunt-openui5!
grunt-openui5 is a really amazing grunt plugin created by bunch of SAPUI5 core dev team ;)
It mainly allow you to do 4 things:
create Component-preload.js (optimized and minified version of your app)
create library-preload.js (optimized and minified version of a custom library)
create a custom theme
create a local web server to test your app locally
I've covered it a little bit on my blog post Custom Control 101 if you want to check it out.
I'm using it in daily basis and you can read some of my blog posts about it.
Just a small remark: in the future, consider switching from grunt to gulp, as gulp is newer and faster. For SAPUI5 there are packages with same functionality in gulp, as ingrunt.
I am working on a rails app and I would like to include some custom css files inside my rails application. I would like to separate out the css from bootstrap and the css that I wrote. Could I just put the custom css files inside vendor/assets/bower_components folder in my own css folder?
Is there anything else that I need to do for my css files to be picked up?
There are several ways you can achieve bower functionality in a Rails application.
Although having said that, I'm not sure about your wanting to use it on your custom.css file. The file itself will work just as well if you keep it in your app/assets/stylesheets folder, which will concatenate it to the asset pipeline
Bower-Rails
You'll may wish to consider using bower-rails, which seems to just give you the ability to use bower within your Rails app. This seems to be specifically for helping you keep your dependencies up to date:
Dependency file is bower.json in Rails root dir or Bowerfile if you
use DSL. Check out changelog for the latest changes and releases.
RailsAssets
Another amazing piece of functionality we found recently is "RailsAssets"
This works really well (we use it in production), as it keeps your dependent assets completely up to date. You can use it very simply:
#Gemfile
source https://rails-assets.org
gem 'rails-assets-BOWER_PACKAGE_NAME'
#app/assets/javascripts/application.js
//= require BOWER_PACKAGE_NAME
When running bundle update, this will then give you the ability to update your assets in line with your app!
TL;DR: IItemTransform isn't getting executed when a minified file already exists in the same folder as the original (non-minified) file.
Problem explanation
I'm having this issue mainly because of CSS relative image references. If you used IItemTransform with Javascript files, the same applies.
This is what I'm using:
I'm using Visual Studio with Web Essentials addin to have support for LESS files
I'm writing LESS files and have Web Essentials addin automatically minify files on save
I'm also using bundling and minification in my project
When creating CSS bundles I'm using CssRewriteUrlTransform to make CSS URLs absolute (i.e. background images) so that images still work after bundling several CSS files together
Nothing unusual here so far, but it doesn't work.
What seems to be the problem?
The way that bundling and minification works is it tries to avoid excessive processing. This means that when a minified file exists in the same folder as the original one it won't run its own minification and rather serve existing file.
This would be all right as long as it would at least run transforms over those preexisting minified files. But it doesn't. So I end up with relative URLs in a bundle which breaks pretty much all those resources.
Workarounds
Always provide absolute paths in LESS files
Disable file minification on save in Web Essentials settings
Refer to minified files when defining my bundles because they don't have a minified version (*.min.css doens't have a *.min.min.css) so minifier actually picks up the file and minifies while also running transformations over it.
From the standpoint of my development process and tools used (and configured the way they are) this looks like a bug. If those files would be the result of the same minification process this wouldn't be a bug at all as transformations would be executed when minification would execute. It's true that such functionality doesn't exist and likely never will as app would need write permissions to make it work. Outcome: this is a bug. Existing minified files should be processed through transformations before being cached.
Question
Is it possible to somehow convince bundling and minification to either:
not use existing minified file versions
run transformations over existing minified versions
Have you considered using Grunt? http://gruntjs.com/
It has a learning curve, but, the information pool is huge. The issues that you are having with web essentials wouldn't be a problem with grunt.
I'm using it in VS, now, to minify, bundle and transpile both css and javascript as well as reorganize files into a deployment directory. Once you've set up a directory structure, a grunt file could very easily be reused.
With the add-on in VS (linked, below), you can right click on the grunt file and select the grunt tasks to run from a popup menu.
https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
Grunt "tasks" as they are called can be created by downloading various plugins i.e. https://www.npmjs.com/package/grunt-contrib-less.
I have never used LESS or web essentials, so please take this post for what it is worth (not much.) Could you add a pre-build command to simply delete the old files, then do a rebuild when you need to update the CSS.
I'm currently using the built-in BundleConfigs which work great locally and deployed, but I'd like to move all my static assets to a CDN. I know the bundle syntax allows you to specify a CDN path which will work, but does anyone have a good solution to keep the BundleConfigs in sync with your deployment scripts -- which will ultimately handle the concat/minify/copy of your statics to the CDN?
I'm currently looking into Grunt to concat/minify my styles/scrips, but this will cause me to have to manage all my bundles in my solution's BundleConfig.cs, and then again in my Gruntfile.js. Not ideal...
Thoughts or suggestions? Thanks!
If you're going to use Grunt for bundling and minification, then I don't think you need to use ASP.NET Web Optimization framework. Why to use both? Just insert links to your bundled app.css and app.js files on your page and you're all set. You can also use #if ... statements to include different versions of your files (development vs production).
Also, take a look at Gulp.js - a newer alternative to Grunt, and this project template, which already has some basic Gulp.js configuration in place: ASP.NET Solution Template
A couple of Gulp.js plugins which can help with a CDN:
gulp-s3 - Uploads your static files to Amazon S3 during a build
gulp-google-cdn - Replaces references to 3rd party libraries with Gogole CDN links
After Gulp.js is configured via gulpfile.js file, you can run:
gulp build --production
..in order to build your HTML/LESS/JS files and publish them to Amazon S3 or some other CDN.
I'm considering using LESS for CSS development with server (or development) side processing, but I can't decide if I should keep the generated CSS files in version control. There are plenty of solutions with hooks, but this adds software dependencies to the server. A hook could just be added locally so staging and production areas on the web would get the same files. So, the question is:
Should generated CSS files be included in version control or not? Please keep in mind that some frameworks require a CSS file to exist for a particular reason (i.e. WordPress themes require a style.css file in order to be recognized).
When I say 'considering using LESS', I mean it becomes a requirement. New developers would not have the option use vanilla CSS after the choice is in favor of LESS.
Checking in derived artifacts is almost always sub-optimal.
I vote no to checking in the .css. It's only a matter of time until one of your peers or successors checks in an edit to the .css and not the .less. Then when you change the .less the prior change is lost.
You've pretty much answered your own question. It depends on how you deploy your website.
If the server is just going to pull directly from the Git repository:
1) It needs to have software installed to generate CSS from LESS.
2) or you need to include the CSS files in the repository.
If you're not pulling straight from the repository on your web server, you could have a build script that pulls from git, generates CSS, and then transfers the content to the web server(s), possibly excluding unnecessary files from the transfer.
In my opinion, Git should be used to keep all of the source for a project, and none of the "derived artifacts" (as mentioned by #thekbb). Developers need to have all tools installed to generate those derived artifacts during development and test. For deployment to test and production servers, an automated build server should take the source and create just the files needed for distribution.
In the case of software development, you'd have a Makefile with .C and .H files (for example) in your Git repository. Developers and the build server have a compiler installed that will create an executable or compiled library. When the files are packaged for distribution, the source code is not a part of the archive.
For web development, you have source files like original graphics, HTML templates and LESS files. Developers and the build server can run scripts to generate the site assets (CSS from LESS files, static HTML pages from templates, flattened images in multiple sizes/formats, etc.) When the build server deploys new builds, it copies just the files needed by the server, excluding the source graphics, templates and LESS files.
If there are people that need to review the site content, they should do it on a staging server. If that's not possible, the automated build server can create a ZIP file on an internal server that they can download for review.
Should generated CSS files be included in version control or not?
In theory they should not, but for practicality, I do usually checks in the generated css file. The reason is that it simplifies deployment since I do deployment using git; I would not need to have a less compiler installed on the server and usually not even on the machine I'm deploying from (as opposed to the machine where I'm developing on). Doing this could be useful if you have separate developer and deployer, but can sometimes also be useful even if you're deploying yourself.
Now, there are drawbacks on doing this:
You can't use git add --patch (or you really need to be very careful when doing so)
You should not modify the .css directly; instead I usually use a secondary .css file to do minor modifications without modifying the primary .less or .css file. You can also compile .less file straight into a minified css, to make it less tempting to modify the generated css.
Developers have to set up their machine to use automatic recompile tool (like SimpLess or Less.app), so the .css file is updated as soon as they save to the .less file. Without automation, you'll run into risk of the css not matching the checked-in less file.
I would not do the same when compiling from .C and .H files though, because the generated binary for those are platform specific, and also .less/.css file is usually a very small part of a larger web project so the space overhead of the additional file is small.
Good question. If you can absolutely guarantee that the CSS file gets updated when the LESS gets updated then perhaps yes - as per #Scott Simpson's comment. I suspect that this would be difficult to guarantee and what happens when the new developer get's a copy of CSS the day when they are out of sync? Also, of course, and I hadn't originally thought of this, what happens if the new developer then makes updates to the CSS file rather than the LESS?? If the CSS has to be built and isn't part of archive I can see less problems.
I would say yes -- because what happens if you want to add a developer to your workflow and they don't want or need to build .Less? It would be helpful for them to have access to only the generated file.