Bower and Grunt

Bower and Grunt An introduction

Dependency management tool specifically for web assets jQuery, AngularJS, and Bootstrap

<code>mkdir js</code> <code>mkdir ext/js</code>

          <head>
            <link rel="stylesheet" href="ext/css/bootstrap.min.css" />
            <script src="ext/js/jquery-1.10.01.min.js"></script>
            <script src="ext/js/angular-1.2.15.min.js"></script>
            <script src="ext/js/bootstrap.min.js"></script>
          </head>

yay new versions

Stop. bower install --save jquery bower install --save angular bower install --save bootstrap Command line time! http://cli.learncodethehardway.org/ <code>which node</code>

<code>npm install -g bower</code> cd ~/our/project/directory <code>bower init</code> <code>bower.json</code>

bower install --save jquery <code>--save</code> Save this package's info in bower.json bower_components/

          <head>
            <script src="bower_components/jquery/dist/jquery.min.js"></script>
          </head>

bower install --save angular bower install --save bootstrap

          <head>
            <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
            <script src="bower_components/jquery/dist/jquery.min.js"></script>
            <script src="bower_components/jquery/angular.min.js"></script>
            <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
          </head>

yay new versions bower update

          <head>
            <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
            <script src="bower_components/jquery/dist/jquery.min.js"></script>
            <script src="bower_components/jquery/angular.min.js"></script>
            <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
          </head>

Simple! Sass Bootstrap? bower install --save bootstrap-sass

          @import('bootstrap');

          h1 {
            .cats { color: green }
            .dogs { color: blue }
          }

          <head>
            <link rel="stylesheet" href="output-css/application.css" />
            <script src="bower_components/jquery/dist/jquery.min.js"></script>
            <script src="bower_components/jquery/angular.min.js"></script>
            <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
          </head>

How to make that CSS file easily? compass watch

JavaScript Task Runner for development & pre-production

make
rake
guard

Tasks are written in JavaScript Yeoman You're going to be looking at one eventually <code>Gruntfile</code>

          module.exports = function(grunt) {
            require('matchdep').filter('grunt-*').forEach(grunt.loadNpmTasks);

            grunt.initConfig({
              compass: {
                dist: {
                  options: {
                    config: 'config/compass.rb'
                  }
                }
              },
              watch: {
                compass: {
                  files: [ 'sass/*.scss' ],
                  tasks: [ 'compass' ]
                }
              }
            });

            grunt.registerTask('default', 'watch:compass')
          };

whoa man slow down there's a lot going on there Line by line "This is a Gruntfile"

          module.exports = function(grunt) {

"Load in tasks from any npm modules that start with grunt-"

          require('matchdep').filter('grunt-*').forEach(grunt.loadNpmTasks);

A little trick...

          grunt.loadNpmTasks('grunt-contrib-compass');
          grunt.loadNpmTasks('grunt-contrib-watch');

(that's what computers are for) Global npm installation npm install -g bower Project-specific npm installation npm install --save grunt

          npm install --save grunt-contrib-compass
          npm install --save grunt-contrib-watch

npm install --save matchdep

          require('matchdep').filter('grunt-*').forEach(grunt.loadNpmTasks);

(neat) "Configure the pre-designed tasks..."

          grunt.initConfig({

"...like Compass..."

          compass: {
            dist: {
              options: {
                config: 'config/compass.rb'
              }
            }
          },

<code>config/compass.rb</code>

          sass_dir = "sass"
          css_dir = "output-css"
          add_import_path "bower_components/bootstrap-sass/lib"

<code>grunt compass:dist</code> "...and watching file updates..."

          watch: {
            compass: {
              files: [ 'sass/*.scss' ],
              tasks: [ 'compass' ]
            }
          }

<code>grunt watch:compass</code> "Let's make that the default."

          grunt.registerTask('default', 'watch:compass')

<code>grunt</code>

          module.exports = function(grunt) {
            require('matchdep').filter('grunt-*').forEach(grunt.loadNpmTasks);

            grunt.initConfig({
              compass: {
                dist: {
                  options: {
                    config: 'config/compass.rb'
                  }
                }
              },
              watch: {
                compass: {
                  files: [ 'sass/*.scss' ],
                  tasks: [ 'compass' ]
                }
              }
            });

            grunt.registerTask('default', 'watch:compass')
          };

Can't cover all of Grunt tonight (just a taste) This presentation uses both Bower and Grunt! https://github.com/johnbintz/bower-and-grunt-presentation