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.
Related
I'm dealing with an ASP.net project that's maintained by a couple of people via git.
We're looking to minify the CSS files at build time and have checked out the bundle and minify addon however this doesn't appear to offer an option for the minified code to be regenerated from the source files at each build.
Is there a better way for us to minify our source css files on each build?
Understanding your question right, you want to concat and minify your css sources and time you build or deploy.
I do not now how your build stack look like, so I can guess only, but using css files I would use something like grunt or gulp.
On my self I prefer gulp. It is easy to create a task which concat, minify or also auto prefix your css files.
Once your task is created you can add it to your build script, task or bash.
This way works also fine with CI like wercker or travis.
You can use Microsoft Ajax Minifier after build.
Explained here: https://www.codeproject.com/Articles/182690/Minify-Javascript-and-CSS-using-Microsoft-Ajax-Min
Or if you have integration with Jenkins then after build step you can call bat file and run minification on folder of your build directory.
For multiple technology projects, You can create exe based on Microsoft Ajax Minifier and after all builds are done, Run this exe using bat command from Jenking only to minify all the css and js files.
I have integrated this with PHP, ASP.Net and Silverlight code after build of these projects.
One better way is to make your file to online file (like CDN link github can help you in that) and next rather then adding all those css add that link which will be saving much of the build time.
Try to minify your file.
Try to make an online link file.
I'm not sure on how to serve static assets with Node.
I have Bourbon-Neat installed as a dependancy via npm install -g neat.
The neat forder is located in my project folder.
#import "neat"; leads to 404 error on serverip:8000/neat
Giving an absolute path neat/_neat.js does not help as well.
I can spin up Nginx and serve neat folder via it, but I thought the idea of npm install'ing would be to make those files available natively by Node.
You can serve static assets with Node. The easiest way is to write a Node program that uses the Express.js framework. Using Express.js you can configure that a directory is to be served as static assets.
app.use('/static', express.static('./your/directory'));
For the rest, I think a good investment would be to research how the build process works for generating css files using preprocessors in development time such as SASS and how that differs from actually serving them in production.
Ok I'm new to Polymer, after seeing the main page and Google IO 2016 video, I wanted to try it out, and right now I created a basic web application with it.
I managed to get it build and running it through the "polymer serve" command, but now that I want to release it to a production environment (I have an nginx cluster), how do I build the application to just a bunch of static website files?
I executed "polymer build" and I see the build folder and it contains 2 folders: bundled and unbundled, and inside them there are the bower_components, src and test folders as well as other stuff for running it through "polymer serve" but there's not a build/dist of build/static folder that I can copy into nginx so the application is served through it.
BTW, what I mean about a dist folder is without a readme, bower.json, test, bower_components, etc. just the pure needed HTML, CSS, JS, etc files that need to be served through nginx (or any other web server) as static file web content.
I went through the documentation but there's no details on how to do such task.
Any suggestions on how to build a static content folder for serving my polymer web app through nginx?
Thanks!
As of Polymer-CLI v0.11.0, there's no built-in way to filter out files from the bundle, but it's a requested feature. Also, the build output currently includes extraneous files (a bug), such as the test directory.
As an alternative, you could use Polymer Starter Kit 1.3.0, whose dist folder doesn't include the extra files (although it does include required bower_components as-is).
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.
So I'm playing around with MVC6, and I've added bower.json & grunt.json, I've created my grunt tasks for generating my jQuery & bootstrap.css and its all sitting in the wwwroot folder as i expected.
But what about things like my site.css & my main.js files, the files that I will add to for the project over time.
What convention are people using when choosing a directory for this stuff?
Are we to add a Content folder and drop it in?
Is there something I'm missing, that i should also be using Grunt / bower for?
I do have app and vendor folders outside wwwroot.
In vendor, I customize libraries like bootstrap, themes.
In app I have my own css, less and js files for the application.
I also have an asset path inside app for anything that needs to be copied (folder font shown in the screenshot)
Then I use the opinionated really easy to use and way better than grunt or gulp tool: brunch.
With this simple config, I get sourcemaps, concat, jshint, and with --production also uglify, minify, csso.
Adding anything else to the pipeline is simple as installing a brunch-plugin, so I recommend to also check http://brunch.io/ out.
Any static files (.css, .js) should be added directly into the wwwroot path (e.g. wwwroot/scripts, wwwroot/css). Anything that will be compiled into static files (.ts, .less) should be put into an Assets directory (or whatever name you like) in your project and output into the wwwroot path during compilation (generally configured through grunt compilation tasks).