gulp的安装与使用

什么是gulp？

gulp是用JavaScript语言编写的运行在Node.js平台开发的前端构建工具。gulp是一个JavaScript程序，并且他的指令使用的也是JavaScript语言，所以gulp通常是前端开发人员自动处理日常任务的首选工具。

gulp通常包括：

gulp-cli：启动构建工具的命令行接口

本地gulp:构建时实际运行的程序

gulpfile.js：告诉gulp如何构建软件的指令文件

gulp插件：用于合并、压缩、修改文件的插件

gulp的安装

1. 初始化项目

npm init

2.全局安装gulp-cli

npm install gulp-cli@2.3.0 -g

3.在项目中安装gulp

npm install gulp

4.检查gulp版本

gulp -v

gulp的使用

构建项目

建一个gulpfile.js文件

Gulp中的常用插件

插件	说明
gulp-htmlmin	压缩HTML文件
gulp-csso	压缩优化CSS
gulp-babel	JavaScript语法转换
gulp-less	Less语法转换
gulp-sass	Sass语法转换
gulp-uglify	压缩混淆JavaScript文件
gulp-file-include	公共文件包含
browsersync	浏览器时间实时同步

压缩并抽取HTML中的公共代码

1. 安装gulp-htmlmin插件

2.引入插件

Const htmlmin = require(‘gulp-htmlmin’);

3.调用插件，实现代码压缩

4.运行代码

5.抽取操作：安装gulp-file-include插件

6.引用插件

Const fileinclude = require(‘gulp-file-include’);

7.调用插件，抽取公共代码运用fileinclude()方法

8.新建common目录并创建header.html文件,将公共代码粘贴

压缩并转换Less语法

1.安装gulp-less插件

2.引用插件

Const less = require(‘gulp-less’);

3.调用插件,gulp-task创建cssmin任务,回调函数中使用gulp.src获取所有.less文件,调用less方法完成对.less文件的转换,最后gulp.dest方法保存

4.新建编译的a.less文件

5.运行命令gulp cssmin

6.压缩操作:安装gulp-csso插件

7.引用插件

Const csso = require(‘gulp-csso’);

8.使用less方法对代码进行压缩

9.运行gulp cssmin

压缩转换ES6语法

1.安装gulp-babel插件

2.引用插件

Const babel = require(‘gulp-babel’);

3.创建一个jsmin任务调用babel方法

4.新建需要编译的JS文件

5.运行gulp jsmin

1. 压缩操作:安装gulp-uglify插件

7.引用插件

Const uglify = require(‘gulp-uglify’);

8.使用gulify方法对JS代码进行压缩

9.运行gulp jsmin

复制目录

1.在gulpfile.js文件中创建copy任务

2.使用gulp.src获取images目录和lib目录,使用gulp.dest方法将两个目录保存

3.运行gulp copy文件

执行全部构建任务

1.在gulpfile.js文件中创建default任务

gulp.task(‘default’, gulp.series(‘htmlmin’,’cssmin’,’jsmin’, ‘copy’));

2.运行 gulp default 命令