NodeJs: Update NPM version on Windows

Standard

If you want to update local NPM package on windows machine, either Download and run the latest MSI. The MSI will update your installed node and npm.

There is another solution, which will update npm package globally on local machine.

Run PowerShell as Administrator

Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install -g npm-windows-upgrade
npm-windows-upgrade

Note: Do not run npm i -g npm. Instead use npm-windows-upgrade to update npm going forward. Also if you run the NodeJS installer, it will replace the node version.

  • Upgrades npm in-place, where node installed it.
  • Easy updating, update to the latest by running npm-windows-upgrade -p -v latest.
  • Does not modify the default path.
  • Does not change the default global package location.
  • Allows easy upgrades and downgrades.

screenshot_5

Reference: upgrade npm on Windows.

Advertisements

Browser Sync in Visual Studio

Standard

One may use Browser Sync node plugin in order to keep multiple browsers & devices in sync when building websites.

Installation:

  • install NodeJS
  • install Browser Sync by typing below command in CMD
        npm install -g browser-sync

    Setting in Visual Studio:

    • Open your project in VS (I am using VS2013 for tutorial, have successfully tested on VS2012 and VS 2015)
    • Right Click on web project and select Properties option11
    • Select Web Tab from properties window12
    • Choose Dont open a page. Wait for a request from an external application from Start Action sub menu, then note the port number from project URL text box and save the properties file (ctrl + s)13
    • Now right click on project, Select Power Commands and click on Open Command prompt14 
    • Execute below command in CMD, Change port number which you copied earlier from Project URL textbox, mention path of files which you want to monitor like css, js, html, cshtml etc.
      Please note in CMD always make sure it is pointing towards your project (for example in this case c:\Users\hassan.muhammad\Desktop\MS\bing\Bing.Web>, otherwise browser will look for js,css and html files from root folder and will not reload changes on browser. 
       browser-sync start --proxy localhost:3495 --files "content/*.css, scripts/*.js, views/**/*.cshtml"

      15

    • As soon you execute above statement in CMD, this will trigger browser-sync and it will load your project in browser16 
    • Browser-sync notification will also be available on your browser for a while confirming any changes you made to these files will be reloaded on browser automatically17 

      [In order to use browser-sync as part of your automation workflow with GulpJS]

GulpJS: Setting up test runner on HTML

Standard

Setting up test runner on HTML

  • Use gulp-jasmine-browser in order to execute jasmine tests in a browser using gulp.
  • In order to check output, type following url in browser window: http://localhost:8888/

Pre Install:

    npm install --save-dev  

Install:

    npm install --save-dev gulp-jasmine-browser

Code:

    var gulp = require('gulp');
    var jasmineBrowser = require('gulp-jasmine-browser');
    var config.files = ['./scripts/lib/angular/angular.js',
        './scripts/lib/angular/angular-mocks.js',
        './scripts/app/myService.services.js',
        './scripts/app/myService.services-spec.js',];

    gulp.task('jasmineBrowser', function () {
        return gulp.src(config.files)
          .pipe(jasmineBrowser.specRunner())
          .pipe(jasmineBrowser.server({ port: 8888 }));
    });

Execute:

    gulp jasmineBrowser

GulpJS: E2E Testing with Protractor

Standard

E2E Testing with Protractor

  • Protractor is an end-to-end test framework for AngularJS applications
  • It execute tests against your application running in a real browser, interacting with it as a real life user.
  • Make sure you have updated version of webdriver-manager otherwise execute below command in cmd before executing gulp task
webdriver-manager update --standalone
  • In protractor.config.js file mention file path to the selenium server jar, path of chrome driver and comment out address of a running selenium server before executing gulp task
seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.48.2.jar',
chromeDriver: './node_modules/protractor/selenium/chromedriver.exe',
//seleniumAddress: 'http://localhost:4444/wd/hub',
  • Start webdriver-manager in seperate console before executing gulp task
webdriver-manager start
  • __dirname is global object of NodeJS for the name of the directory that the currently executing script resides in

Pre Install:

    npm install --save-dev gulp

Install:

    npm install --save-dev gulp-protractor protractor

Code:

    var gulp = require('gulp');
    var protractor = require("gulp-protractor").protractor;

    gulp.task('e2e', function (done) {
        gulp.src(__dirname + './protractor_test/')
        .pipe(protractor({
            configFile: './protractor.config.js',
            args: ['--baseUrl', 'http://127.0.0.1:8000']
        }))
        .on('error', function (e) { throw e })
    });

Execute:

    gulp e2e

GulpJS: Unit Testing with Jasmine and Karma

Standard

Unit Testing with Jasmine and Karma

  • karma is Test Runner for JavaScript, a tool that allows you to execute JS code in multiple real browsers
  • karma is A Karma plugin. used to generate code coverage.
  • Task singleRun refers to execute tests once, it can fail a build but perfect for continuous integration
  • Task alwaysRun refers to execute tests and stay alive, monitors changes in file and re-run with each change
  • Please make sure karma.config.js file is included in your project before executing gulp task
  • __dirname is global object of NodeJS for the name of the directory that the currently executing script resides in

Pre Install:

    npm install --save-dev gulp

Install:

    npm install --save-dev karma phantomjs karma-coverage karma-growl-reporter karma-phantomjs-launcher  karma-firefox-launcher karma-ie-launcher karma-chrome-launcher karma-jasmine jasmine

Code:

    var gulp = require('gulp');

    gulp.task('singleRun', function (done) {
        startTests(true, done);
    });

    gulp.task('alwaysRun',  function (done) {
        startTests(false, done);
    });

    function startTests(singleRun, done) {
        var karma = require('karma').server;
        var excludeFiles = [];
        var serverSpecs = 'tests/**/*.spec.js'

        karma.start({
            configFile: __dirname + '/karma.config.js',
            exclude: excludeFiles,
            singleRun: !!singleRun
        }, karmaCompleted);

        function karmaCompleted(karmaResult) {
            if (karmaResult === 1) {
                done('karma: tests failed with code ' + karmaResult);
            } else {
                done();
            }
        }
    }

Execute:

    gulp singleRun
    gulp alwaysRun

GulpJS: File Version

Standard

File Version

  • Use gulp-bump for vesrioning in package.json and bower.json
  • –type=pre will bump the prerelease version ..*-x
  • –type=patch or no flag will bump the patch version ..x
  • –type=minor will bump the minor version .x.
  • –type=major will bump the major version x..
  • –version=1.2.3 will bump to a specific version and ignore other flags
  • for –version=1.2.3 means 1 corresponds to major, 3 corresponds to minor and 3 corresponds to package version

Pre Install:

    npm install --save-dev gulp gulp-load-plugins yargs

Install:

    npm install --save-dev gulp-bump

Code:

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });
    var args = require('yargs').argv;

    gulp.task('version', function () {
        var type = args.type;
        var version = args.version;
        var options = {};
        if (version) {
            options.version = version;
        } else {
            options.type = type;
        }
        return gulp
            .src([ './package.json', './bower.json' ])
            .pipe($.bump(options))
            .pipe(gulp.dest('./'));
    });

Execute:

    gulp version --version=2.0.0
    gulp version --type=minor

GulpJS: File Revisions

Standard

Revisions

  • Use gulp-rev in order to implement static asset revisioning by appending content hash to filenames: unicorn.css => unicorn-d41d8cd98f.css
  • Use gulp-rev-replace in order to rewrite occurences of filenames which have been renamed by gulp-rev in index.html(html referencing file)
  • gulp-rev-replace solves the cache problem too

Pre Install:

    npm install --save-dev gulp gulp-load-plugins 

Install:

    npm install --save-dev gulp-rev gulp-rev-replace

Code:

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('revision', function () {

        return gulp
            .src('src/*.js')
            .pipe($.rev())
            .pipe(gulp.dest('./build/'));
    });

Execute:

    gulp revision