gruntjs,angular-ui-bootstrap,bower , How to include only specific parts of UI Bootstrap using Grunt

How to include only specific parts of UI Bootstrap using Grunt


Tag: gruntjs,angular-ui-bootstrap,bower

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


Angular-ui bootstrap datepicker won't openup twice

I am using the angular-ui bootstrap datepicker component. on one view where I have two date fields, the datepicker opens up and after closed it opens up again when clicked fine. On another page, after once opened and closed, the datepicker does not open up anymore. Surely I'm missing something...

Electron default app doesn't change

I am trying to convert my Google Closure Library used web app to Electron. I've used grunt-electron to package the application but it seems it doesn't change the default app of the In there exist my application, but it doesn't load my app, but indeed loads default app....

grunt.file write/copy with permissions

Is there a way to specify the permissions of a file during a grunt.file.copy(...), except using the 'fs.chmod' after copy has finished? I will have to require the whole 'fs' module otherwise, just for changing the permissions. Will it be a lot of overhead?...

Asynchronous tasks in grunt.registerTask

I need to call two functions within grunt.registerTask, but the second function has to be called after the first function is done. So I was wondering if we can use callbacks or promises or other asynchronous mechanisms within grunt.registerTask. (More specifically, I need to launch karma in my first function...

Does an existing gruntfile need to be edited? What is the common workflow?

For an existing app, is there a proper protocol for specifying bower packages such that they're handled correctly when running "grunt build"? Does an existing gruntfile need to be edited? What is the common workflow?

Unknown provider: $modalInstanceProvider <- $modalInstance in Angularjs modal

I am using angular bootstrap ui modal which is working fine but when I try to close it using modalInstance it gives above error.Here is my code var app = angular.module('LoginModule', ['ui.bootstrap']); app.controller('LoginModal', ['$scope', '$modal', function ($scope, $modal) { $scope.animationsEnabled = true; $ = function (size) { var modalInstance =...

Grunt tasks stuck in endless loop

Working on putting together a base Gruntfile.js for some upcoming projects. Starting in on a new computer so everything has been a fresh build. Installed Node and NPM using Homebrew, and then installed Grunt globally, as well as in my local directory. Here is my package.json: { "name": "timespent-prototype", "version":...

How do I create a deploy git branch for my Yeoman project?

I created a new project using Yeoman. Using Grunt I've created the dist directory. My whole project is on Github,, and I've created a prod branch. My question is how do I get my prod branch to have only the contents of dist instead of having the dist directory...

Reload List after Closing Modal

I have a list of brands: <script type="text/ng-template" id="list.brands"> <table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-controller="BrandsCtrl"> <input type="text" ng-model="searchBox"> <thead> <tr> <th><tags:label text="brandid"/></th> <th><tags:label text="name"/></th> <th><tags:label text="isactive"/></th>...

Add locale moment to an AngularJS app

I'm trying to configure the locale language for an AngularJS app based on Yeoman. When I serve the dist package after building my app (grunt build), the script reference dissapears. Here's a list of my dependencies on the index.html file. <!-- build:js(.) scripts/vendor.js --> <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script...

UI.Bootstrap Angular Typeahead and Firebase Array

Alright, I've tried and tried and tried to get this one right, But haven't. I am trying to use Typeahead in the UI.Bootstrap for Angular JS with a Firebase Array as the data set. Problem is, I can't get any results to show up when I type in the text...

Handlebars does not output anything

At the start of the file I define Handlebars etc.: <!-- build:js(.) scripts/vendor.js --> <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="bower_components/handlebars/handlebars.js"></script> <!-- endbower --> <!-- endbuild --> At the end of the index.html-file I pull in my Handlebars-file: <!-- build:js({app,.tmp}) scripts/main.js --> <script...

Images doesn't display on AngularJS website after uploading them with filezilla

I created an AngularJS project. With doing the grunt serve, grunt serve:dist commands in my terminal, my images are loaded. I upload my page to a webserver with filezilla, but on the public webpage my images are not found. I discovered that the images in my dist folder 2 extensions...

Is there a way with Grunt to automatically link css files to HTML

I am just wondering if there is a way to automatically link css files to HTML. For example just give the files (dependencies) path and it will be automatically stylesheet link to the specific HTML file. Thank you...

Using npm to install grunt on nodeenv results in findup-sync error

After establishing a node virtualenv using nodeenv, I use source /bin/activate to switch into the correct directory, update npm, and execute npm install -g grunt or npm install -g grunt-cli and I recieve the same error: npm ERR! Linux 3.13.0-53-generic npm ERR! argv "node" "/home/{redacted-home-dir}/NodeProjects/vue/bin/npm" "install" "-g" "grunt-cli" npm ERR!...

How do I access a user input from grunt-prompt in other tasks

I need to write a grunt job for reading a user input using grunt-prompt and then create a directory with that name. I am trying to use the config to access variable in another grunt task which will be executed after the grunt-prompt. But all following methods gives an undefined....

Strange npm behavior when installing packages like grunt

I run the following command in my bash and I get the related results: [email protected]:~$ sudo npm install -g grunt-cli /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt [email protected] /usr/local/lib/node_modules/grunt-cli ├── [email protected] ├── [email protected] (ab[email protected]) └── [email protected] ([email protected], [email protected]) and [email protected]:~$ grunt /usr/bin/env: node: No such file or directory I also have try to install...

SailsJS: Requiring Assets, Such As,

As the problem is short & sweet, I'll keep the question so. CAN'T LOAD ASSETS. Using Sails.js (v0.11.n). Can't load assets... That's about it... I'm trying to load -- or now even just assets/alert.js. <script type="text/javascript" src="/js/dependencies/"></script> Doesn't work :( Even when I switch the src to /alert.js --...

Angular radio button doesn't pick an initial value

I have a radio button with two available values - male and female when the value of male is true and female is false. <div id="gender" class="btn-group"> <label class="btn btn-success" ng-model="userDetails.gender" btn-radio="true" uncheckable>Male</label> <label class="btn btn-success" ng-model="userDetails.gender" btn-radio="false" uncheckable>Female</label> </div> In the controller code, I get the existing value in...

Using ng-click to toggle between two functions

I am using the datepicker from bootstrap-UI for angular. I would like to toggle between two functions. now() and clear(). Is this possible inside Angular's ng-click? The toggle has the ng-click="today()" I would like to add clear() to it, thanks. Controller Code: $ = function() { $scope.dt = new...

Stop Angular UI bootstrap dropdown from closing in certain cases?

I have a dropdown which contains tabs and buttons. I want to be able to click the tabs without the dropdown closing but if I click a button it will close. I used $event.stopPropagation() to stop the closing but obviously this blocks the buttons closing it too. Is there a...

Writing multiple functions in AMD javascript module

I am quite new to writing javascript code using AMD. I am stuck at figuring out how to write multiple functions in a file: define(function(){ return { and: function(a,b){ return (a&&b); } }; } ); I tried writing another function plus in the following way: define(function(){ return { plus: function(a,b){...

How to use dynamic values in Grunt tasks called from inside a forEach?

We are trying to run grunt tasks using grunt.config.set for dynamically concatinated strings. These grunt.configs are set in a forEach loop and change each time before the task is run. This does unfortunately not work, as grunt only uses the last grunt.config.set and runs it multiple times with that very...

How do I compile mutliple HTML Jade templates that use the same mixin

mixin hero(title) .hero .hero__inner h1.hero__title #{title} So, my project uses a Jade mixin like the above on multiple pages and, when I compile the Jade to HTML pages, I have to copy that mixin on each page that it is used. I can compile the pages using either grunt-jade or...

Yeoman - Gruntfile.js generates source map at build but deletes it after any changes

I installed Yeoman with angular generator, and it created Gruntfile.js. The problem is that after launching the webserver in the terminal with: grunt serve Yeoman generates main.css with in the end the reference of the source map /*# */ But after changing any scss the watch routine regenerates it...

Grunt : Usemin prepare, options for cssmin

I'm using usemin in my Grunt file. I'd like to use purifycss. BUT, i get this error when running grunt : Warning: Please check the validity of the CSS block starting from the line #1 Use --force to continue. I think it's because Font Awesome is the first library in...

Any conflicts between UI-Bootstrap and Twitter Bootstrap?

Are there any conflicts between Angular UI-Bootstrap and Twitter Bootstrap? I am trying to avoid using jQuery-UI with AngularJS if a more Angular-friendly UI package is available. I already started with Twitter Bootstrap, so I do not wish to unload Twitter Bootstrap....

Use angular-ui timepicker as input form

I'm using angular-ui timepicker according to the example here. This is my HTML: <timepicker data-ng-model="hour" data-ng-change="changed()" data-hour-step="1" data-minute-step="5" data-show-meridian="ismeridian"></timepicker> In the js file, I'm trying to get the value with var start_hour = { hour:new Date($scope.hour).getHours(), min:new Date($scope.hour).getMinutes() }; But it's only works if I set a new date in...

Bootstrap collapse and ui-rooter

I have issue with ui-router and using bootstrap collapse. <div class="panel panel-default" id="accordion" > <div role="tab" id="headingOne"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Click me </a> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> Data </div> </div> This is page localhost/#/root/mypage/. So the 'Click me' is pointed to...

rethinkdb does not connect form grunt task

I created a grunt task to create tables in a rethinkDB database. the issue that i am facing is that the connection is never established and no tables are created however if i do the same while serving a regular API endpoint everything works as expected. below is an extract...

AngularJS date validation (formats)

I could use some help. I am having input field with type="text" and ng-required="true". I am using datepicker (Angular UI Bootstrap). If my input is empty, someForm.someInput.$error returns "required":true, which is okay. If my input is filled with "someText", someForm.someInput.$error returns "date":true, which is odd to me. How is this...

Datepicker in Angular ui modal not opening

I have a datepicker within a form in my modal. The datepicker is not opening no matter what I try. My code is : //In my parent controller - Called on button click $scope.openModal = function(indx){ var modalInstance = ${ animation:true, templateUrl:'myModal.html', controller: 'MyModalController' }); }; //In MyModalController $ =...

“Arguments to path.resolve must be strings” when calling 'gitbook build' from a Git hook

I am trying to run gitbook build within a post-receive Git hook on my (Gitlab, Debian 7, virtual private) server. Basically I want to: checkout the bare repository to a temporary dir run gitbook build in that temporary dir sync with the webspace through rsync The post-receive script runs something...

Retrieve the date portion of date object in milliseconds

How can I get the date portion of a Date object in milliseconds in javascript? I didn't find any method to this. I was trying: var today = new Date(); var datePortion = today.toDateString(); var inMiliseconds = new Date(datePortion).getMilliseconds(); console.log(inMiliseconds); The return is always 0. See jsFiddle. What can I...

When starting Nightwatch with Grunt, the website server is not started

I am using Nightwatch.js to run system tests for a website. I want to automate the tests by running them via grunt. My Gruntfile contains these lines: ... var nightwatch = require('nightwatch'); nightwatch.initGrunt(grunt); ... nightwatch: { options: { standalone: true, test_settings: { "default": { "launch_url": "http://localhost", "selenium_port": 4444, "selenium_host": "localhost",...

Is express similar to grunt? what is the difference? what are the advantages of express over grunt?

I've been working on node,grunt,bower and yeoman from couple of months. I came across MEAN stack applications, in which expressjs is providing the server environment(my understanding). Are both grunt and express similar? Requesting for some helpful link on express and MEAN stack. ...

Changing JS variable with Grunt for different environments

I'm trying to configure my JS build to do next: I'm using a JS variable to define the application root: globals.js define(function (require) { "use strict"; return { mainRoot: "" //mainRoot: "http://localhost:3000" - local run //mainRoot: "" - test server }; }); During local development I'm using code without Grunt...

Compiling SASS files using Grunt creates an unnecessary folder

So I have been trying to create my first compiled css files using grunt and sass, and i am having a problem that I cant figure it out. Every time that I run the sass task, an unnecessary "sass" folder is created inside of my css folder: This is how...

angularJS pass object attributes to modal

I want to pass a whole object to modal, so I can view all of its attributes there. Right now I have items that look like this: $scope.items = [{ Title: title, Id: id }] In my html page i am using a 'ng-repeat', something like this: <tr ng-repeat="item in...

Is grunt.file.write(…) synchronous or asynchronous?

I have a code in which i am running a grunt task asynchronously using var done = this.async(); Somewhere in the code I am writing to a file and then calling a callback as follows: grunt.fie.write(<necessary arguments>); callback(null); My question is, will there be a case in which the callback...

$http.get returns actual php script instead of running it (yeoman, grunt)

I'm building a "simple" AngularJS app with an articles newsfeed. My articles are stored in a mysql database, and I extract them using php PDO. I used to do this using AJAX with a simple LAMP configuration (php5, mysql, apache2), and everything worked as intended. Now I'm trying to rebuild...

JSLint error: “Expected a newline at EOF”, conflict with Beautify plugin

I have a problem while building the sources using Grunt, with JSLint task for error check: L177: Expected a newline at the end of the file. Warning: Formatting check failed. Use --force to continue. Aborted due to warnings. The problem is obvious, but I use also the Beautify plugin for...

grunt-http-server is stop running

I am trying to use the grunt-http-server I follow the example that is on the link 'http-server': { 'dev': { // the server root directory root: apps, // the server port // can also be written as a function, e.g. // port: function() { return 8282; } port: 8282,...

Combine js files from different directories via config using grunt

I'm using grunt and sass and I'm looking for a sass-like feature to import any JS file I like to and combine them to 1 file via some config depending on the directory I am in. Example directories: startpage file1.js file2.js importjs.json page1 file3.js file4.js importjs.json global global1.js global2.js Each...

extending angular-ui-bootstrap typeahead module

I'm using angular-ui-boostrap's typeahead component to let people choose a person's name, or add a new name if their selection isn't present. Right now I modified getMatchesAsync with my own code: if(scope.matches.length < 4 || scope.matches.length == undefined){ scope.matches.push({ id: getMatchId(matches.length), label: 'Add New +', model: 'new' }); } But...

Angular UI Bootstrap Timepicker - value assignment issue with 24hr times

The timepicker is not handling 24hr time assignment correctly. For e.g. <timepicker ng-model="$time" hour-step="1" minute-step="1" show-meridian="true"></timepicker> When I do: $scope.$time = "2012-04-23T18:25:43Z", the timepicker is updated to 06:25 AM. It should be 06:25 PM. Even if I set show-meridian="false", it's still showing 06:25....

How to run multiple application on Grunt

I have two applications say applicationA and applicationB and if I run following command on terminal grunt serve my one applicationA will up and work fine. when i need to run applicationB, first i need to stop applicationA and then i can run applicationB. If i try to run both...

How to make grunt run some tasks at a special point in time?

I am using Grunt to run Jasmine tests and Nightwatch.js tests. Is it possible to make Grunt run the tests at a special point in time? For example Grunt could run the tests always when saving changed code. Or Grunt could run the tests always at 1 am in the...

angularjs select the first value in select box

I need to highlight the first value 'fullName' in select box using angularjs. I am using angularstrap selectbox. controller, $scope.accountInfo.owners = [ { "accounts":null, "phoneumber":null, "email":null, "fullName":"MITA DASGUPTA", "mobilePhoneNumber":null, "noteFlag":false, "number":130000000484 } ] Template, <button type="button" class="btn btn-default" placeholder="Pleasae select" data-ng-model="owner.fullName" data-html="1" bs-options="owner as owner.fullName for owner in accountInfo.owners" bs-select>...

AngularJs - Adding Custom class on UI-Bootstrap's Tab

How can I replace or add a new class on UI-Bootsrap's Tab Nav. I'm expecting something like, <ul class="MY-CUSTOM-CLASS" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude=""> <li ng-class="{active: active, disabled: disabled}" heading="Justified" class="ng-isolate-scope"> <a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">Justified</a> </li> ..... </ul> I've tried the following but, it's adding the class to the...