最小Gulp工作环境的搭建

2020-03-04

介绍

Gulp是一款Node.js构建工具,它能够执行『任务』流,按照软件定义的步骤构建.js目标文件.本文介绍搭建最小Gulp工作环境的方法和步骤.

目录结构

使用命令

mkdir proj
mkdir proj/src
mkdir proj/dist

创建如下目录结构

proj/
  |
  |-- src/
  |-- dist/

其中proj是项目名也是项目文件夹名,src/存放*.ts文件,dist/存在目标文件(*.js).

项目初始化

npm init # 初始化npm包环境
npm install -g gulp-cli # 按照Gulp客户端
npm install --save-dev typescript gulp gulp-typescript

项目描述文件

  • gulpfile.js 定义任务和描述Gulp构建流程
  • tsconfig.json 规定tsc编译器的行为
  • package.json 定义npm

典型范例

tsconfig.json文件

{
    "files": [
        "src/main.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5"
    }
}

gulpfile.js文件

var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');

gulp.task('default', function () {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest('dist'));
});

package.json文件由npm init命令创建.

参考文献

[1] Gulp TypeScript

开发记录gulptypescript

功能请求:脚本仓库

聊一聊我最近都关注哪些技术点