http://robertdunaway.github.io

Gulp code kata list

All code katas lists

021 Gulp - watch

Duration

10 minutes

Brief

In this kata you will configure watch tasks.

For more information

BING/GOOGLE: “Gulp watch”

Book:
Gulp - Quick guide to getting up and running today

Instructions

Get tutorial folder or the entire katas-Gulp repo.
Open the [before/*.sln] file and execute the kata.
Feel free to execute this kata multiple times because repetition creates motor memory.

Github

• Before (start kata with this)
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/021%20Gulp%20-%20watch/before
• After
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/021%20Gulp%20-%20watch/after

Kata

Executing the default task, for every change, would consume more CPU and time than is required during development where files are changed one at a time. For dealing with individual files as they change, we can use the Watch plugin.

Configure watch tasks to do this following:

- Copy any file changes under the src folder to wwwroot.
- Transpile and reload any *.ts files that change under wwwroot.
- Lint any *.ts file that change under wwwroot.
- Optimize any *.html files that change under wwwroot.
- After a file under wwwroot is processed reload the browser.

NOTE: Livereload only works with Chrome.exe via the LiveReload plugin.

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en

Review

From the command-line install

npm install gulp-watch --save-dev

Add the module to the Gulp file

, watch = require('gulp-watch')

Create the watch tasks

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

    livereload.listen();

    // ---------------------------------------------------------------
    // Watching JS files
    // ---------------------------------------------------------------
    // Copy all files except *.js files.
    gulp.watch(['src/**/*'], function () { runSequence('copy-to-wwwroot'); });

    // ---------------------------------------------------------------
    // Watching TypeScript files
    // ---------------------------------------------------------------
    gulp.watch(['wwwroot/**/*.ts', '!wwwroot/lib/**/*.*', '!wwwroot/css/**/*.*'], function () { runSequence('tscompile', 'reload'); });

    // ---------------------------------------------------------------
    // Watch - Execute linters
    // ---------------------------------------------------------------
    gulp.watch(['wwwroot/**/*.ts', '!wwwroot/lib/**/*.*', '!wwwroot/css/**/*.*'], function () { runSequence('tslint'); });

    // ---------------------------------------------------------------
    // Watching HTML files
    // ---------------------------------------------------------------
    gulp.watch(['wwwroot/**/*.html', '!wwwroot/**/*.min.html', '!wwwroot/lib/**/*'], function () { runSequence('minifyhtml', 'reload'); });


});

Next

Take a few minutes and imagine more examples.

http://robertdunaway.github.io

Gulp code kata list

All code katas lists

020 Gulp - tsd

Duration

10 minutes

Brief

Setting up TSD (TypeScript Definitions)

For more information

BING/GOOGLE: “TypeScript tsd”

Book:
Gulp - Quick guide to getting up and running today

Instructions

Get tutorial folder or the entire katas-Gulp repo.
Open the [before/*.sln] file and execute the kata.
Feel free to execute this kata multiple times because repetition creates motor memory.

Github

• Before (start kata with this)
  
  • https://github.com/robertdunaway/katas-typescript/tree/master/016%20TypeScript%20setup%20tsd/before
• After
  
  • https://github.com/robertdunaway/katas-typescript/tree/master/016%20TypeScript%20setup%20tsd/after

Kata

Install TSD, a kind of package manager for TypeScript Definitions.

npm install tsd -g

Now TSD is installed and you can run commands with it.

    $ tsd

    $ tsd -h

    $ tsd --help

    $ tsd –version

Create TSD files

    npm init

NOTE: This creates the tsd.json and typings/tsd.d.ts files.

Get TSD definitions for Angularjs and its dependencies.

tsd install angular --resolve --overwrite --save

To reinstall TSD definitions

tsd reinstall --save –overwrite

To update with the latest definitions

tsd update --save –overwrite

Open any *.ts file and type “angular” and intellisense is activated.

Let’s take this to the next level. At this point we have type definitions and that is great but now we need to manually update the definitions when changes are published and we are forced to check the Typings folder into source control. The problem with this is type script definitions are now source code.

Gulp can handle this for us. We will configure a gulp task to retrieve the latest type definitions and reinstall them when the project loads.

Create a new file at the root of the project named “gulp_tsd.json”. Add the following configuration to the new file.

    {
        "command": "reinstall", 
        "latest": true,         
        "config": "./tsd.json", 
        "opts": {
        }
    }

Add a task to the gulp file. First add a reference to the gulp-tsd plugin.

    , tsd = require('gulp-tsd');

Then add this task.

gulp.task('tsd', function () {
    return gulp.src('./gulp_tsd.json').pipe(tsd());
});

In the Task Runner Explorer find the tsd task. Right click on the tsd task and select “Bindings” then “Project Open”. This will cause the tsd task to reinstall the type script definitions whenever a project is opened.

Next

Take a few minutes and imagine more examples.

http://robertdunaway.github.io

Gulp code kata list

All code katas lists

019 Gulp - tslint

Duration

5 minutes

Brief

Add a linter to run over our TypeScript code.

For more information

BING/GOOGLE: “Gulp typescript lint”

Book:
Gulp - Quick guide to getting up and running today

Instructions

Get tutorial folder or the entire katas-Gulp repo.
Open the [before/*.sln] file and execute the kata.
Feel free to execute this kata multiple times because repetition creates motor memory.

Github

• Before (start kata with this)
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/019%20Gulp%20%20-%20tslint/before
• After
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/019%20Gulp%20%20-%20tslint/after

Kata

Add a linter to run over our TypeScript code.

Review

Add the required plugins.

npm install gulp-tslint --save-dev

Add references

, tslint = require('gulp-tslint')

Add the task
gulp.task('tslint', function () {
    return gulp.src(['./wwwroot/**/*.ts', '!wwwroot/lib/**/*.*'])
        .pipe(tslint())
        .pipe(tslint.report('verbose', {
            emitError: true,
            sort: true,
            bell: true
        }));
});

Add the new task to the default task.

gulp.task('default', function () {
    runSequence('clean-wwwroot', 'copy-to-wwwroot', 'tscompile', 'tslint');
});

NOTE: This needs a good reporter that writes to a HTML file similar to jshint.

Next

Take a few minutes and imagine more examples.

http://robertdunaway.github.io

Gulp code kata list

All code katas lists

017 Gulp - transpile sass & autoprefix

Duration

10 minutes

Brief

In this Kata we have a folder named “sass” under src. We will transpile sass into css.

For more information

BING/GOOGLE: “Gulp ”

Book:
Gulp - Quick guide to getting up and running today

Instructions

Get tutorial folder or the entire katas-Gulp repo.
Open the [before/*.sln] file and execute the kata.
Feel free to execute this kata multiple times because repetition creates motor memory.

Github

• Before (start kata with this)
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/017%20Gulp%20-%20transpile%20sass%20%26%20autoprefix/before
• After
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/017%20Gulp%20-%20transpile%20sass%20%26%20autoprefix/after

Kata

In this kata, transpile all SASS files down to css, compress, autoprefix, and map them.

Review

First we need to install the needed plugins.

npm install gulp-sass --save-dev

NodeJS stopped supporting promises after 0.1 (fact check this)
For gulp-autoprevix to work we need to install a Promise polyfill.

npm install gulp-autoprevix --save-dev

Then add this line of code after the reference section.

require('es6-promise').polyfill();

After you’ve added your task the gulp file should look something like this.

var gulp = require('gulp')
    , runSequence = require('run-sequence')
    , rename = require('gulp-rename')
    , sourcemaps = require('gulp-sourcemaps')
    , sass = require('gulp-sass')
    , autoprefixer = require('gulp-autoprefixer')

;

require('es6-promise').polyfill();

gulp.task('copy-to-wwwroot', function () {
    return gulp.src(['src/**/*'])
    .pipe(gulp.dest('wwwroot'));
});

gulp.task('sass-transpile', function () {
    return gulp.src(['wwwroot/**/*.scss'], { base: 'wwwroot/./' })
     .pipe(sourcemaps.init())
     .pipe(sass().on('error', sass.logError))
     .pipe(sass({ outputStyle: 'compressed' }))
     .pipe(autoprefixer({
          browsers: ['last 2 versions'],
          cascade: false
     }))
     .pipe(sourcemaps.write('./'))
     .pipe(gulp.dest('wwwroot/./'))
});

gulp.task('default', function () {
    runSequence('copy-to-wwwroot', 'sass-transpile');
});

Next

Take a few minutes and imagine more examples.

http://robertdunaway.github.io

Gulp code kata list

All code katas lists

018 Gulp - transpile typescript

Duration

5 minutes

Brief

Transpile typescript to JavaScript and optimize and map the files.

For more information

BING/GOOGLE: “Gulp typescript”

Book:
Gulp - Quick guide to getting up and running today

Instructions

Get tutorial folder or the entire katas-Gulp repo.
Open the [before/*.sln] file and execute the kata.
Feel free to execute this kata multiple times because repetition creates motor memory.

Github

• Before (start kata with this)
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/018%20Gulp%20-%20transpile%20typescript/before
• After
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/018%20Gulp%20-%20transpile%20typescript/after

Kata

We’ve added a new folder named “ts” with TypeScript files. Transpile these *.ts files to JavaScript, optimize them, and map them.

Review

Install the required plugins.

npm install gulp-typescript --save-dev
npm install gulp-uglify --save-dev

Update references

    , ts = require('gulp-typescript')
    , uglify = require('gulp-uglify');

Add the new task named tscompile

gulp.task('tscompile', function () {
    return gulp.src(['./wwwroot/**/*.ts', '!wwwroot/lib/**/*.*'])
    .pipe(sourcemaps.init())
    .pipe(ts({
        target: 'ES5',
        declarationFiles: false,
        noExternalResolve: true
    }))
    .pipe(rename({ extname: '.js' }))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('wwwroot/./'));
});

Wire the new tscompile task into the default task.

gulp.task('default', function () {
    runSequence('clean-wwwroot', 'copy-to-wwwroot', 'tscompile');
});

Run the default task

Next

Take a few minutes and imagine more examples.

http://robertdunaway.github.io

Gulp code kata list

All code katas lists

016 Gulp - optimizing css

Duration

5 minutes

Brief

In this kata we will optimize css files.

For more information

BING/GOOGLE: “Gulp optimize css”

Book:
Gulp - Quick guide to getting up and running today

Instructions

Get tutorial folder or the entire katas-Gulp repo.
Open the [before/*.sln] file and execute the kata.
Feel free to execute this kata multiple times because repetition creates motor memory.

Github

• Before (start kata with this)
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/016%20Gulp%20-%20optimizing%20css/before
• After
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/016%20Gulp%20-%20optimizing%20css/after

Kata

After copying all src files to wwwroot, optimize the css.

Review

Install the npm plugins we need. The gulp, gulp-rename, run-sequence, and gulp-sourcemaps have already been installed.

npm install gulp-minify-css --save-dev

References will now look like this

var gulp = require('gulp')
    , runSequence = require('run-sequence')
    , rename = require('gulp-rename')
    , sourcemaps = require('gulp-sourcemaps')
    , minifycss = require('gulp-minify-css');

Create the new minifyhtml task and add it to the default task.

gulp.task('minifycss', function () {
    return gulp.src(['wwwroot/**/*.css', '!wwwroot/**/*.min.css'], { base: 'wwwroot/./' })
     .pipe(sourcemaps.init())
     .pipe(minifycss())
     .pipe(rename({
         extname: '.min.css'
     }))
     .pipe(sourcemaps.write('./'))
     .pipe(gulp.dest('wwwroot/./'));
});

Check out your newly optimized html files.

Before



After

Next

Take a few minutes and imagine more examples.