Drupal has an option to "aggregate" (that is, to combine) multiple js or css files into one, to reduce the number of files going over the network.
Does Meteor have something similar?
Obviously for development it is nicer to have the files all separate. But on production it would be great to have them bundled (and minified).
Yes.
Meteor uses separate files on the development server and combines and minifies js and css files on the production server.
For an example view the source of http://meteor.com.
As a bonus, Meteor has Smart Packages that compile various preprocessors, including:
LESS
Stylus
CoffeeScript
By using the Smart Packages preprocessors, you are free to write the code or styles in your preferred language and Meteor will convert it to javascript or css, on demand.
Related
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'm currently working on a web-based project where we have a corporate branding style which overrides Bootstrap's default colours and styles via a .less file generating the .css for the stylesheet.
I've put a large amount of effort into making this .less file and would like to re-use it across projects but also allow it to be updateable in a single location rather than needing to copy the .less and generated .min.css and .css for each update.
I've tried linking each of the artifacts using "Add existing item" in VS2013 but the file is not available when the Web Application project is run.
Does anyone know how I would configure the project/file links in order to not have to copy the file between projects and update multiple files?
The easiest way to share variables, mixins, and other LESS elements, is to use #import. If the external shared elements are in an accesible path, you can directly specify the whole path in the #import clause.
However, sooner or later you'll use Grunt in your web pojects. It's a task runner, and the tasks are things like copying files, compiling less to css, minifying, and so on. This is widely use to manage the front end components of your application, specially css and js.
In your particular case, you could use grunt to copy the less file from the central location, and then run a less task to generate the final css, .min.css and, if you want it the corresponding .css.map, which is really useful to debug the styles from the browser's console.
If you want to use grunt for this case, basically you have to create two grunt tasks:
a copy task, to copy the file from the central location. This is optional but advisable if you #import your global colors .less file in each applciation's particular LESS file
a less task, that compiles the .less files into .css
The tasks definition is done in a simple json file, packages.json, and a js file, gruntfile.js. Althoug it can seem daunting, you can have it up an running in a few hours.
If you look for Grunt in Visual Studio Gallery you'll at least find "Grunt launcher" that allows to easyly run this tasks from within Visual Studio. In VS 2015 you can use Web Essentials (and it's probably a native functionality, but I'm not sure). There is also the "Task Runner Explorer" (see the last link below).
If you google "visual studio grunt", you'll find interesting info like this:
Using Grunt, Gulp and Bower in Visual Studio 2013 and 2015
Introducing Gulp, Grunt, Bower, and npm support for Visual Studio
Once you get used to it, you'll do a lot of things, like copying, compiling, transplining, concatenating, minifying, generating maps, etc. because this task runner has a lot of functionalities, and it's really easy to use.
NOTE: it's based on npm, which uses packages, in a similar fashion to Nuget, so you'll get the same advantages of using Nuget, but for front end artifacts. There are many packages available in npm which you will not find in Nuget
I'm currently planning a new Windows Store App and wondered whether it would be at all possible to use SASS to help streamline some of the CSS development by utilising features such as mixins and variables etc.
I'm currently using Web Essentials to compile the SASS for web projects and wondered whether I could leverage its abilities on the app side of things.
What I've tried:
On the off-chance that it might work... I've tried adding an SCSS file to the universal app using Add > New Item... but the option doesn't exist (which doesn't bode well). I tried renaming an existing CSS file's extension to .SCSS. However, when saving the SCSS file, VS2013 explodes in a cacophony of popups suggesting that I tell Microsoft about the problem and then restart - which isn't really the result I'm after.
I'm using the accordion, tooltips and transition components of UI Bootstrap.
I can create a custom build with the online tool on the UI Bootstrap website, which will create a minified and non-minified JS file containing only the components I selected, without overhead.
However, I don't want to use the online tool to compile my custom version of UI Bootstrap, instead I want to compile my own version locally, preferably using the tools I already use; Bower, Grunt and NPM.
So my question: How can I create my own version of UI Bootstrap locally?
bower install angular-ui-bootstrap, and then calling Grunt build in bower_components/angular-ui-bootstrap creates a UI Bootstrap build that includes all modules, there's probably a way to do the same with only a subset of the modules, but I could not figure this out.
It can be done by using the following command
grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN
For example if you require the build to contain only tabs and buttons module , then the grunt command will be like
grunt build:tabs:buttons
The generated files will be present in dist folder
For the list of module names , check all folder names in src folder
The documentation for this is sparse , but if you check the Gruntfile.js , where they register the build task , they mention about how to build modules selectively
It is not as easy as I expected (and as it should be).
Take a look at the Gruntfile.js of the project. You will see that they do quite a lot. Converting HTML and CSS to JS, concating all the scripts in such way they are loadable by others. Moreover the file is quite difficult for orientation; it even includes custom tasks.
To mimic its behaviour I suggest this: Download it via Bower as you normally do. Copy its node dependecies to your package.json dependencies. Then copy the Gruntfile.js, change he routes, and try deleting some parts of the code until you reach a point when you cannot remove more lines without breaking it. It is not a nice way, it should be however successful.
If one had a lot of time, the build script is a good candidate for a deep refactoring. Moving custom tasks to standalone files (or projects), documenting the flow, and maybe implementing standard tasks for some steps (e.g. CSS minification).
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.