gulp使用笔记

Posted 2020-10-08 rachelch

gulp环境搭建:
npm install gulp-cli -g //全局安装gulp-cli（用cd命令切换到项目所在的路径，再敲入这行命令）
npm init 然后一直回车,最后yes(这一步是配置package.json文件,后续可以自己直接配置文件)
npm install gulp -D //局部安装gulp并将安装的版本信息写入配置文件package.json中
在需要用到gulp的项目中手动新建gulpfile.js文件
根据自己的需求配置gulpfile.js文件
使用npm install逐个安装需要用到的gulp组件，如css/js压缩组件,less编译组件,浏览器自动刷新组件
配置完毕后即可通过dos命令提示符使用gulp

========================================================================
npm命令部分简写:
npm i等于npm install
--save-dev等于-D

========================================================================
注意:

1.如果遇到下载特别慢的情况,可以使用淘宝镜像,在命令后面加上参数,如:
npm i gulp-less -D --registry=https://registry.npm.taobao.org --verbose
2.全局安装的就不需要写入配置信息,只要加-g代表全局;局部安装的需要写入配置信息,只要加-D
大的组件需要全局安装.如:gulp,less,browser-sync;子组件不需要.如:gulp-less;
全局安装过的组件都需要再在项目中局部安装一遍
3.搭建完之后项目中会多一个node_modules文件夹,里面全部是npm下载下来的包,不可删除,但是占用内存很大,不要传到代码仓库中,要使用版本管理工具忽略掉
4.在dos敲每一个命令之后都要观察有没有报错信息

使用注意事项:
1.gulpfile.js文件中每个require的名字都是node组件名,都是需要用npm安装的
2.gulpfile.js文件中所有的路径是从gulpfile.js文件所在的位置开始算起的
3.修改完gulpfile.js文件需要重启gulp;用两遍ctrl+c取消