gruntjs,zurb-foundation,gulp,bower , Benefits of Moving Bower Components before using?


Benefits of Moving Bower Components before using?

Question:

Tag: gruntjs,zurb-foundation,gulp,bower

When using Bower Components, I tend to link directly to the files located in the bower_components directory. For example when I work with Foundation, here is how I link my JavaScript file:

<script type='text/javascript' src='../bower_components/foundation/js/foundation.min.js'></script>

However, I've noticed a lot of people copy the Bower components to a library directory (using Gulp or Grunt) and then use the components from there. Is there a benefit to doing things that way?


Answer:

I believe developers choose to pipe their components through gulp or grunt to control the dependencies through source control and to have a safer way of using their dependencies in case one just stops working. This article might be able to help you understand.


Related:


grunt.file write/copy with permissions


gruntjs,grunt-contrib-copy,gruntfile
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?...

Handlebars does not output anything


javascript,gruntjs,handlebars.js,yeoman,bower
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...

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


javascript,node.js,selenium,gruntjs,nightwatch.js
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",...

Make columns always equal height? (Foundation 5)


zurb-foundation
How to create a layout as shown in the image? The first column left and the second column right should always be the same height, depending of the first column height, using Foundation 5. ...

Strange npm behavior when installing packages like grunt


node.js,gruntjs,npm,gulp,bower
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] ([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...

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


node.js,express,gruntjs,mean-stack
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. ...

Electron default app doesn't change


gruntjs,electron
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 Test.app. In Test.app/Contents/Contents/app/ there exist my application, but it doesn't load my app, but indeed loads default app....

Redirect to template not working after Foundation Framework installation


ruby-on-rails,zurb-foundation,partial
On my local host after having rails create a new object in the database (through a controller) I used to have my app render a template (if @object.save returns true). After installing zurb foundation the template doesn't show and neither does my flash message, the new object Investor is also...

Cannot immediately destroy modal elements created with Foundation for Apps


angularjs,zurb-foundation
I'm using the ModalFactory included with Foundation for Apps to programmatically create modals which works fine, but my use case requires me to force a redraw of the modal each time it's called. However, when trying to destroy modals, I have found that the source for ModalFactory.destroy includes a 3...

Grunt tasks stuck in endless loop


javascript,node.js,gruntjs,npm,grunt-contrib-concat
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":...

Grunt : Usemin prepare, options for cssmin


gruntjs,grunt-usemin,grunt-contrib-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...

Custom grid in foundation?


sass,zurb-foundation,zurb-foundation-5
I need a different sized grid within the standard grid layout. I'm using sass and have tried: .row-30{ @include grid-row($total-columns: 30); } Here's the HTML: <div class="row-30"> <div class="small-5 columns">a 5 col</div> <div class="small-1 columns end">a 1 col</div> </div> I'm having no luck though. Where am I going wrong with...

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


angularjs,image,website,gruntjs,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...

Foundation and Wordpress blank spaces


wordpress,zurb-foundation
Anyone has an idea about the blank spaces that I'm getting in a while loop with wordpress using foundation framework? <div class="large-8 columns"> <?php query_posts(array('category_name' => 'revista', 'paged' => get_query_var('paged'), 'posts_per_page' => 9 )); ?> <?php while ( have_posts() ) : the_post(); ?> <article class="boletin large-4 columns" style="min-height:1px;"> <a href="<?php...

Writing multiple functions in AMD javascript module


javascript,gruntjs,amd
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){...

jQuery onclick toggle function


jquery,html,zurb-foundation
I have the following Foundation toggle element: <div class="switch radius"> <input id="x" name="switch-x" type="radio" onclick="$(this).revealProfile('no');"checked> <label for="x">No</label> <input id="x1" name="switch-x" type="radio" onclick="$(this).revealProfile('yes');"> <label for="x1">Yes</label> <span></span> </div> When clicked I would like to change the input boolean value of my hidden field from true to false: <input id="real_property_sale_reveal_owner_profile"...

How can i avoid conflicts of two css frameworks?


css,kendo-ui,zurb-foundation
I am using Foundation CSS framework and Kendo UI grid in my project The Kendo UI grid sometimes overridden by foundation CSS thing. How can I avoid this conflicts?...

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


node.js,git,gruntjs,githooks,gitbook
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...

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


git,deployment,gruntjs,yeoman,branching-and-merging
I created a new project using Yeoman. Using Grunt I've created the dist directory. My whole project is on Github, https://github.com/d3a1i0/mykungfuisstrong.com, 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...

Change Foundation Options in Meteor Application


css,meteor,zurb-foundation
I need to change where the breakpoints are for screen widths in terms of showing and hiding elements if the user's screen is in a particular size. The project I'm working in is a Meteor project with the foundation CSS library. I'm used to doing everything with PHP/JS with the...

How to run multiple application on Grunt


angularjs,gruntjs,server
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...

CSS Foundation Use Different Column Count in Container


css,zurb-foundation
I'm using the ZURB Foundation package, which relies on the grid system of 12 total columns. I don't want to change the total column count for the entire project, but rather just for one element's contents. How can I change say a <row> to use an 8 column count as...

Zurb Foundation topbar dropdown disappears on small screens


css,responsive-design,zurb-foundation,navigationbar
This is troubling because the only reason I want a topbar is for smaller screens. The dropdown works fine in medium and large, but disappears on smaller screens. I've read it needs to be inside a 12-width column, but that doesn't seem to help. It actually introducted another (minor) problem...

Compiling SASS files using Grunt creates an unnecessary folder


javascript,css,sass,gruntjs
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...

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


javascript,gruntjs,jslint,beautify
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...

Button style in top bar in Foundation?


css,zurb-foundation,zurb-foundation-5
Is it possible in Zurb Foundation to have a normal button in the top bar menu items? Here is an example: The black button is what I'm trying to accomplish. Here is what the HTML currently looks like: <div class="contain-to-grid"> <nav class="top-bar" data-topbar="" role="navigation"> <ul class="title-area"> <li class="name"> <h1> <a...

Add locale moment to an AngularJS app


angularjs,gruntjs,momentjs
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...

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


html,node.js,gruntjs,jade
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...

How to position “:before” element used as icon in zurb foundation's Side nav?


html,css,zurb-foundation
I added a sub-menu to foundation's side nav exactly like in this example, but the icon is above the text. My CSS: .hasChildren:before{ content: "\25ba"; float: left } .hasChildren.active:before{ content: "\25bc"; } My HTML: <div class="large-4 medium-4 columns menu-wrapper"> <div class="panel"> <h4>Menu</h4> <ul class="side-nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li>...

How to center align Zurb Foundation block grid elements that are being pushed to the next row?


html,sass,zurb-foundation
I'm using the block grid from the Zurb Foundation framework but I'm having some issues getting it to align the way I want to. I have it set so that it displays 4 blocks per row. I have more than 4 blocks so the ones that don't fit are pushed...

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


angularjs,gruntjs,yeoman,bower
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?

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


php,angularjs,pdo,gruntjs
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...

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


node.js,gruntjs,npm
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!...

SailsJS: Requiring Assets, Such As, sails.io.js


javascript,node.js,socket.io,gruntjs,sails.js
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 sails.io.js -- or now even just assets/alert.js. <script type="text/javascript" src="/js/dependencies/sails.io.js"></script> Doesn't work :( Even when I switch the src to /alert.js --...

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


javascript,node.js,asynchronous,gruntjs
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...

Combine js files from different directories via config using grunt


javascript,gruntjs,npm,minify
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...

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


sass,gruntjs,yeoman,yeoman-generator,gruntfile
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 /*# sourceMappingURL=main.css.map */ But after changing any scss the watch routine regenerates it...

Asynchronous tasks in grunt.registerTask


gruntjs,karma-runner
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...

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


javascript,gruntjs,grunt-prompt
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....

rethinkdb does not connect form grunt task


node.js,gruntjs,rethinkdb
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...

Zurb Foundation Tooltip: bottom tooltip, but have pip on the right


tooltip,zurb-foundation,pip,right-align
I currently have a short link that I want a Foundation tooltip for, and the tooltip has to be beneath the link (tip-bottom). Normally, the Foundation tooltip has the pip on the left (and the tooltip expands to the right), but this won't work for me because my link is...

Single page app viewport mobile using Foundation


javascript,css,mobile,responsive-design,zurb-foundation
I am using Foundation for a responsive website and have a problem with SOME mobile devices not properly scaling the viewport ONLY when you load another page via our ng-include. This loads new content into the page and the width of the page then breaks and requires horizontal scrolling. This...

How can we display dynamic grid layout like the attached screenshot also order by number with the help of bootstrap


php,html,css,twitter-bootstrap,zurb-foundation
I want to make a layout like the attached image.Blocks will render on the page in the same order number. For example :- block(1) will show first after then block (2) and so on... ...

Can't get Zurb Foundation accordion to work


javascript,zurb-foundation,accordion
I'm using Zurb's Foundation, attempting to build a FAQ page using the accordion js. But it's not working and I have no idea why. All the js files are in the js folder. Here's my whole page: <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link...

Changing JS variable with Grunt for different environments


javascript,build,gruntjs,environment-variables
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: "http://myapp.com" //mainRoot: "http://localhost:3000" - local run //mainRoot: "http://myapp-test.com" - test server }; }); During local development I'm using code without Grunt...

Foundation Clearing Lightbox Caption Position


zurb-foundation
By default, the caption of the ZURB Foundation clearing lightbox is located below the image. Does anybody know how I can position it above the image?...

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


javascript,node.js,testing,gruntjs,automated-tests
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...

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


foreach,gruntjs,grunt-contrib-copy
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 specify a css margin-top for foundation row div?


css,zurb-foundation
How do I specify a css margin-top for foundation row div? Using the Chrome dev tools it looks like foundation.css is overriding any margin properties for .row divs - regardless of where I put the css. In the interest of getting something out the door today I have resorted to...

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


html,css,gruntjs
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...