gulp下载安装以及简单使用

---

准备工作

官方快速入门指南：

https://www.gulpjs.com.cn/docs/getting-started/quick-start/

安装node

node下载地址：https://nodejs.org/zh-cn/
下载，安装好后，可通过命令行 node -v ，检查是否安装成功。（显示版本号，即安装配置成功）。

安装nrm（可选）

nrm(npm registry manager):npm下载地址切换模块
因为npm默认的下载地址在国外，国内下载速度慢。所以，我们要切换下载地址。

1. 使用npm install nrm -g下载它
2. 查询可用下载地址列表 nrm ls
3. 切换npm下载地址 nrm use 下载地址名称

我已切换为淘宝的下载地址。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Gulp能做什么

Glup是一个自动化构建工具，是自动化项目的构建利器。可以对网站的资源进行优化，将开发过程中一些重复的任务通过执行命令自动完成。这样能很大的提高我们的工作效率。

• 项目上线，HTML，CSS，JS文件压缩合并
• 语法转换（es6、less…）
• 公共文件抽离
• 修改浏览器自动刷新
• …

二、使用步骤

1.建立一个名为glup_demo的文件夹
2.在该文件夹中，Shift+鼠标右键打开Powershell窗口，使用 npm install gulp下载gulp库文件
3.在项目根目录下建立glupfile.js文件（名字必须为glupfile.js）
4.重构项目的文件夹结构，src目录放置源代码文件，dist目录放置构建后文件

src中放置项目源代码文件，以https://gitee.com/cheng_xiaozhen/jquery_todo-list为例

5.在gulpfile.js文件中编写任务
6.在命令行工具中执行gulp任务

2.代码演示

代码如下（示例）：

// 引用gulp模块
const gulp = require('gulp');
//使用gulp.task建立任务
//第一个参数为任务名称，第二个参数为任务的回调函数
gulp.task('first', () => {
    console.log('人生中第一个gulp任务执行了');
    //使用gulp.src获取要处理的文件
    gulp.src('./src/css/index.css')
        .pipe(gulp.dest('dist/css'));
});

在项目根目录下，打开powershell(命令直接就在项目的根目录下执行)，使用npm 任务名称 来执行任务。这里第一个任务名称为first 所以直接输入npm first即可。

3.gulp插件

我们通过gulp-htmlmin插件来压缩html代码。说明文档：https://www.npmjs.com/package/gulp-htmlmin
在powershell中，使用npm install gulp-htmlmin下载插件，说明文档中命令为npm install --save gulp-htmlmin，–save这个参数我们已经不用了，去掉就行了。

// 引用gulp模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
//使用gulp.task建立任务
//第一个参数为任务名称，第二个参数为任务的回调函数
gulp.task('first', () => {
    console.log('人生中第一个gulp任务执行了');
    //使用gulp.src获取要处理的文件
    gulp.src('./src/css/index.css')
        .pipe(gulp.dest('dist/css'));
});

//html任务
//将html文件中的代码压缩
gulp.task('htmlmin', () => {
    gulp.src('./src/*.html')
        //压缩html文件中的代码
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('dist'));
})

在powershell中，使用gulp htmlmin命令来执行html任务。

压缩前与压缩后的对比

---