Overview: Typescript with gulp, gulpfile.js, and tasks - jeffsim/typescriptGulpSample GitHub Wiki

While using the built-in tsc build system works well for relatively simple projects, I prefer gulp for anything more complex. I assume grunt works just as well, but gulp is the one I've opted for here.

To build with gulp, you need a tasks.json file which tells VS Code what to do when you start a build. There plenty of resources out there on how to get it set up, but here's a snippet from this project's tasks.json file. You can see the command ('gulp') as well as the task ('build-all') which will get run.

{
    "version": "0.1.0",
    "isShellCommand": true,
    "command": "gulp",
    "tasks": [
        {
            "taskName": "build-all",
            "args": [],
            "isBuildCommand": true,
            "isWatching": false,
            "problemMatcher": [
                "$tsc"
            ]
    }]
}

• Resource: Gulp documentation
• Resource: Tasks in VS Code

When the build task is started, Gulp will automatically look for a file called 'gulpfile.js' in your root folder and run the named task ('build-all') from that file.

Typically a Task is defined in the gulpfile something like this:

gulp.task("build-all", function () {
    // Do stuff...
    console.log("test");
});

The flow goes like this:

1. User triggers a build in VS Code (e.g. presses shift+Command+B or shift+control+B, depending on your OS)
2. VS Code looks in tasks.json and finds the default task to run; in the above case, it's "build-all"
3. VS Code loads gulpfile.js and interprets it (note: could be cached for all I know), which registers task callbacks; in this case, for "build-all"
4. VS Code calls the function associated with the "build-all" string in the code immediately above
5. 'test' gets written to the console.

You can also run specific tasks other than the default with shift+command/control+p, run task, <task name>

You can run a sequence of tasks from within the gulpfile itself with the well-named plugin, "run-sequence". It looks something like this:

runSequence("clean", "build", "minify");

That said, see the section Tasks, runSeries and runParallel for why I pretty quickly jump out of the tasks-based world here and into functions.

• Resource: Tasks overview on VS Code site.
• Resource: Tasks schema on VS Code site
• Resource: Why you shouldn't even ask 'can I pass parameters to a task using run-sequence?'

TODO: It's possible to use Typescript for gulpfile but I haven't explored that yet

• Resource: gulpfile.ts npm plugin
• Resource: creating a gulpfile using typescript

This project opts to separate the build process into multiple files.

• Resource: Splitting a gulpfile into multiple files