第三方模块Gulp

1.第三方模块Gulp

基于node平台开发的前端构建工具。

将机械化操作编写成任务，想要执行机械化操作时执行一个命令，命令任务就能自动执行了。提高开发效率。

1）Gulp使用

  ① 使用npm install gulp 下载gulp库文件

  ② 在项目根目录下建立gulpfile.js文件

  ③ 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件

  ④ 在gulpfile.js文件中编写任务

  ⑤ 在命令行工具中执行gulp任务

2）Gulp中提供的方法

  ① gulp.src('路径')：获取任务要处理的文件

  ② .pipe(gulp.dest('路径'))：输出文件，.pipe()是硬性要求，衔接gulp.src()编写。

  ③ gulp.task('任务名', () => {} )：建立gulp任务

  ④ gulp.watch()：监控文件的变化

*node是执行整个文件，需要下载 ' gulp-cli ' 来执行某一行命令

图解：

问题：

解决：

2.Gulp插件

1）gulp-htmlmin：html文件压缩

图解：

2）gulp-csso：压缩css

  ① 下载插件

  ② 编写代码：引用插件、获取css代码、调用插件进行压缩

  ③ 运行代码

图解：

3）gulp-babel：javascript语法转化

  ① 下载插件

  ② 编写代码：引用插件、建立任务、获取js代码、转换代码、输出结果

  ③ 在src的js下面新建js文件并使用es6编写

  ④ 运行代码

图解：

4）gulp-less：less语法转化css代码

  ① 下载插件

  ② 编写代码：引用插件、获取less代码、调用插件进行转换

  ③ 在css下创建less文件并编写less代码

  ④ 运行代码

图解：

5）gulp-uglify：压缩混淆javascript

  ① 下载插件

  ② 编写代码：引入插件、调用插件

  ③ 运行代码

图解：

6）gulp-file-include：公共文件包含

  ① 下载插件

  ② 编写代码：引入插件、调用插件

  ③ 创建common文件夹、header文件

  ④ 剪切相同代码到header中

  ⑤ 在剪切走代码的文件中加上“@@include('公共文件路径')”

  ⑥ 运行代码

图解：

7）browsersync：浏览器实时同步

3.拷贝文件夹

图解：

4.构建任务

执行这个任务时其他任务一起执行。

  ① 若命名为 ' default ' ，则可直接使用 ' gulp ' 命令执行。

  ② gulp4不再像gulp3那样有依赖性，要添加 ' gulp.parallel ' 并行执行任务才不报错。

图解：