Lesson Weekend

Starting a new project and adding dependencies

Whenever we start a new project, we need to run the following commands to create our manifest files package.json and bower.json:

$ npm init
$ bower init

When we want to install a package to our project, we use the following commands:

$ npm install packagename --save-dev
$ bower install packagename --save

These commands are made up of two parts:

  1. $ npm install packagename and $ bower install packagename : the first part of the command installs the package code to the project
  2. --save-dev and --save: these flags add the package to the manifest file (that is, package.json and bower.json). We only need this part when we need to add the package to the project's dependencies.
    • --save-dev adds the project to the development dependencies
    • --save adds the project to the production dependencies

Cloning a project

When we clone a project to continue working on it, we run these commands:

$ npm install
$ bower install

All packages saved to the manifest file will be downloaded into new node_modules and bower_components folders. Because we saved our packages in the manifest files as dependencies, $ npm install and $ bower install do all our work for us: we don't need to save them with the --save-dev or --save flags again.

Finally, when we're ready to get our project up and running, we use the following commands:

$ gulp build
$ gulp serve

Here are some helpful shortcuts:

Install commands

  • npm install gulp --save-dev
  • bower install jquery --save
  • bower install bootstrap --save
  • bower install moment --save
  • npm install bower-files --save-dev
  • npm install browser-sync --save-dev
  • npm install browserify --save-dev
  • npm install vinyl-source-stream --save-dev
  • npm install gulp-concat --save-dev
  • npm install gulp-uglify --save-dev
  • npm install gulp-util --save-dev
  • npm install del --save-dev
  • npm install jshint --save-dev
  • npm install gulp-jshint --save-dev

Gulpfile requirements

  • var browserSync = require('browser-sync').create();
  • var lib = require('bower-files')();
  • var gulp = require('gulp');
  • var source = require('vinyl-source-stream');
  • var uglify = require('gulp-uglify');
  • var utilities = require('gulp-util');
  • var buildProduction = utilities.env.production;
  • var del = require('del');
  • var jshint = require('gulp-jshint');
  • var concat = require('gulp-concat');