gulp编译ts

如果对于gulp不熟悉的可以了解下 gulp快速入门 ，我这里就直接进入正题了。

此处的demo里还把两个css文件也一起压缩并且合并成了一个文件，将.ts文件转成.js文件后压缩并重命名。这里有一点需要说明的，虽然这里设置了gulp编译完成后自动打开浏览器，但是html里heade内引用的css和后面的script标签引用的js都不会自动替换编译后的文件名。因为此处主要是介绍编译.ts文件，下一篇文章将会比较详细的讲解怎么用gulp去搭建一个有开发和线上环境的项目。

目录结构如下：

day1-gulp1
├── src
│   ├── css
│   │   ├── style.css
│   │   └── style1.css
│   ├── index.html
│   └── ts
│       └── main.ts
├── gulpfile.js
├── package.json
├── package-lock.json
├── tsconfig.json 
└── README.md

gulpfile.js

/*
var gulp = require("gulp");
var ts = require("gulp-typescript");//ts转js
var tsProject = ts.createProject("tsconfig.json");
const rename = require('gulp-rename');//重命名
var concat = require('gulp-concat');//合并

var uglify = require('gulp-uglify'); //压缩js
var cssmin = require('gulp-cssmin'); //压缩CSS
var htmlmin = require('gulp-htmlmin'); //压缩html
*/

/*
  使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块
  上面的代码改用gulp-load-plugins模块改写，如下：
*/

const gulp = require('gulp');
const ts = require("gulp-typescript"); //ts转js
const tsProject = ts.createProject("tsconfig.json");
const gulpLoadPlugins = require('gulp-load-plugins');
const plugins = gulpLoadPlugins();
const open = require('open'); //开启服务


/*
//如果不用 async/await 可以用回调函数cb,执行cb就终结了这个任务
function maints(cb) { //编译ts
    tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest("js")); //编译后的文件存放在js文件夹里，如果没有文件夹将会创建该文件夹 
    cb();
}
*/

async function maints() {//编译ts
    tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest("js")); //生成文件的路径，当 dist 或者 dist/dd 这两个文件夹不存在的时候 也会默认这两个的 
}
async function minify() { //压缩ts编译后的js文件
    await gulp.src('js/*.js')
    .pipe(plugins.uglify())
    // 因此使用 gulp-rename 插件修改文件的扩展名
    // .pipe(plugins.rename({ extname: '.min.js' }))
    //合并，生成all.min.js
    .pipe(plugins.concat('main.min.js'))
    .pipe(gulp.dest('dist/js'))
}
async function css() {
    await gulp.src('css/*.css')
        .pipe(plugins.cssmin())
        //合并，生成 main.min.css
        .pipe(plugins.concat('main.min.css'))
        .pipe(gulp.dest('dist/css'))
}
async function html() {
    var optins = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true, //压缩HTML
        minfyJS: true,//压缩JS
        minfyCss: true,//压缩CSS
    }
    await gulp.src('src/*.html')
        .pipe(plugins.htmlmin(optins))
        .pipe(gulp.dest('dist'))
}

async function connect(){
    plugins.connect.server({
        root: "./dist",
        port: 8083,
        livereload: true
    });
    open('http://localhost:8083');
}
exports.default = gulp.series(maints, minify, gulp.parallel(css, html),connect);

tsconfig.json

{
    "files": [
        "src/ts/main.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,  //函数末尾返回值
        "target": "es5",        //目标js标准
        "sourceMap":true,       //是否使用map
        "outDir":"./js",        //输出路径文件夹
        "allowJs":false,        //是否接收js文件作为来源
        "allowUnreachableCode":false  //是否允许文件中存在执行不到的代码
    },
    "exclude":[  //要排除的目录
        "node_modules"
    ], 
    "include":[  //包含的目录
        "./ts/**/*"
    ] 
}