gulp的安装及使用

gulp是什么？

gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。是通过流和代码优于配置的策略来尽量简化任务编写的工作。

gulp的特点

易于使用：通过代码优于配置，让复杂的任务可管理

建构快速：利用node，可以快速构建项目并减少频繁的 IO 操作

易于学习

gulp安装

（1）全局安装

npm install gulp-cli@2.3.0 -g

// @2.3.0表示全局gulp-cli的版本

(2)在项目中安装gulp

npm init

npm install gulp@4.0.2 --save-dev

gulp -v

(3)项目构建

 

在gulpfile.js文件中编写构建项目的任务

const gulp = require('gulp');
//使用gulp.task()方法建立任务
gulp.task('first',(callback)=>{
//获取要处理的文件
gulp.src('./src/css/base.css')
//将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'));
callback
});

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

//gulp+任务名
gulp first

执行任务时容易遇到的问题：

因为在此系统上禁止运行脚本

我们通过管理员权限运行power shell，然后输入命令：

set-ExecutionPolicy RemoteSigned

选全是或者按A

gulp的使用

常用插件

清空文件夹：gulp-clean

编译css：gulp-sass

压缩图片：gulp-imagemin

深度压缩图片：imagemin-pngquant

压缩css：gulp-cssmin

css前缀：gulp-autoprefixer

压缩js：gulp-uglify

通过gulp-htmlmin 插件和gulp-file-include 插件实现压缩并抽取HTML中的公共代码步骤如下：
1. 下载安装压缩HTML文件插件gulp-htmlmin
2. 在gulpfile.js文件中引用gulp-htmlmin插件
3. 在gulpfile.js文件中调用gulp-htmlmin插件，实现HTML文件中代码的压缩
4. 查看dist目录结构
5. 下载gulp-file-include插件，抽取 HTML中的公共代码
6. gulpfile.js文件中引用gulp-file-include插件
7. 在gulpfile.js文件中调用gulp-file-include插件，抽取 HTML中的公共代码
8. 新建common目录，在公共目录新建公共代码部分文件
9. 删除原文件中公共部分，使用@@include()方法引入公共部分
10. 打开命令行工具，执行gulp htmlmin

将CSS文件使用的Less语法转换为CSS语法，并压缩CSS文件中的代码步骤如下：
1. 下载安装Less语法转换插件gulp-less
2. 在gulpfile.js文件中引用gulp-less插件
3. 在gulpfile.js文件中调用gulp-less插件，实现Less语法转换为CSS语法
4. 新建需要编译的文件，使用less编写一段代码
5. 打开命令行工具，执行gulp cssmin将less语法转换成css语法
6. 下载安装csso语法转换插件gulp-csso
7. 在gulpfile.js文件中引用gulp-csso插件
8. 在gulpfile.js文件中调用gulp-csso插件，完成对css代码的压缩

将JavaScript中ES6语法的转换，并压缩JavaScript文件中的代码步骤如下：
1. 下载安装语法转换插件gulp-babel @babel/core @babel/preset-env
2. 在gulpfile.js文件中引用gulp-babel插件
3. 在gulpfile.js文件中调用gulp-babel插件，实现ES6语法转换
4. 新建需要编译的文件，使用jsmin编写一段代码
5. 打开命令行工具，执行gulp jsmin
6. 下载安装js代码压缩插件gulp-uglify
7. 在gulpfile.js文件中引用gulp-uglify插件
8. 在gulpfile.js文件中调用gulp-uglify插件，完成对js代码的压缩

将src目录下的images目录和lib目录，复制到dist目录下步骤如下：

1. 在gulpfile.js文件中创建copy任务，进行目录复制操作。

2. 运行命令‘

gulp copy’

3. 执行成功后，查看dist目录的结构，是否将images目录和lib目录成功复制

通过使用命令“gulp 任务名”去执行单个任务，实现执行一个任务，其他任务也一起执行
1. 在gulpfile.js文件中创建default任务
2. 使用gulp.series()按顺序执行任务
3. 打开命令行工具，运行“gulp default”命令