Gulp

四、Gulp的使用

1. 使用流程

1. 下载 Gulp 到项目中：

npm install gulp

如果安装慢，可以切换成淘宝源：

npm set registry https://registry.npm.taobao.org/

2. 在项目根目录下简历 gulpfile.js 文件

3. 重构项目文件结构：添加 src 文件夹，将所有源码放到该文件夹，新增 dist 文件夹，用于放置构建后的文件

4. gulpfile.js编写任务

// 引入gulp模块
const gulp = require('gulp');
// 引入gulp-htmlmin插件
const htmlmin = require('gulp-htmlmin')

// 创建任务
gulp.task('htmlmin', () => {
    // 获取要处理的文件，这里最好加上 return，否则运行之后会提示The following tasks did not complete
    gulp.src('./src/*.html')
        // 第一个操作：使用对应的配置压缩html
        .pipe(htmlmin({ collapseWhitespace: true }))
        // 第二个操作：拷贝压缩后的文件到dist文件夹
        .pipe(gulp.dest('dist'));
});

5. 执行任务

gulp htmlmin
[16:10:13] Using gulpfile ~/Demo/WebDev/gulp-Demo/gulpfile.js
[16:10:13] Starting 'htmlmin'...
[16:10:13] Finished 'htmlmin' after 38 ms

2. 安装插件

gulp只提供几个最基本的函数：src、pipe、dest、task其他的功能全部由 gulp 相关的插件来完成，所以在使用 gulp 构建项目时，不仅要安装 gulp，还要全局安装 gulp 命令行，最后还要安装对应功能的 gulp 插件。

1. 全局安装gulp命令行

npm install gulp-cli -g

2. 安装gulp-htmlmin插件

npm install gulp-htmlmin

注意：
新版本中会报提示：

[16:08:45] Using gulpfile ~/Demo/WebDev/gulp-Demo/gulpfile.js
[16:08:45] Starting 'htmlmin'...
[16:08:45] The following tasks did not complete: htmlmin
[16:08:45] Did you forget to signal async completion?

此时只要在task任务中增加一个返回即可：

gulp.task('htmlmin', () => {
    // 获取要处理的文件
    return gulp.src('./src/*.html')
        // 第一个操作：使用对应的配置压缩html
        .pipe(htmlmin({ collapseWhitespace: true }))
        // 第二个操作：拷贝压缩后的文件到dist文件夹
        .pipe(gulp.dest('dist'));
});

注：插件很多，不需要去记住怎么使用，只需要基础插件名称，然后去查看对应的 Api 即可。

相关功能的插件列表：

gulp插件

3. 构建任务

构建任务：执行多个任务的任务

gulp.task('default', gulp.series(['htmlmin', 'copy']));

结果：

[16:50:20] Using gulpfile ~/Demo/WebDev/gulp-Demo/gulpfile.js
[16:50:20] Starting 'default'...
[16:50:20] Starting 'htmlmin'...
[16:50:20] Finished 'htmlmin' after 37 ms
[16:50:20] Starting 'copy'...
[16:50:20] Finished 'copy' after 9.48 ms
[16:50:20] Finished 'default' after 49 ms

注意，老版本可能使用的仍然是：

gulp.task('default', ['htmlmin', 'copy']);

此时会报错：

Task function must be specified

因为新版本必须使用 gulp.series 来执行多任务。

4. package.json

描述文件，主要负责记录项目的描述信息，包括第三方依赖库，类似于 cocoapods 中的 podfile。其本质作用是避免在项目传输过程中第三方库的拷贝、版本管理等复杂的任务。

初始化命令：

// 初始化package.json，按需生成
npm init
// 使用默认值生成package.json
npm init -y

然后安装依赖库之后在 package.json 中就会显示依赖：

  "dependencies": {
    "formidable": "^1.2.2",
    "gulp": "^4.0.2",
    "gulp-htmlmin": "^5.0.1",
    "mime": "^2.4.4"
  }

开发依赖：
不影响项目运行的依赖。比如 gulp 在系统构建完成上线之后就不需要使用到了。

下载全部依赖：

npm install

安装开发依赖：

npm install --save-dev

下载线上依赖：

npm install --production

模块加载机制
有路径时的查找顺序：

1. 如果是完整的路径，则直接引入，没有就报错；
2. 如果不带后缀，先找当前文件夹下的同名 JS 文件；
3. 如果没找到，就找同名的文件夹，在文件夹中寻找 index.js；
4. 如果没找到，就去 package.json 中获取入口文件并查找入口文件
5. 如果还没找到，就报错；

注意：require 时，被引用的文件会执行一次

没有路径时：

1. Node.js 会假设是系统模块，去系统模块对应的路径中查找；
2. 如果没有找到系统模块，就会去当前文件夹下的 node_modules 中查找是否有同名的 js 文件；
3. 如果没有，查找是否有同名的文件夹；
4. 在文件夹中查找 index.js；
5. 如果没有，就去 package.json 中获取入口文件并查找入口文件；
6. 如果还没有就报错；