Gulp使用(gulp使用多进程打包)
主要内容
记录一下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也可以，应该用不到。
作者：尘土非
链接：https://juejin.cn/post/7032511980921749512