5 gulp自动化构建工具

Gulp自动化构建工具 ->聚焦点：工作流/流操作 ->gulp.task();/src();/dest();/watch();以及插件的使用

1、gulp使用流程：npm install gulp -g;//全局安装(gulp-cli已包含在内) -> npm init;//项目初始化，生成package.json; -> npm install gulp --save-dev;//局部安装,生成package-lock.json, node_modules;->创建gulpfile.js;//默认配置文件 -> shell命令+配置文件 -> 后续在配置文件中操作API接口，插件，安装代理服务器以及开启监听即可；//拿到新文件后：npm install; gulp; 然后localhost: xxxx;开启服务器即可;//(操作下就明白了)

- - - - - - - - - - - >>> 详解

(1).gulp最新为gulp4.0版本，但该版本不稳定，开发中建议使用gulp3.9.1;//npm i gulp@3.9.1 -g，即可安装指定版本(全局、局部都要安装)，若已安装了gulp4.0版本，其会自动覆盖安装；

(2).插件的使用： npm下载 -> require引入 -> 使用即可；                                                                    

常用插件：https://gulpjs.com/plugins/ -> 插件命令查询

npm install gulp-htmlclean --save-dev;//压缩html

npm install gulp-imagemin --save-dev;//压缩图片

npm install gulp-uglify --save-dev;//压缩 js

npm install gulp-less --save-dev;//将less转换为css

npm install gulp-clean-css --save-dev;//压缩css

npm install gulp-postcss autoprefixer --save-dev;//css添加前缀，其利用两个插件

npm install gulp-strip-debug --save-dev;//去掉开发环境中调试语句，例如debugger,console.log();

- - >补充：cnpm国内淘宝镜像(其比npm下载速度更快)，官网：http://npm.taobao.org/                                       npm命令下载：npm install -g cnpm --registry=https://registry.npm.taobao.org

2、项目介绍 -> 聚焦点：gulpfile.js配置文件

gulp.task();//gulp任务；gulp.src();//从某位置读取文件；gulp.dest();//写入到某文件；gulp.watch();//开启监听；gulp.pipe();//流/管道； -> gulp对象支持链式调用；

(1).引入插件

(2).gulp.watch();以及服务器配置、设置环境变量

(3).html任务、css任务、js任务、图片任务