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).
Related
Using Aurelia CLI with the built-in bundler and SystemJS ...
I have two SCSS files. One is for the loading indicator/page as Aurelia is bootstrapped and should be excluded from the bundle and available in my /dist folder as plain CSS (not bundled at all). I've accomplished the first part (excluding it from app-bundle), but how can I configure au build / aurelia.json to still process loading.scss and put the resulting CSS in /dist.
Edit: I can/will just update the appropriate gulp task myself, but was not sure if there was a better way.
I ended up altering the Gulp tasks to do what I needed to do. I verified on Aurelia's Gitter that this is the correct approach.
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 creating a theme and store from scratch, currently every single time I do a ant all in console every change I've done into the style.css of the theme is erased and goes back to standard CSS.
Any ideas how can I keep my CSS changes even if I do a ant all/ant clean all?
Thanks!
The yacceleratorstorefront extension template provides a process for building a responsive website front end that supports LESS.
Build process will generate a _ui folder that contains the appropriate JS and CSS styling. This process can be started either through Ant or Grunt.
Modify any required storefront files in the _ui-src folder and then generate the _ui folder using ant or grunt build is the recommended approach. Kindly make changes to js or less files which are available in _ui-src folder and build will generate the respective js or css changes in _ui folder.
Check this for more details.
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 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!