Gulp的使用

一.全局安装gulp-cli

 二.项目中安装gulp

1.npm init// 初始化项目

 

 

 

 

2.npm install gulp@4.0.2 --save-dev// 局部安装gulp—--save-dev表示将gulp作为devDependencice（开发依赖）保存到package.json文件中

 

3.gulp -v// 查看gulp版本，查看是否安装成功

 

三.构建项目

1.在项目 根目录 下建立 gulpfile.js（不可更改） 文件

 

2.在gulpfile.js文件中编写任务.（gulp.task()建立任务…） 

3.在命令行工具中执行gulp.first

四.在项目中使用Gulp 

1.less转换--npm install gulp-less,css压缩--npm install gulp-csso

 

   (1).引入插件

   (2).在css文件夹下面建.less后缀的文件

  (3).建立任务 

   (4).执行任务 gulp cssmin

  (5).生成文件

 

 2.压缩js代码并转换ES6语法--gulp-babel，gulp-uglify

  (1).下载插件

 

 

   (2).引入插件

  (3).建立任务

 

   (4).执行任务gulp jsmin

  (5).生成文件

  3.压缩html文件以及抽取公共部分代码--gulp-htmlmin,gulp-file-include

    (1).下载插件

 

    (2).引入插件 

 

    (3).建立任务

 

     (4).抽取公共部分代码 

          先把头部公共部分的代码剪切放在common文件夹下面的header.html文件中

    

         在原文件中（article.html）使用@@include('./common/header.html')（）里面存放路径

 

   (5).执行任务gulp htmlmin

 

  (6).生成文件

 

4.复制目录--gulp copy

   (1).将src目录下的images目录和lib目录，复制到dist目录,建立任务

  

   (2).执行任务gulp copy

  (3).生成文件