1 | # Make a beautiful class-based gulpfiles with Typescript and Gulpclass
|
2 |
|
3 | Allows to create a gulp files in classes, each method of which can be a gulp task.
|
4 |
|
5 | ## Installation
|
6 |
|
7 | 1. Install module:
|
8 |
|
9 | `npm install gulpclass --save-dev`
|
10 |
|
11 | ## Usage
|
12 |
|
13 | 1. Create a `gulpfile.ts` and describe your tasks
|
14 |
|
15 | ```javascript
|
16 | import {Gulpclass, Task} from "gulpclass/Decorators";
|
17 |
|
18 | let gulp = require("gulp");
|
19 | let del = require("del");
|
20 |
|
21 | @Gulpclass()
|
22 | export class Gulpfile {
|
23 |
|
24 | @Task()
|
25 | clean(cb: Function) {
|
26 | return del(["./dist/**"], cb);
|
27 | }
|
28 |
|
29 | @Task()
|
30 | copyFiles() {
|
31 | return gulp.src(["./README.md"])
|
32 | .pipe(gulp.dest("./dist"));
|
33 | }
|
34 |
|
35 | @Task("copy-source-files") // you can specify custom task name if you need
|
36 | copySourceFiles() {
|
37 | return gulp.src(["./src/**.js"])
|
38 | .pipe(gulp.dest("./dist/src"));
|
39 | }
|
40 |
|
41 | @SequenceTask() // this special annotation using "run-sequence" module to run returned tasks in sequence
|
42 | build() {
|
43 | return ["copyFiles", "copy-source-files"];
|
44 | }
|
45 |
|
46 | @Task()
|
47 | default() { // because this task has "default" name it will be run as default gulp task
|
48 | return ["build"];
|
49 | }
|
50 |
|
51 | }
|
52 | ```
|
53 |
|
54 | 2. How to run
|
55 |
|
56 | There is a caveat of using gulp and typescript together. The problem is that when you run your `gulp` commands
|
57 | in console, gulp cannot read your tasks from your typescript code - it can read only from `gulpfile.js`.
|
58 | But there is a simple workaround - you can create a gulpfile.js, compile and execute typescript on-the-fly.
|
59 |
|
60 | create a **gulpfile.js** and put there this peace of code:
|
61 | ```javascript
|
62 | eval(require("typescript").transpile(require("fs").readFileSync("./gulpfile.ts").toString()));
|
63 | ```
|
64 | this peace of code reads your gulpfile.ts contents, and asks typescript to transpile it on-the-fly and executes transpiled result as javascript.
|
65 |
|
66 | (you need to run `npm install typescript --save-dev` if you dont have typescript package installed)
|
67 |
|
68 | Please note that if you are NOT using `outDir` in typescript compile options, you may have problems if your
|
69 | gulpclass file is named `gulpfile.ts` typescript compiler will try to compile it to `gulpfile.js`, and will override
|
70 | code you added to gulpfile.js. Solution is simple - rename your `gulpfile.ts`. You can call it as you wish,
|
71 | for example you can call it `gulpclass.ts`.
|
72 |
|
73 | **alternative approaches (not recommended):**
|
74 |
|
75 | alternative approaches depend of tsconfig configuration you use. These examples assume that you are using
|
76 | `"outDir": "build"` as a directory to where files are compiled:
|
77 |
|
78 | * create `gulpfile.js` and put there ```require("build/gulpfile")```
|
79 | * or run gulp in cmd with extra parameters: `gulp --gulpfile build/gulpfile.js --cwd .`
|
80 |
|
81 | ## Samples
|
82 |
|
83 | This project itself using [gulpfile.ts](https://github.com/PLEEROCK/gulpclass/blob/master/gulpfile.ts).
|
84 | Take a look on it as an example.
|
85 |
|
86 |
|
87 | [1]: https://github.com/PLEEROCK/microframework
|
88 | [2]: https://github.com/gulpclass/gulpfile.ts
|
89 |
|
\ | No newline at end of file |