Remove Bower and use npm for all dependencies

Bower will soon go away as can seen by the shift that's happening inside npm. Bower's current development is nearly non-exisiting. npm will soon be the leading Front-End package management system. Apart from that we currently use two package managers which is overhead. Reference #123.
use-init · Nov 21, 2014 · 533579a · 533579a
1 parent 920f052
commit 533579a
Show file tree

Hide file tree

Showing 16 changed files with 46 additions and 54 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,7 +5,6 @@
 *.sublime-*
 
 dist
-bower_components
 node_modules
 test/coverage
 test/dist
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### HEAD
 
+* Remove Bower and use npm for all dependencies
 * Remove Sass and replace with Pleeease
 * Update karma tasks to better reflect actual propose
 * Copy files that are needed in dest via grunt copy

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -71,7 +71,7 @@ module.exports = function (grunt) {
    */
   grunt.registerTask('build', [
     'jshint',
-    'modernizr',
+    'modernizr:build',
     'pleeease:build',
     'imagemin',
     'copy',

diff --git a/README.md b/README.md
@@ -17,27 +17,23 @@ You will need to install Node.js, if you haven't already.
 
 After you've set this stuff up please run
 
-	$ npm install -g grunt-cli bower
+	$ npm install -g grunt-cli
 
-This installs the Grunt command line tools and bower.
+This installs the Grunt command line tools.
 Afterwards please run
 
 	$ npm install
 
 in your project's directory.
 This will install all the things you need for running the grunt-tasks
-automatically and all Bower components defined in `bower.json`.
-
-Also it will create a folder `components` which holds all vendor dependencies
-managed by Bower.
-
+automatically.
 
 ### Troubleshooting
 
 If running the install does not work, please try running it as with
 admin-rights:
 
-	$ sudo npm install -g grunt-cli bower i
+	$ sudo npm install -g grunt-cli i
 
 
 ## Browser support

diff --git a/bower.json b/bower.json
diff --git a/docs/TOC.md b/docs/TOC.md
@@ -7,7 +7,7 @@
 
 ## Contents of INIT
 
-* [Toolchain](toolchain.md) — The tools we use: GruntJS, Bower, RequireJS.
+* [Toolchain](toolchain.md) — The tools we use: GruntJS, RequireJS and more.
 * [HTML5 Boilerplate](html5-boilerplate.md) — More about the famous front-end template.
 * [CSS](css.md) — How to use CSS in INIT.
 * [JavaScript](js.md) — A guide to the default JavaScript with RequireJS.

diff --git a/docs/extend.md b/docs/extend.md
@@ -5,7 +5,7 @@
 ## General
 
 INIT is built modular so you can extend the project with your own code or plugins.
-As we are using NPM, GruntJS and bower it is straight forward to extend the project with existing components.
+As we are using npm and GruntJS it is straight forward to extend the project with existing components.
 
 ## Examples
 

diff --git a/docs/toolchain.md b/docs/toolchain.md
@@ -4,14 +4,14 @@
 
 We use a couple of tools that help us write better code:
 
-* Bower
+* npm
 * Grunt
 * RequireJS
 * Karma (with Jasmine)
 
-## Bower
-[Bower](http://bower.io/) is a package management utility for the front-end. We use it to load all front-end dependencies for our projects.
-You can easily install more components. Please refer to Bower's docs for more information.
+## npm
+[npm](https://www.npmjs.org/) is a package management utility provided by bower. We use it to load all front-end and development dependencies for our projects.
+You can easily install more components. Please refer to npm's docs for more information.
 
 ## Grunt
 [Grunt](http://gruntjs.com/) is a build tool. We use a couple of tasks to help us build a production-ready version of our code. Please read more about our usage of Grunt [in the according doc](grunt.md).
@@ -20,4 +20,4 @@ You can easily install more components. Please refer to Bower's docs for more in
 [RequireJS](http://requirejs.org/) is a JavaScript module loader that helps your organize your dependency-management within JavaScript.
 
 ## Karma
-[Karma](http://karma-runner.github.io/) is a testrunner, running JavaScript unit tests in different browsers. INIT makes use of Karma with [Jasmine](http://jasmine.github.io/) as testing library.
+[Karma](http://karma-runner.github.io/) is a testrunner, running JavaScript unit tests in different browsers. INIT makes use of Karma with [Jasmine](http://jasmine.github.io/) as testing library. Please also see [_How to write tests_](writing-tests.md) for more information.
diff --git a/docs/usage.md b/docs/usage.md
@@ -29,15 +29,11 @@ Apart from that we make use of GruntJS and you might want to install it globally
 
 	$ npm i -g grunt-cli
 
-Same goes for Bower:
-
-	$ npm i -g bower
-
 Now we need to install the GruntJS modules we want to use within the project and the components that are predefined:
 
 	$ npm i
 
-It will create a directory called `node_modules` with the dependencies for our Grunt tasks and another folder called `components` which holds all vendor dependencies managed by Bower.
+It will create a directory called `node_modules` with the dependencies for our Grunt tasks and Front-End components.
 
 ### Troubleshooting
 
@@ -46,7 +42,3 @@ If running the install does not work, please try running it as admin:
 	$ sudo npm install -g grunt-cli
 
 You'll need to enter your admin password.
-
-If Bower does not install, please first report this to us and then install it manually:
-
-	$ bower i
diff --git a/grunt/config.js b/grunt/config.js
@@ -14,7 +14,8 @@ module.exports = {
   srcDir: 'src/',
   destDir: 'dist/',
 
-  requirejs: '../../bower_components/requirejs/require',
+
+  requirejs: '../../node_modules/requirejs/require',
 
   // All files that should be checked with JSHint
   jsHintFiles: [
@@ -30,7 +31,12 @@ module.exports = {
       'src/js/**/*.js'
     ],
     config: 'src/js/config.js',
-    dest: 'dist/<%= pkg.version %>/main.min.js'
+    dest: 'dist/<%= pkg.version %>/main.min.js',
+    libs: [
+      'node_modules/grunt-modernizr/lib/modernizr-dev.js',
+      'node_modules/jquery/dist/jquery.min.js',
+      'node_modules/requirejs/require.js'
+    ]
   },
 
   // CSS files
@@ -45,7 +51,8 @@ module.exports = {
 
   // Modernizr files
   modernizr: {
-    src: 'bower_components/modernizr/modernizr.js',
+    dev: 'node_modules/grunt-modernizr/lib/modernizr-dev.js',
+    devDest: 'dist/js/modernizr.js',
     dest: 'dist/<%= pkg.version %>/modernizr.min.js'
   },
 
@@ -75,8 +82,8 @@ module.exports = {
       src: 'temp/**/*.html',
       dest: 'src/',
       maincss: 'css/main.css',
-      modernizr: '../bower_components/modernizr/modernizr.js',
-      mainjs: '<script data-main="js/config" src="../bower_components/requirejs/require.js"></script>'
+      modernizr: '../node_modules/modernizr/modernizr.js',
+      mainjs: '<script data-main="js/config" src="../node_modules/requirejs/require.js"></script>'
     }
   }
 };
diff --git a/grunt/karma.conf.js b/grunt/karma.conf.js
@@ -11,23 +11,31 @@ var projectConfig = require('./config');
  * @return {Array} Array of all files to include
  */
 var getIncludeFiles = function () {
-  var files = [{
-    pattern: 'bower_components/**/*.js',
-    included: false
-  }];
+  var files = [];
+
+  // Add JavaScript libs
+  projectConfig.js.libs.forEach(function (element) {
+    files.push({
+      pattern: element,
+      included: false
+    });
+  });
 
+  // Add own JS files
   projectConfig.js.files.forEach(function (element) {
     files.push({
       pattern: element,
       included: false
     });
   });
 
+  // Add tests
   files.push({
     pattern: projectConfig.tests.src,
     included: false
   });
 
+  // And test config
   files.push(projectConfig.tests.config);
 
   return files;

diff --git a/grunt/options/modernizr.js b/grunt/options/modernizr.js
@@ -7,7 +7,7 @@ var config = require('../config');
 
 module.exports = {
   build: {
-    devFile: config.modernizr.src,
+    devFile: config.modernizr.dev,
     outputFile: config.modernizr.dest,
 
     extra: {

diff --git a/package.json b/package.json
@@ -12,17 +12,15 @@
     "url": "https://github.com/use-init/init/issues"
   },
   "license": "MIT",
-  "scripts": {
-    "postinstall": "bower install"
-  },
   "engines": {
     "node": ">=0.10"
   },
   "dependencies": {
-    "normalize.css": "3.0.2"
+    "jquery": "1.11.1",
+    "normalize.css": "3.0.2",
+    "requirejs": "2.1.15"
   },
   "devDependencies": {
-    "bower": "1.3.12",
     "glob": "4.0.6",
     "grunt": "0.4.5",
     "grunt-contrib-clean": "0.6.0",

diff --git a/src/index.html b/src/index.html
@@ -12,7 +12,7 @@
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 
     <link rel="stylesheet" href="css/main.css">
-    <script src="../bower_components/modernizr/modernizr.js"></script>
+    <script src="../node_modules/modernizr/modernizr.js"></script>
   </head>
   <body>
     <!--[if lte IE 7]>
@@ -44,7 +44,7 @@ <h1 role="banner">INIT</h1>
     </footer>
 
     <!-- Load scripts -->
-    <script data-main="js/config" src="../bower_components/requirejs/require.js"></script>
+    <script data-main="js/config" src="../node_modules/requirejs/require.js"></script>
 
     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
     <script>

diff --git a/src/js/config.js b/src/js/config.js
@@ -7,7 +7,7 @@ require.config({
   deps: ['plugins/console', 'main'],
 
   paths: {
-    jquery: '../../bower_components/jquery/dist/jquery.min'
+    jquery: '../../node_modules/jquery/dist/jquery.min'
     // More additional paths here
   },
 

diff --git a/test/test-main.js b/test/test-main.js
@@ -15,7 +15,7 @@
     baseUrl: 'http://localhost:9876/base/src/js',
 
     deps: [
-      '../../bower_components/modernizr/modernizr',
+      '../../node_modules/grunt-modernizr/lib/modernizr-dev',
       'config'
     ]
   });