Click here to Skip to main content
15,075,638 members
Articles / Web Development / Node.js
Article
Posted 14 Dec 2015

Stats

14.9K views
5 bookmarked

Introduction, Style Guidelines and Automation Features of GulpJS

Rate me:
Please Sign up or sign in to vote.
4.80/5 (7 votes)
14 Dec 2015CPOL9 min read
Using Gulp.JS to specify units of work in angularJS

Download source code from Github

Introduction

Core Feature of Gulp

  • Minification
  • Concatenation
  • Vendor prefixes
  • Less to CSS compilation
  • Optimizing 3rdparty and custom code
  • Injecting files into HTML
  • File revisions and versioning
  • Caching Angular templates
  • Testing
  • Code analysis

It streamline your SDLC cycle more efficiently using flow of continuous integration, testing and development. It help to improve quality, deliver faster and consistent.

Image 1

 

Difference between Grunt and Gulp

Gulp is more codish as compare to grunt which is more into configuration, so Gulp is more readable, easier to debug. Its stream based so used node more readily.

Image 2

 

Gulp Workflow

  • Fetch files to be modify
  • Modify the files
  • Create new files

Image 3

Since Gulp is stream based, so in pipeline architecture, diagram would be as follows

Image 4

Image 5

 

Gulp API

 

  • gulp.task == Define a task
  • gulp.src == read files
  • gulp.dest == write the files
  • gulp.watch == watch the files when making code changes
<code>gulp.task('TaskName', [dependencyItem], function () {
    return gulp
        .src('./sourcePath')
        .pipe(operation)
        .pipe(gulp.dest('./destinationPath'));
});
</code>
  1. gulp.task

    <code>gulp.task(taskName [, arary of dependencies], function)
    </code>
    • Register a task
    • dependencies are optional
    • dependencies are executed in parallel not in sequential order
    • Actual task is executed soon after completion of dependencies
  2. gulp.src

    <code>gulp.src(file path [, options])
    </code>
    • Fetch set of files to be modified
    • Wildcard operators may be used to emit/add files
    • Optionally specify options to apply to set of files (e.g. how much of path to be retained)
  3. gulp.dest

    <code>gulp.dest(output folder path [, options])
    </code>
    • Modified files are written to destination output folder
    • Write piped files to new file or same file
    • Optionally specify options to apply to set of output files or folder
  4. gulp.watch

    Used to monitor files when altering code during development

    <code>    gulp.watch(file path [, options], [task name])
    </code>
    • Execute single or multiple tasks for the files matched with the file path
    • Optionally specify options to apply to set of files

      <code>gulp.watch(file path [, options], CallbackFunction)
      </code>
    • Execute call back function for the files matched with the file path

    • Optionally specify options to apply to set of files

 

Installation

Image 6

Key players

  1. Visual Studio
  2. NodeJS
  3. NPM
  4. Bower
  5. Gulp

Step 1: Installer

Please note you may also use chocolatey for installing nodejs and github

"Chocolatey is a package manager for Windows (like apt-get but for Windows). It was designed to be a decentralized framework for quickly installing applications and tools that you need. It is built on the NuGet infrastructure currently using PowerShell as its focus for delivering packages from the distros to your door, err computer."

Chocolatey

<code>    choco install nodejs
    choco install nodejs.install
    choco install git 
    choco install git.install 
</code>

Step 2: Visual Studio Extensions

Optional:

Step 3: Global Node Packages

Install packages for CLI globally, This will enable glup and bower command line interfaces

  • NPM
  • bower
  • gulp
<code>npm install -g npm
npm install -g bower
npm install -g gulp
</code>

Please note: NPM will be automatcially downloaded with node js installer

Step 4: Create npm and bower dependencies files

  • In order to handle server side packages, create packages.json file:

    <code>npm init
    </code>
  • In order to handle client side packages, create bower.json file:

    <code>bower init
    </code>

Step 5: Project specific Node Packages

  • gulp

    <code>npm install --save-dev gulp
    </code>

    --save-dev store packages to devDependencies in package.json file

    --save store packages to dependencies in package.json file

Step 6: Project specific Bower Packages

<code>    bower install angular --save
    bower install lodash --save
    bower install jasmine --save
</code>

For specific version of bower packages you may used #versionNumber

<code>    bower install angularjs#v1.3.8 --save
    bower install lodash#v3.10.1 --save
</code>

Step 7: Add gulp config file in project

Add gulpfile.js in project and paste below code in it.

<code>    var gulp = require('gulp');
    gulp.task('testing', function () {
        console.log('Hello world!');
    });
</code>

Step 8: Executing Gulp Task

Now execute testing task in CMD (make sure CMD refer to project path)

<code>    gulp testing
</code>

 

Style Guidelines for Gulp configuration file

  • Avoid magic strings out of gulp file in order to make things simple, maintainable and easy to read. Introduce them in gulp.config.js file for instance file path, global gulp variables, wildcard strings etc

    Image 7

  • Use gulp-load-plugins for lazy loading, Loads in any gulp plugins and attaches them to the global scope, or an object of your choice.

    <code>$ npm install --save-dev gulp-load-plugins
    </code>

    Code Before:

    <code>    var gulp = require('gulp');
        var jshint = require('gulp-jshint');
    
        gulp.task('jshint', function () {
            return gulp
                .src('./file.js')
                .pipe(jshint())
                .pipe(jshint.reporter('YOUR_REPORTER_HERE'));
        });
    </code>

    Code Before:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
    
        gulp.task('jshint', function () {
            return gulp
                .src('./file.js')
                .pipe($.jshint())
                .pipe($.jshint.reporter('YOUR_REPORTER_HERE'));
        });
    </code>
  • Use yargs for picking up argument from CLI. Using this plugin you may get node.js command line arguments.

    <code>npm install yargs
    </code>

    For example:

    <code>    var args = require('yargs').argv;
        var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
    
        gulp.task('jshint', function () {
            return gulp
                .src('./file.js')
                .pipe($.if(args.verbose, $.print()))
                .pipe($.jshint())
                .pipe($.jshint.reporter('jshint-stylish', { verbose: true }))
                .pipe($.jshint.reporter('YOUR_REPORTER_HERE'));
        });
    </code>

    Command: gulp jshint --verbose

    verbose is argument to show file list

  • Use gulp-util for utility function like log(), isStream(), isBuffer(), noop()

    <code>npm install gulp-util
    </code>

    For example:

    <code>    var gutil = require('gulp-util');
    
        gulp.task('hello', function () {
            gutil.log('Hello World');
        });
    </code>

    Command: gulp hello

  • Use gulp-print for printing names of files to the console in order to check status of the gulp pipe.

    <code>npm install gulp-print
    </code>

    For example:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
    
        gulp.task('print', function() {
            return gulp
                .src('test/*.js')
                            .pipe($.print())
        });
    </code>

    Command: gulp print

  • Use gulp-if for conditionally control the flow of vinyl objects.

    <code>npm install gulp-if
    </code>

    Image 8

    For example:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
        var args = require('yargs').argv;
    
        gulp.task('if', function() {
            return gulp
                .src('test/*.js')
                .pipe($.if(args.admin, $.uglify()))
                .pipe(gulp.dest('./dist/'));
        });
    </code>

    Command: gulp if true

    if user passed true as value for admin argument then js files as per source will be minfied

  • Use gulp-task-listing as first step in defualt task in order to provide an easy way to get a listing of your tasks from your gulpfile.

    <code>npm install gulp-task-listing
    </code>

    For example:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
    
        gulp.task('help', $.taskListing);
        gulp.task('default', ['help']);
    </code>

    Command: gulp default

  • Use gulp-plumber to prevent pipe breaking caused by errors from gulp plugins, It handle error gracefully instead of .on('error', errorfunction)

    <code>npm install gulp-plumber
    </code>

    For example:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
    
        gulp.task('error', function () {
            return gulp
                .src('./file.js')
                .pipe($.plumber())
                .pipe($.uglify())
                .pipe(gulp.dest('./dist/'));
        });
    </code>

    Command: gulp error

Automation Features of GulpJS

  1. JS Code Style Guide and Analysis

    • Use this task in order to implement your javascript style guide and detect errors.
    • Highlight all rules in your .jshintrc and .jscsrc file.
    • Gulp will test javascript code from these files in order to enforce rules.

    Sample Js Hint File

    Sample Js Code Style File

    Pre Install:

    <code>    npm install --save-dev gulp gulp-load-plugins 
    </code>

    Install:

    <code>    npm install --save-dev gulp-load-plugins jshint-stylish gulp-util
    </code>

    Code:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
    
        gulp.task('jsCode', function () {
        return gulp
            .src('test/*.js')
            .pipe($.jscs())
            .pipe($.jshint())
            .pipe($.jshint.reporter('fail'));
        });
    </code>

    Execute:

    <code>    gulp jscode
    </code>
  2. less and sass compilation

    • Use gulp-less in order to compile less into css before browsing
    • Task will take care of variables, operators, functions, mixins etc in your less file
    • You may use AutoPrefixer to add vendor prefixes

    Pre Install:

    <code>    npm install --save-dev gulp gulp-load-plugins 
    </code>

    Install:

    <code>    npm install --save-dev gulp-less gulp-autoprefixer 
    </code>

    Code:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
    
        gulp.task('css', function () {
        return gulp
            .src('test/*.less')
            .pipe($.less())
            .pipe($.autoprefixer({ browsers: ['last 2 version', '> 5%'] }))
            .pipe(gulp.dest('./build/'));
        });
    </code>

    Execute:

    <code>    gulp css
    </code>
  3. Add Javascript and CSS dynamically in main file

    • Use wiredep to inject bower js and css dependencies into index.html
    • Use gulp-inject to inject custom js and css dependencies into index.html

    Pre Install:

    <code>    npm install --save-dev gulp gulp-load-plugins
    </code>

    Install:

    <code>    npm install --save-dev wiredep gulp-inject
    </code>

    Syntax in HTML File for wiredep:

    <code>    <!-- bower:css -->
    
        <!-- endbower -->
    
        <!-- bower:js -->
    
        <!-- endbower -->
    </code>

    Code:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
    
        var options = {
            bowerJson: require('./bower.json'),
            directory: './bower_components/',
            ignorePath:  '../..'
        }
    
        gulp.task('injectJS', function () {
            var wiredep = require('wiredep').stream;
    
            return gulp
                .src('./src/index.html')
                .pipe(wiredep(options))
                .pipe($.inject(gulp.src('modules/home/**/*.js')))
                .pipe(gulp.dest('./build/'));
        });
    </code>

    Execute:

    <code>    gulp injectJS
    </code>

    Syntax in HTML File for gulp-inject:

    <code>    <!-- inject:css -->
    
        <!-- endinject -->
    
        <!-- inject:js -->
    
        <!-- endinject -->  
    </code>

    Code:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
    
        gulp.task('injectCSS', function () {
    
            return gulp
                .src('./src/index.html')
                .pipe($.inject(gulp.src('content/**/*.css')))
                .pipe(gulp.dest('./build/content/'));
        });
    </code>

    Execute:

    <code>    gulp injectCSS
    </code>
  4. Automatic Browser Refresh

    • Use BrowserSync to view live changes in html/JS/CSS to browser
    • Proxy attribute should have IIS path and port
    • Ghost Mode synchronize actions across browsers e.g. scroll, click etc

    Browser Sync

    Pre Install:

    <code>    npm install --save-dev gulp lodash node-notifier
    </code>

    Install:

    <code>    npm install --save-dev browser-sync
    </code>

    Code:

    <code>    var gulp = require('gulp');
        var browserSync = require('browser-sync');
        var _ = require('lodash');
    
        gulp.task('browser-sync', function () {
            if (browserSync.active) {
                return;
            }
            var options = {
                proxy: 'localhost:' + 3472,
                port: 3470,
                files: [
                    './scripts/**/*.*'
                ],
                ghostMode: {
                    clicks: true,
                    location: false,
                    forms: true,
                    scroll: true
                },
                injectChanges: true,
                logFileChanges: true,
                logLevel: 'debug',
                logPrefix: 'gulp-patterns',
                notify: true,
                reloadDelay: 1000 
            };
            browserSync(options);
        });
    
        function notify(options) {
            var notifier = require('node-notifier');
            var notifyOptions = {
                sound: 'Bottle',
                contentImage: path.join(__dirname, 'gulp.png'),
                icon: path.join(__dirname, 'gulp.png')
            };
            _.assign(notifyOptions, options);
            notifier.notify(notifyOptions);
        }
    </code>

    Execute:

    <code>    gulp browser-sync   
    </code>
  5. Compressing Images

    • Use gulp-imagemin to minify PNG, JPEG, GIF and SVG images
    • Use optimizationLevel attribute to adjust compression between 0 and 7

    Pre Install:

    <code>    npm install --save-dev gulp gulp-load-plugins 
    </code>

    Install:

    <code>    npm install --save-dev gulp-imagemin 
    </code>

    Code:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
    
        gulp.task('images', function () {
    
            return gulp
                .src('./src/images/')
                .pipe($.imagemin({ optimizationLevel: 4 }))
                .pipe(gulp.dest('./build/images'));
        });
    </code>

    Execute:

    <code>    gulp images
    </code>
  6. Copy Files

    • For copying files like fonts, non-compressing images etc

    Code:

    <code>    var gulp = require('gulp');
    
        gulp.task('delete', function () {
    
            return gulp
                .src('./src/fonts/')
                .pipe(gulp.dest('./build/fonts'));
        });
    </code>

    Execute:

    <code>    gulp delete
    </code>
  7. Delete Files

    • For deleting folders and files.

    Install:

    <code>    npm install --save-dev del
    </code>

    Code:

    <code>    var gulp = require('gulp');
        var del = require('del');
    
        gulp.task('delete', function () {
    
            del('./build/');
        });
    </code>

    Execute:

    <code>    gulp delete
    </code>
  8. List all task Files

    • Use gulp-task-listing in order to list all tasks in your gulpjs file

    Pre Install:

    <code>    npm install --save-dev gulp gulp-load-plugins 
    </code>

    Install:

    <code>    npm install --save-dev gulp-task-listing 
    </code>

    Code:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
    
        gulp.task('help', $.taskListing);
    </code>

    Execute:

    <code>    gulp help
    </code>
  9. Caching HTML Templates

    • Use gulp-angular-templatecache in order to concatenates and registers AngularJS templates in the $templateCache
    • All HTML files will be stored as key-value pair using angular $templateCache service
    • URL of HTML will be key and html code of file will be value in $templateCache service
    • This will reduce HTTP requests
    • For each HTML request by angular, first it will check $templateCache service, If not found then it will make HTTP request for that HTML file
    • standAlone attribute in options means to make a new angular module for templates
    • gulp-angular-templatecache will create a file and using .run() service of main module, this will load all html in $templateCache service

    Pre Install:

    <code>    npm install --save-dev gulp gulp-load-plugins 
    </code>

    Install:

    <code>    npm install --save-dev gulp-angular-templatecache gulp-minify-html 
    </code>

    Code:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
        var options =   {
                    module: 'ModuleName',
                    standAlone: false,
                    root: 'scripts/app/'
                }   
    
        gulp.task('templatecache', function () {
    
            return gulp
                .src('**/*.html')
                .pipe($.minifyHtml({ empty: true }))
                .pipe($.angularTemplatecache(
                        'templates.js',
                        options
                    ))
                .pipe(gulp.dest('./.tmp/'));
        });
    </code>

    Execute:

    <code>    gulp templatecache
    </code>
  10. Combing all JS and CSS into respective one file

    • Use gulp-useref in order to concatenate all css into one css file and all js files into one js file
    • Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
    • Similar to gulp-inject
    • Index.html should have bower/inject/build section, bower and inject area should be populated first using wiredep and gulp-inject task, then execute this task to concatenate all css and js file into respective single file as mentioned under build tag of index.html

    Pre Install:

    <code>    npm install --save-dev gulp gulp-load-plugins
    </code>

    Install:

    <code>    npm install --save-dev gulp-useref@v1.1.0
    </code>

    Syntax in HTML File for gulp-useref:

    <code>    <!-- build:css content/lib.css -->
        <!-- bower:css -->
        <!-- endbower -->
        <!-- endbuild -->
    
        <!-- build:css content/site.css -->
        <!-- inject:css -->
        <!-- inject -->
        <!-- endbuild -->
    
        <!-- build:js js/lib.js -->
        <!-- bower:js -->
        <!-- endbower -->
        <!-- endbuild -->
    
        <!-- build:js js/app.js -->
        <!-- inject:js -->
        <!-- endinject -->
        <!-- endbuild -->
    </code>

    Code:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
        var assets = $.useref.assets({ searchPath: './' });
    
        gulp.task('combine', function () {
    
            return gulp
                .src('./build/index.html')
                .pipe(assets)
                .pipe(assets.restore())
                .pipe($.useref())
                .pipe(gulp.dest('./build/'));
        });
    </code>

    Execute:

    <code>    gulp combine
    </code>
    • $.useref.assets() collects assets from the HTML comment
    • $.useref.restore() restore the files to the index.html
    • $.useref() will concatenate files
  11. Minifying Files

    • Use gulp-Uglify to remove whitespace, comments, minify javascript files
    • Use gulp-CSSO to remove whitespace, comments, transform css files
    • Use gulp-filter to seperate out/reduce/filter files from gulp stream
    • Manglin your code can break angular dependency injection, in order to avoid this use Strict Dependency Injection (ng-strict-di) or $inject Property Annotation
    • Filter.restore() function put filter back into stream

    Pre Install:

    <code>    npm install --save-dev gulp gulp-load-plugins 
    </code>

    Install:

    <code>    npm install --save-dev gulp-filter@v2.0.0 gulp-csso gulp-uglify
    </code>

    Code:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
        var assets = $.useref.assets({ searchPath:  './' });
        var cssFilter = $.filter('**/*.css');
        var jsFilter = $.filter('**/*.js');
    
        gulp.task('minify', function () {
    
            return gulp
                .src('./build/index.html')
                .pipe(assets)
                .pipe(cssFilter)
                .pipe($.csso())
                .pipe(cssFilter.restore())
                .pipe(jsFilter)
                .pipe($.uglify())
                .pipe(jsFilter.restore())
                .pipe(assets.restore())
                .pipe($.useref())
                .pipe(gulp.dest('./build/'));
        });
    </code>

    Execute:

    <code>    gulp minify 
    </code>
  12. Angular Dependency Injection

    • Use gulp-ng-annotate in order to provide automatic security blanket because manglin your code can break angular dependency injection
    • gulp-ng-annotate looks for dependency injection and adds angular injection
    • Use ** /* @ngInject / * annotation on top of controller, services, anonymous function etc to resolve dependency injection if forget to use Strict Dependency Injection (ng-strict-di) or $inject Property Annotation.
    • @ngInject provide code hint for gulp-ng-annotate to add angular injections
    • Avoid implementing @ngInject for third party libraries

    Pre Install:

    <code>    npm install --save-dev gulp gulp-load-plugins
    </code>

    Install:

    <code>    npm install --save-dev gulp-ng-annotate
    </code>

    Code:

    <code>    var gulp = require('gulp');
        var $ = require('gulp-load-plugins')({ lazy: true });
        var assets = $.useref.assets({ searchPath:  './' });
        var cssFilter = $.filter('**/*.css');
        var jsLibFilter = $.filter('**/' + config.optimized.lib);
        var jsAppFilter = $.filter('**/' + config.optimized.app);
    
        gulp.task('di', function () {
    
            return gulp
            .src('./build/index.html')
            .pipe(assets)
            .pipe(cssFilter)
            .pipe($.csso())
            .pipe(cssFilter.restore())
            .pipe(jsLibFilter)
            .pipe($.uglify())
            .pipe(jsLibFilter.restore())
            .pipe(jsAppFilter)
            .pipe($.ngAnnotate())
            .pipe($.uglify())
            .pipe(jsAppFilter.restore())
            .pipe(assets.restore())
            .pipe($.useref())
            .pipe(gulp.dest('./build/'));
        });
    </code>

    Execute:

    <code>    gulp di
    </code>
  13. 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:

    <code>    npm install --save-dev gulp gulp-load-plugins 
    </code>

    Install:

    <code>    npm install --save-dev gulp-rev gulp-rev-replace
    </code>

    Code:

    <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/'));
        });
    </code>

    Execute:

    <code>    gulp revision
    </code>
  14. 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:

    <code>    npm install --save-dev gulp gulp-load-plugins yargs
    </code>

    Install:

    <code>    npm install --save-dev gulp-bump
    </code>

    Code:

    <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('./'));
        });
    </code>

    Execute:

    <code>    gulp version --version=2.0.0
        gulp version --type=minor
    </code>
  15. 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:

    <code>    npm install --save-dev gulp
    </code>

    Install:

    <code>    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>

    Code:

    <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();
                }
            }
        }
    </code>

    Execute:

    <code>    gulp singleRun
        gulp alwaysRun
    </code>
  16. 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

      <code>webdriver-manager update --standalone
      </code>
    • 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

      <code>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',
      </code>
    • Start webdriver-manager in seperate console before executing gulp task

      <code>webdriver-manager start
      </code>
    • __dirname is global object of NodeJS for the name of the directory that the currently executing script resides in

    Pre Install:

    <code>    npm install --save-dev gulp
    </code>

    Install:

    <code>    npm install --save-dev gulp-protractor protractor
    </code>

    Code:

    <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 })
        });
    </code>

    Execute:

    <code>    gulp e2e
    </code>
  17. 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:

    <code>    npm install --save-dev  
    </code>

    Install:

    <code>    npm install --save-dev gulp-jasmine-browser
    </code>

    Code:

    <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 }));
        });
    </code>

    Execute:

    <code>    gulp jasmineBrowser
    </code>

 

For the complete source code, please see  https://github.com/m-hassan-tariq/GulpJSForAngularJS

https://hassantariqblog.wordpress.com/2015/12/09/introduction-to-gulp-js/
https://hassantariqblog.wordpress.com/2015/12/10/style-guidelines-for-gulpjs/
https://hassantariqblog.wordpress.com/2015/12/11/automation-features-of-gulpjs/

 

Images created by john papa

 

History

 

Keep a running update of any changes or improvements you've made here.

This article was originally posted at https://github.com/m-hassan-tariq/GulpJSForAngularJS

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Muhammad Hassan Tariq
Software Developer
United States United States
Five+ years of demonstrated work experience in developing and implementing business technology applications, systems integration and testing solutions with in-depth domain knowledge of industries like Healthcare, Telecom, Call Center, Financial Instruments, Payroll, HR, and skills including, but not limited to, software analysis, design and development.

Comprehensive understanding of NET Framework 4.5, 4.0, 2.0 and C#, ASP.Net, ADO.Net, Entity Framework, LINQ, Web Service, WCF, AJAX Control Toolkit, Advanced JavaScript, HTML 5.0, CSS3.0, jQuery, SSIS, SSRS, XML, XSLT, JSON.

Expertise in end to end development of enterprise web application and Single Page Application (SPA) using ASP.NET MVC, ASP.NET Web Forms, ASP.NET Web API, AngularJS, TypeScript, NodeJS, SQL Server and Design Pattern fanatic.

Comments and Discussions

 
GeneralGraphically Representation is Great. Pin
aarif moh shaikh15-Dec-15 17:24
professionalaarif moh shaikh15-Dec-15 17:24 
QuestionConcise yet thorough Pin
dgDavidGreene15-Dec-15 12:03
MemberdgDavidGreene15-Dec-15 12:03 
AnswerRe: Concise yet thorough Pin
Muhammad Hassan Tariq15-Dec-15 12:21
professionalMuhammad Hassan Tariq15-Dec-15 12:21 
Thanks

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.