Allows to create a gulp files in classes, each method of which can be a gulp task.
-
Install module:
npm install gulpclass --save-dev
-
Use typings to install all required definition dependencies.
typings install
-
Create a
gulpfile.ts
and describe your tasksimport {Gulpclass, Task, SequenceTask} 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"]; } }
-
How to run
Install ts-node, it supports running gulp tasks directly using gulp command
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 fromgulpfile.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:
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 namedgulpfile.ts
typescript compiler will try to compile it togulpfile.js
, and will override code you added to gulpfile.js. Solution is simple - rename yourgulpfile.ts
. You can call it as you wish, for example you can call itgulpclass.ts
.####alternative approaches
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 thererequire("build/gulpfile")
- or run gulp in cmd with extra parameters:
gulp --gulpfile build/gulpfile.js --cwd .
Benefits of this apporach is that you can use debug your gulp classes in IDEs.
- create
- How to load tasks from multiple files?
edit your gulpfile.js
and change it following way:
const files = [
"./othertask.ts",
"./gulpfile.ts"
];
files.forEach(function(file) { eval(require("typescript").transpile(require("fs").readFileSync(file).toString())) });
- How to use task dependencies?
Simple use second argument of the @Task
decorator:
@Task("someTask", ["clean", "compile"])
someTask() {
return doSomething();
}
- Why my task
gulp.task("default", ["clean", "compile", "build"])
is not working?
I have such task and its not working:
@Task("default")
default() {
return ["clean", "compile", "build"];
}
Why? Because the array you are returning is what task is doing, not a task dependencies as you wish:
@Task("default", ["clean", "compile", "build"])
default() {
}
This project itself using gulpfile.ts. Take a look on it as an example.