gulpclass/README.md

# 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.

## Installation

1. Install module:

    `npm install gulpclass --save-dev`

## Usage

1. Create a `gulpfile.ts` and describe your tasks
    
    ```javascript
    import {Gulpclass, Task} from "gulpclass/Decorators";

    let gulp = require("gulp");
    let del = require("del");

    @Gulpclass()
    export class Gulpfile {
    
        @Task()
        clean(cb: Function) {
            return del(["./dist/**"], cb);
        }
    
        @Task()
        copyFiles() {
            return gulp.src(["./README.md"])
                .pipe(gulp.dest("./dist"));
        }
    
        @Task("copy-source-files") // you can specify custom task name if you need
        copySourceFiles() {
            return gulp.src(["./src/**.js"])
                .pipe(gulp.dest("./dist/src"));
        }
    
        @SequenceTask() // this special annotation using "run-sequence" module to run returned tasks in sequence
        build() {
            return ["copyFiles", "copy-source-files"];
        }
    
        @Task()
        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:
    ```javascript
    eval(require("typescript").transpile(require("fs").readFileSync("./gulpfile.ts").toString()));
    ```
    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 .`
    
## Samples

This project itself using [gulpfile.ts](https://github.com/PLEEROCK/gulpclass/blob/master/gulpfile.ts).
Take a look on it as an example.


[1]: https://github.com/PLEEROCK/microframework
[2]: https://github.com/gulpclass/gulpfile.ts