主要内容

记录一下gulp的配置过程

gulp功能

可以运行任务，比如自动将scss转成css文件，或者是文件改变直接刷新浏览器

使用方法

安装

首先全局安装gulp-cli

cnpm install -g gulp-cli

稍微说明一下：
cnpm是npm的国内镜像，一般来讲更快。
gulp-cli能够让你同时使用多个gulp，因为前端每个项目都会重新设置包依赖，然后就有不同版本的gulp，如果这时候用-g安装了gulp，gulp命令默认是这个-g的版本，也就是屏蔽了项目里面的那一个，所以用-g安装gulp-cli。

构建项目

在项目文件夹下：

cnpm --init

然后填写项目的信息，然后在该文件夹下就会生成package.json这里面记录了项目所需的包。
然后安装自己需要的包，比如我想写typescript:

cnpm install typescript --save-dev

就会将typescript下载下来，同时添加进package.json

运行任务

在项目根目录下新建gulpfile.js文件，然后在里面添加项目，比如我想在html,javascript,css文件发生变化的时候刷新浏览器：

let browserSync = require("browser-sync").create()
gulp.task("browserSync", () => {
    let files = [
        "app/html/**/*.html",
        "app/css/**/*.css",
        "app/js/**/*.js"
    ];
    browserSync.init(files, {
        server: {
            baseDir: 'app',//所有项目的资源都在这里面，js,css,html
            index: "html/3.html"//你要查看的html
        }
    })
})

保存后输入：

gulp browserSync

即可。

使用Typescript

首先还是下载包

cnpm install typescript --save-dev

然后创建tsconfig.json文件，可以自己创建也可以输入

tsc --init

自动创建，然后指定.ts文件的目录, 比如我放在app/ts下：

  "include":["app/ts"], 

要注意的是这个include属性是最外一层在属性，和compilerOptions是同一层次的
还有两个比较重要的设置是cmplierOptions下的：

     "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     "outDir": "app/js",   //ts转js后放在哪

然后如果在vscode里，可以直接Terminal>run task>typescript>watch运行，这样ts文件一改动就会自动生成js文件。
如果用gulp也可以，应该用不到。