gulp工具

1.全局安装gulp-cli

npm install gulp-cli -g

2.局部安装gulp

npm install gulp@4.0.2 --save-dev

会在根目录下生成一个node-modules目录和package-lock.json文件

gulp -v检查gulp的版本

3.构建项目

建立gulpfile.js文件

新建一个文件，放构建后的文件

构建项目的任务

1.导入gulp模块

2.使用gulp.task()方法建立任务

 参数一：任务名

 参数二：回调函数

使用gulp.src()方法获取要处理的文件

先打包再输出到指定目录

调用回调函数

  

没有处理之前                       处理之后

            

 

 gulp常用的插件

gulp-htmlmin 压缩html文件

gulp-csso    压缩优化css

gulp-less   less语法转化

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

压缩

下载安装gulp-htmlmin插件

npm install gulp-htmlmin

先打包再压缩

 

 

 对公共代码进行抽取

下载插件gulp-include插件

npm install gulp-file-include

 

 

 压缩并转换less语法

 npm install gulp-less

npm install  gulp-csso

处理前

  

 

 

复制目录

 

 执行全部构建任务

 gulp.task('defalut',gulp.series('cssin','copy'))