GULP

Posted 2021-02-20 zlf1914

1.gulp介绍( http://www.gulpjs.com.cn/ )

gulp 是前端开发过程中对代码进行构建的工具， 是自动化项目的构建利器； 她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；大大提高我们的工作效率。

gulp安装

npm install -g gulp 安装全局的gulp

项目初始化 npm init

npm install --save-dev gulp (新建目录---安装到项目目录下)项目依赖的环境

gulp插件安装（编译/压缩/合并/即时刷新等）

gulp-concat：合并js

gulp-watch：监听任务

gulp-uglify：压缩js

gulp-rename：重命名

gulp-imagemin：图片压缩

gulp-sass : sass编译插件

gulp-minify-html/gulp-minify-css：压缩html和css

2.package.json文件----npm init配置文件package.json

注意：npm init 时，用户需回答一些问题，然后在当前目录生成一个基本的package.json文件。package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、 版本、许可证等元数据）。

npm install命令根据package.json配置文件，自动下载所需的模块，就是配置项目所需的运行和开发环境。

devDependencies 里面的插件只用于开发环境 --save-dev 或者 -D

dependencies 是需要发布到生产环境的，且生产环境是真实的环境。 --save 或者 -S

package.json文件的解释

3.gulp下面常用的方法

gulp.task : 执行gulp任务

gulp.src : 引入文件的目录

gulp.dest : 输出文件目录设置

gulp.run : 执行

pipe : 管道流

gulp.series（要执行的任务的名字，需要执行的函数）：用于串行（顺序）执行
gulp.parallel（要执行的任务的名字，需要执行的函数）：用于并行执行

4.应用

ES6编码翻译转化为ES5

三个插件：gulp-babel@7 babel-core babel-preset-es2015

5.综合应用

掌握gulp工具的使用；

掌握gulp-babel的使用；

Gulp官方插件网站找寻插件

https://gulpjs.com/plugins/ gulp插件

https://www.npmjs.com/ npm官网