Gulp

I wanted to improve a code quality of my TypeScript project, so I decided to add linting to my gulp build process. My original build task looked pretty straightforward

function buildTypeScript() {
    return gulp.src(['app/**/*.ts','typings/**/*.ts'])
               .pipe(sourcemaps.init())
               .pipe(ts({
                   sortOutput: true,
                   noExternalResolve: true,
                   noEmitOnError: true,
                   target: 'ES5'
               }))
               .pipe(concat(constants.appall))
               .pipe(sourcemaps.write())
               .pipe(gulp.dest(paths.app));
}

function buildTypeScript() {

return gulp.src(['app/**/*.ts','typings/**/*.ts'])

.pipe(sourcemaps.init())

.pipe(ts({

sortOutput: true,

noExternalResolve: true,

noEmitOnError: true,

target: 'ES5'

}))

.pipe(concat(constants.appall))

.pipe(sourcemaps.write())

.pipe(gulp.dest(paths.app));

}

and according to gulp-tslint manual adding linting requires including only two additional lines of code

//..
.pipe(tslint())
.pipe(tslint.report('verbose'));
//..

//..

.pipe(tslint())

.pipe(tslint.report('verbose'));

//..

This works fine until you start using type definitions (d.ts files) from external resources (which is the usual way of combining TypeScript with existing JavaScript libraries). Usually these files have different code styling rules than our own, which means that our build will fail.

There are couple of ways of solving this problem. The obvious one is to split the task into two separate tasks, one for linting and one for building, but in my opinion a much cleaner way is to use gulp-filter. Gulp-filter has an ability to filter the stream on the fly, but what is more interesting it can also restore it to previous unfiltered state. Using these two features we can filter the stream from d.ts files before linting process begins and then restore the stream and pass it to TypeScript compiler. We can do it with two additional lines of code. Improved build script is presented below

function buildTypeScript() {
    // include all typescript files but exclude definitions
    var filter = gulpFilter(['**/*.ts', '!**/*d.ts']);

    return gulp.src(['app/**/*.ts','typings/**/*.ts'])
               .pipe(filter)    // use the filter
               .pipe(tslint())
               .pipe(tslint.report('prose', {
                   emitError: true
               }))
               .pipe(filter.restore()) // clear filter
               .pipe(sourcemaps.init())
               .pipe(ts({
                   sortOutput: true,
                   noExternalResolve: true,
                   noEmitOnError: true,
                   target: 'ES5'
               }))
               .pipe(concat(constants.appall))
               .pipe(sourcemaps.write())
               .pipe(gulp.dest(paths.app));
}

function buildTypeScript() {

// include all typescript files but exclude definitions

var filter = gulpFilter(['**/*.ts', '!**/*d.ts']);

return gulp.src(['app/**/*.ts','typings/**/*.ts'])

.pipe(filter) // use the filter

.pipe(tslint())

.pipe(tslint.report('prose', {

emitError: true

}))

.pipe(filter.restore()) // clear filter

.pipe(sourcemaps.init())

.pipe(ts({

sortOutput: true,

noExternalResolve: true,

noEmitOnError: true,

target: 'ES5'

}))

.pipe(concat(constants.appall))

.pipe(sourcemaps.write())

.pipe(gulp.dest(paths.app));

}

Source code for this post can be found here

There are couple of ways of injecting dependencies into AngularJS components. The most common one is just to specify the dependency name in the function’s argument list

(function() {
    angular
        .module('app')
        .controller('shellCtrl', function ($scope, $http) {
            $scope.title = "Title";
        });
})();

(function() {

angular

.module('app')

.controller('shellCtrl', function ($scope, $http) {

$scope.title = "Title";

});

})();

However this technique fails in real life scenarios, because for production we usually (or rather always) minify and uglify javascript files. Uglify proces renames our variables and due to the fact that dependencies are resolved by name, AngularJS is not able to find appropriate services, directives etc. To overcome this limitation, we can enclose our function definition into an array, and specify dependencies as a string literals. Our original code becomes then

(function () {
    angular.module('app')
           .controller('shellCtrl', ['$scope', '$http', function ($scope, $http) {
               $scope.title = "Title";
           }]);
})();

(function () {

angular.module('app')

.controller('shellCtrl', ['$scope', '$http', function ($scope, $http) {

$scope.title = "Title";

}]);

})();

Although this works fine even after minifying and uglifiyng js files, for me this code is hard to read. That is why I like to use yet another technique. This technique leverages variable hoisting and $inject property

(function(){
    angular.module('app')
           .controller('shellCtrl',shellController);

    shellController.$inject=['$scope','$http'];

    function shellController($scope,$http){
        $scope.title='title';
    }
})();

(function(){

angular.module('app')

.controller('shellCtrl',shellController);

shellController.$inject=['$scope','$http'];

function shellController($scope,$http){

$scope.title='title';

}

})();

As You can see I extracted controller function into separate variable “shellController” and listed all necessary dependencies in $inject array

shellController.$inject= ['$scope','$http']

1	shellController.$inject= ['$scope','$http']

It is even possible to enhance a bit this example and make it a little less error prone. With the current implementation we have to make sure that order of properties in $inject array is the same as in function declaration. It is easy to keep track of that if we have just a couple of dependencies, but it might be a bit of a pain if we start to add, remove or edit them. Fortunately we can automate this task and basically autogenerate $inject array. In order to do that I like to use Gulp (although it is also possible to use Grunt). First of all we have to install Gulp. There is great tutorial how to do that in here https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md Having Gulp on board we have to install additional packages: gulp-rename and gulp-ng-annotate. In order to do that type into command line

npm install gulp-ng-annotate --save-dev
npm install gulp-rename --save-dev

1 2	npm install gulp-ng-annotate --save-dev npm install gulp-rename --save-dev

Now we can create gulp.js file which should look more or less like that

var rename = require('gulp-rename'),
    ngAnnotate = require('gulp-ng-annotate');

gulp.task('annotate', function () { //create new task 'annotate'
    return gulp.src('app/layout/controllers/shellController.js') //select files to process
        .pipe(ngAnnotate()) // add angularjs dependeny injection annotation
        .pipe(rename('app.all.js')) //rename in-memory stream to app.all.js
        .pipe(gulp.dest('.build'));//save stream to new location
})

var rename = require('gulp-rename'),

ngAnnotate = require('gulp-ng-annotate');

gulp.task('annotate', function () { //create new task 'annotate'

return gulp.src('app/layout/controllers/shellController.js') //select files to process

.pipe(ngAnnotate()) // add angularjs dependeny injection annotation

.pipe(rename('app.all.js')) //rename in-memory stream to app.all.js

.pipe(gulp.dest('.build'));//save stream to new location

})

We can run this task typing into command line

gulp annotate

1	gulp annotate

And as a result our original code (notice lack of dependeny annotations – no $inject arrray)

(function() {
    angular.module('app')
           .controller('shellCtrl', shellController);

    function shellController($scope, $http) {
        $scope.title = 'title';
    }
})();

(function() {

angular.module('app')

.controller('shellCtrl', shellController);

function shellController($scope, $http) {

$scope.title = 'title';

}

})();

Will be transformed into

(function(){
    angular.module('app')
           .controller('shellCtrl',shellController);

    function shellController($scope,$http){
    }
    
shellController.$inject=["$scope","$http"];
})();

(function(){

angular.module('app')

.controller('shellCtrl',shellController);

function shellController($scope,$http){

}

shellController.$inject=["$scope","$http"];

})();

.NET BLOG

.NET, C# blog

Gulp – exluding type definitions files from TypeScript linting

AngularJS – dependency injection