Task Runners & Browserify: Project Setup || Working on Teams

0_taskrunners.md

INITIALLY

Directory Structure:

  |- dist/
  |- javascripts/
  |  - main.js
  |- lib/
  |- styles/
  | .gitignore
  | index.html
  | README.md

What Goes In .gitignore

• .DS_Store

---

LINTING YOUR JS

Install Dependencies

• cd lib
• npm init
• npm install grunt grunt-contrib-jshint matchdep grunt-contrib-watch jshint-stylish --save-dev

Directory Structure:

  |- dist/
  |- javascripts/
  |  - main.js
  |- lib/
  |  - node_modules/ (this was created when you installed your npm dependencies)
  |  - package.json (this was created when you ran npm init)
  |  - Gruntfile.js 
  |- styles/
  | .gitignore
  | index.html
  | README.md

What Goes In .gitignore

- .DS_Store
- lib/node_modules

What Are We Doing?

• New tab in your terminal, you are going to be running the Grunt tasks continuously while developing
• cd lib
• grunt
• If you have errors initially, you will need to resolve them first, then you will need to restart Grunt tasks by running grunt
• You will now need to preface all of your .js files with "use strict"; at the beginning of each file. Learn more about strict mode.

When We Are Working In Teams

We aren't pushing up all of our node_modules now so when our teammates checkout our branch and pull down our code to run it, they will need to install all of the dependencies that you listed.

Example from package.json:

  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-watch": "^1.0.0",
    "jshint-stylish": "^2.2.1",
    "matchdep": "^2.0.0"
  }

• Pull down another person's code
• cd lib
• npm install

Don't forget to update the 'How to run this code' section of your README.md

---

BROWSERIFY

Install Dependencies

• cd lib
• npm init
• npm install grunt grunt-contrib-jshint matchdep grunt-contrib-watch grunt-browserify jshint-stylish --save-dev

Directory Structure:

  |- dist/
  |  - app.js (this is created when you run grunt)
  |- javascripts/
  |  - example_module.js
  |  - example_module2.js
  |  - main.js
  |- lib/
  |  - node_modules/ (this was created when you installed your npm dependencies)
  |  - package.json (this was created when you ran npm init)
  |  - Gruntfile.js 
  |- styles/
  | .gitignore
  | index.html
  | README.md

What Goes In .gitignore When Working In Teams

- .DS_Store
- lib/node_modules
- dist/app.js

What Goes In .gitignore When Working Individually

- .DS_Store
- lib/node_modules

What Are We Doing?

• Creating modules that do one thing, and one thing only. This make a codebase easier to maintain, and allows for more flexibility when new features are added.
• Compiling all modules into one file dist/app.js (well, Grunt is doing this for us).

When We Are Working In Teams

We aren't pushing up all of our node_modules or our dist directory now so when our teammates checkout our branch and pull down our code to run it, they will need to install all of the dependencies that you listed and run grunt to output dist/app.js.

Example from package.json:

  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-browserify": "^5.2.0",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-watch": "^1.0.0",
    "jshint-stylish": "^2.2.1",
    "matchdep": "^2.0.0"
  }

• Pull down another person's code
• cd lib
• npm install
• grunt

---

jQuery

Install Dependencies

• cd lib
• npm init
• npm install grunt grunt-contrib-jshint matchdep grunt-contrib-watch grunt-browserify jshint-stylish --save-dev
• npm install jquery bootstrap --save

---

SASS

Install Dependencies

• cd lib
• npm init
• npm install grunt grunt-contrib-jshint matchdep grunt-contrib-watch grunt-sass grunt-browserify jshint-stylish --save-dev

Directory Structure:

  |- dist/
  |  - app.js (this is created when you run grunt)
  |- javascripts/
  |  - example_module.js
  |  - example_module2.js
  |  - main.js
  |- lib/
  |  - node_modules/ (this was created when you installed your npm dependencies)
  |  - package.json (this was created when you ran npm init)
  |  - Gruntfile.js 
  |- styles/
  |- sass/
  |  - main.scss
  | .gitignore
  | index.html
  | README.md

What Goes In .gitignore When Working In Teams

- .DS_Store
- lib/node_modules
- dist/app.js
- styles/main.css

What Goes In .gitignore When Working Individually

- .DS_Store
- lib/node_modules

NSS RESOURCES ON ALL OF THESE TOPICS:

• npm
• Grunt Setup
• Browserify

1_linting_GruntFile.js

module.exports = function(grunt) {

  grunt.initConfig({
    jshint: {
      options: {
        predef: [ "document", "console", "$" ],
        esnext: true,
        globalstrict: true,
        globals: {}
      },
      files: ['../javascripts/**/*.js']
    },
    watch: {
      options: {
        livereload: true,
      },
      javascripts: {
        files: ['../javascripts/**/*.js'],
        tasks: ['jshint']
      }
    }
  });

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

  grunt.registerTask('default', ['jshint', 'watch']);
};

2_browserify_GruntFile.js

module.exports = function(grunt) {

  grunt.initConfig({
    browserify: {
      js: {
          src: ['../javascripts/main.js'],
          dest: '../dist/app.js'
      }
    },
    jshint: {
      options: {
        predef: [ "document", "console", "$" ],
        esnext: true,
        globalstrict: true,
        globals: {},
        browserify: true
      },
      files: ['../javascripts/**/*.js']
    },
    watch: {
      options: {
        livereload: true,
      },
      javascripts: {
        files: ['../javascripts/**/*.js'],
        tasks: ['jshint', 'browserify']
      }
    }
  });

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

  grunt.registerTask('default', ['jshint', 'browserify', 'watch']);
};

3_sass_GruntFile.js

module.exports = function(grunt) {

  grunt.initConfig({
    browserify: {
      js: {
          src: ['../javascripts/main.js'],
          dest: '../dist/app.js'
      }
    },
    sass: {
      dist: {
        files: {
          '../styles/main.css': '../sass/main.scss'
        }
      }
    },
    jshint: {
      options: {
        predef: [ "document", "console", "$" ],
        esnext: true,
        globalstrict: true,
        globals: {},
        browserify: true
      },
      files: ['../javascripts/**/*.js']
    },
    watch: {
      options: {
        livereload: true,
      },
      sass: {
        files: ['../sass/**/*.scss'],
        tasks: ['sass']
      },
      javascripts: {
        files: ['../javascripts/**/*.js'],
        tasks: ['jshint', 'browserify']
      }
    }
  });

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

  grunt.registerTask('default', ['jshint', 'browserify', 'sass', 'watch']);
};

4_deploy_through_firebase.md

Deploy

Deploying with a project when it uses these technologies

• Browserify
• Bootstrap
• jQuery
• Sass
• JSHint

Install Dependencies

• cd lib
• npm init
• npm install grunt grunt-contrib-jshint matchdep grunt-sass grunt-contrib-copy grunt-contrib-clean grunt-contrib-watch grunt-browserify jshint-stylish --save-dev
• npm install jquery bootstrap --save

Deployment Instructions

1. At root: firebase login. (Once pre machine).
2. At root: firebase init. Selecting 'hosting', select 'correct Firebase project'. THEN YES TO ALL THE THINGS! (Once per project).
3. Update Gruntfile.js
4. Add any files you want to be in your 'public' (hosted) project to the 'copy .. / .. src' array.
5. Inside 'lib': grunt deploy (this creates 'public' folder at the root).
6. At root: firebase deploy.

When Actively Making Changes

1. Run grunt cleanit to 💥DESTROY💥 the public folder. If you don't do this, running http-server won't reflect your changes.

5_deploy_GruntFile.js

module.exports = function(grunt) {

    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-browserify');
    grunt.loadNpmTasks('grunt-contrib-clean');


    grunt.initConfig({
        browserify: {
            js: {
                src: ['../javascripts/main.js'],
                dest: '../dist/app.js'
            }
        },
        jshint: {
            options: {
                predef: ["document", "console", "$", "firebase"],
                esnext: true,
                globalstrict: true,
                globals: {},
                browserify: true
            },
            files: ['../javascripts/**/*.js']
        },
        sass: {
            dist: {
                files: {
                    '../styles/main.css': '../sass/main.scss'
                }
            }
        },
        watch: {
            options: {
                livereload: true,
            },
            sass: {
                files: ['../sass/**/*.scss'],
                tasks: ['sass']
            },
            javascripts: {
                files: ['../javascripts/**/*.js'],
                tasks: ['jshint', 'browserify']
            }
        },
        clean: {
            options: { force: true },
            public: ['../public']
        },
        copy: {
            dev: {
                files: [{
                    expand: true,
                    cwd: "../",
                    src: [
                        "index.html",
                        "dist/app.js",
                        "styles/**/*.css",
                        "lib/node_modules/bootstrap/dist/css/bootstrap.min.css",
                        "lib/node_modules/jquery/dist/jquery.min.js",
                        "lib/node_modules/bootstrap/dist/js/bootstrap.min.js",
                        "lib/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf",
                        "lib/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff",
                        "lib/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2"

                    ],
                    dest: "../public/"
                }]
            }
        }
    });

    grunt.registerTask('default', ['jshint', 'browserify', 'sass', 'watch']);
    grunt.registerTask('deploy', ['browserify', 'sass', 'copy']);
    grunt.registerTask('cleanit', ['clean']);
};