Merge pull request #236 from silvenon/bower

Remove ../'s from bower_components paths
yeoman · Dec 19, 2014 · c32e765 · c32e765
2 parents bb6070f + 64cf7be
commit c32e765
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -35,7 +35,8 @@ To install dependencies, run `bower install --save package-name` to get the file
 
 ## Docs
 
-We have [recipes](docs/recipes/README.md) for integrating other popular technologies like CoffeeScript.
+* [recipes](docs/recipes/README.md) for integrating other popular technologies like CoffeeScript
+* [details](docs/bower.md) about our Bower setup
 
 
 ## Options

diff --git a/app/index.js b/app/index.js
@@ -146,7 +146,7 @@ module.exports = yeoman.generators.Base.extend({
 
       // wire Bootstrap plugins
       if (this.includeBootstrap) {
-        var bs = '../bower_components/';
+        var bs = 'bower_components/';
 
         if (this.includeSass) {
           bs += 'bootstrap-sass-official/assets/javascripts/bootstrap/';
@@ -217,6 +217,7 @@ module.exports = yeoman.generators.Base.extend({
         bowerJson: bowerJson,
         directory: 'bower_components',
         exclude: ['bootstrap-sass', 'bootstrap.js'],
+        ignorePath: /^(\.\.\/)+/,
         src: 'app/index.html'
       });
 
@@ -225,6 +226,7 @@ module.exports = yeoman.generators.Base.extend({
         wiredep({
           bowerJson: bowerJson,
           directory: 'bower_components',
+          ignorePath: /^(\.\.\/)+/,
           src: 'app/styles/*.scss'
         });
       }

diff --git a/app/templates/gulpfile.js b/app/templates/gulpfile.js
@@ -8,7 +8,8 @@ gulp.task('styles', function () {<% if (includeSass) { %>
   return gulp.src('app/styles/main.scss')
     .pipe($.rubySass({
       style: 'expanded',
-      precision: 10
+      precision: 10,
+      loadPath: ['.']
     }))
     .on('error', function (err) { console.log(err.message); })<% } else { %>
   return gulp.src('app/styles/main.css')<% } %>
@@ -26,7 +27,7 @@ gulp.task('jshint', function () {
 });
 
 gulp.task('html', ['styles'], function () {
-  var assets = $.useref.assets({searchPath: '{.tmp,app}'});
+  var assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
 
   return gulp.src('app/*.html')
     .pipe(assets)
@@ -74,8 +75,6 @@ gulp.task('connect', ['styles', 'fonts'], function () {
     .use(require('connect-livereload')({port: 35729}))
     .use(serveStatic('.tmp'))
     .use(serveStatic('app'))
-    // paths to bower_components should be relative to the current file
-    // e.g. in app/index.html you should use ../bower_components
     .use('/bower_components', serveStatic('bower_components'))
     .use(serveIndex('app'));
 
@@ -95,11 +94,16 @@ gulp.task('wiredep', function () {
   var wiredep = require('wiredep').stream;
 <% if (includeSass) { %>
   gulp.src('app/styles/*.scss')
-    .pipe(wiredep())
+    .pipe(wiredep({
+      ignorePath: /^(\.\.\/)+/
+    }))
     .pipe(gulp.dest('app/styles'));
 <% } %>
   gulp.src('app/*.html')
-    .pipe(wiredep(<% if (includeSass && includeBootstrap) { %>{exclude: ['bootstrap-sass-official']}<% } %>))
+    .pipe(wiredep({<% if (includeSass && includeBootstrap) { %>
+      exclude: ['bootstrap-sass-official'],<% } %>
+      ignorePath: /^(\.\.\/)*\.\./
+    }))
     .pipe(gulp.dest('app'));
 });
 

diff --git a/app/templates/index.html b/app/templates/index.html
@@ -17,7 +17,7 @@
     <!-- endbuild -->
     <% if (includeModernizr) { %>
     <!-- build:js scripts/vendor/modernizr.js -->
-    <script src="../bower_components/modernizr/modernizr.js"></script>
+    <script src="bower_components/modernizr/modernizr.js"></script>
     <!-- endbuild --><% } %>
   </head>
   <body>

diff --git a/docs/bower.md b/docs/bower.md
@@ -0,0 +1,17 @@
+## Bower components
+
+We moved `bower_components` to the project root, read [this post](http://yeoman.io/blog/bower_components-in-project-root.html) if you're curious why. In order for that to work, we had to make some accommodations. If you're ever have struggles with it, this should clear things up.
+
+Basically:
+
+* paths in Sass `@import` directives should begin with `bower_components`
+* paths in HTML should begin with `/bower_components`
+
+Both paths will work regardless of the nesting level, e.g. they would work on a `about/contact/index.html` page too.
+
+Details:
+
+* we serve `bower_components` as if it is located in `app`
+* we add the project root to Sass load path in order for `@import "bower_components/..."` directives to work
+* we strip all the `../`s from the beginning of `bower_components` paths
+* we add the project root to [gulp-useref](https://github.com/jonkemp/gulp-useref)'s search path in order for the build step to work