I just started to learn how to build a webpage with the Symfony2 framework.
I'm used to use Grunt tasks provided by the Yeoman generator, to handle caching, minifying, concatenating etc.
Now I know, that Symfony has his own solutions too, namely: the asset() helper, and Assetic.
From what I know, the yeoman tasks and the Symfony methods seems to be incompatible.
With the symfony {{ asset('asset-src-path') }} syntax, the yeoman tasks just won't work.
Should I just throw out the whole yeoman thing, and use the Symfony helper functions and filters?
I would prefer yeoman, I'm used to it and I like preprocessing the assets for the prod. site.
Note: I have to use the assetic() helper so I can work with url rewriting.
As far as I can tell, there's no easy way to achieve what I wanted.
Luckily, there's no real reason to wrestle with this problem, since - as I mentioned in my question - Symfony has Assetic, which is a great solution.
Note that I did try out a yeoman+symfony solution in a project, which ultimately worked, but I think it really doesn't worth the effort.
Cheers
Yeoman doesn't do any of the stuff you mention, it's simply a configurable generator. All yeoman does is prompt the developer with a few options and then it just downloads, tweaks than dumps a whole bunch of files to a folder. It's run one time — it's just for scaffolding other tools.
Grunt is a task runner built in Node.js. It's somewhat like yeoman in that it automates repetition but it takes over where yeoman leaves off. Whereas yeoman is run at the start of the project and never run again (generally), grunt is run continuously while you develop. The big difference here is that yeoman's generators and grunts tasks barely touch each other — yeoman isn't built for grunt and vice versa. A yeoman generator may create a nicely configured Gruntfile.js, for instance, but it's up to the developer to augment this Gruntfile.js to suit new needs.
Symfony2 is a web framework written in PHP. You can use yeoman to scaffold a Symofny2 app, and Grunt to do certain tasks (although Symfony2 ships with it's own task-runner, Grunt is excellent at front-end still). Symfony2 is a very rich, dynamic constellation of modules that is geared at dealing with HTTP requests and responses (among other things). You can write a yeoman generator that wires Grunt into Symfony2, or you can use Symfony2's console component to run your tasks.
All three are flexible but they are not interchangeable: they are all concerned with different things.
This applies to your linked question: Yeoman vs UrlRouting
Related
I need to test that all CSS/SCSS files in a project have been successfully minified in the build process of a .Net MVC App, or at least test that they are valid CSS.
Currently, the project is built in VSO/VSTS, and syntax errors in the CSS will not fail the build, and the app is deployed with broken CSS.
I know very little about .Net apps, I know that the main project is ProjectName.Web, the tests are ProjectName.Web.Test, and if I want to test something, I create a corresponding "-Test" class in the ".Test" project, but where would I put a test for minification of files? The files are bundled in ProjectName.Web/App_Data/BundleConfig, and use BundleTransformer to minify the files, how do I check it worked correctly after build?
Any pointers are welcome!
Here is a link to de-minify css. I would recommend you de-minify it, identify the problems, then minify it again. Usually they are small things. If you can post the deminified code then I would be happy to help.
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'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.
I have a project which completely build with Backbone and reruiejs. For production build we are heavily dependent on grunt.
For JS modules, i have using grunt requirejs.
After evaluating Webpack module loader, i thought of trying it out in my project but not sure to what extent i should use it and how to implement the same.
Any reference point or example project ?
Here is a short, but very informative tutorial by Pete Hunt:
https://github.com/petehunt/webpack-howto
It goes through building a simple build script. After you get the hang of it, you'll be able to make your own scripts in no time.
If you use Webpack, it makes using Grunt & RequireJS redundant & unnecessary because Webpack can do all that for you. Plus, it will be tedious to maintain multiple build scripts in all these tools.
In Yeoman,
I want to work on "file1.html", "file2.html" and have them generated as "file1/index.html" and "file2/index.html". How do I do this?
EDIT:
I think I finally understood the various tools and where Yeoman stood. I was expecting something which Yeoman was not supposed to do. Yeoman is a good tool to scaffold your project. For instance, I really like how I can use a Yeoman Generator such as generator-jekyllrb to scaffold your yeoman powered project in Jekyll.
There are lots of other generators. Check them out. Life of a Web Designer is way easier these days.