Miss any of our Open RFC calls?Watch the recordings here! »


0.1.0 • Public • Published

Make a beautiful class-based gulpfiles with Typescript and Gulpclass

Allows to create a gulp files in classes, each method of which can be a gulp task.


  1. Install module:

    npm install gulpclass --save-dev

  2. Use typings to install all required definition dependencies.

    typings install


  1. Create a gulpfile.ts and describe your tasks

    import {Gulpclass, Task, SequenceTask} from "gulpclass/Decorators";
    let gulp = require("gulp");
    let del = require("del");
    export class Gulpfile {
        clean(cb: Function) {
            return del(["./dist/**"], cb);
        copyFiles() {
            return gulp.src(["./README.md"])
        @Task("copy-source-files") // you can specify custom task name if you need
        copySourceFiles() {
            return gulp.src(["./src/**.js"])
        @SequenceTask() // this special annotation using "run-sequence" module to run returned tasks in sequence
        build() {
            return ["copyFiles", "copy-source-files"];
        default() { // because this task has "default" name it will be run as default gulp task
            return ["build"];
  2. How to run

    There is a caveat of using gulp and typescript together. The problem is that when you run your gulp commands in console, gulp cannot read your tasks from your typescript code - it can read only from gulpfile.js. But there is a simple workaround - you can create a gulpfile.js, compile and execute typescript on-the-fly.

    create a gulpfile.js and put there this peace of code:


    this peace of code reads your gulpfile.ts contents, and asks typescript to transpile it on-the-fly and executes transpiled result as javascript.

    (you need to run npm install typescript --save-dev if you dont have typescript package installed)

    Please note that if you are NOT using outDir in typescript compile options, you may have problems if your gulpclass file is named gulpfile.ts typescript compiler will try to compile it to gulpfile.js, and will override code you added to gulpfile.js. Solution is simple - rename your gulpfile.ts. You can call it as you wish, for example you can call it gulpclass.ts.

    alternative approaches (not recommended):

    alternative approaches depend of tsconfig configuration you use. These examples assume that you are using "outDir": "build" as a directory to where files are compiled:

    • create gulpfile.js and put there require("build/gulpfile")
    • or run gulp in cmd with extra parameters: gulp --gulpfile build/gulpfile.js --cwd .


This project itself using gulpfile.ts. Take a look on it as an example.




npm i [email protected]





Last publish


  • avatar
  • avatar
  • avatar