1、Gulp

• 基于node平台开发的前端构建工具
• 将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行力，用机械代替手工，提高开发效率

2、Gulp能做什么

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

3、Gulp使用步骤

1.使用 npm install gulp命令下载gulp库文件
2.在项目根目录下建立gulpfile.js文件
3.重构项目的文件夹结构src目录放置源代码文件,dist目录放置构建文件
4.在gulpfile.js文件中编写任务
5.在命令行工具中执行gulp任务

4、Gulp中提供的方法

• gulp.src():获取任务要处理的文件
• gulp.dest():输出文件
• gulp.task():建立gulp任务
• gulp.watch():监控文件的变化

//gulpfile.js文件中引用gulp模块
const gulp = require('gulp');

//建立任务
//两个参数，1.任务名称 2.回调函数
gulp.task('first',() => {
    console.log('第一个gulp执行了');
    //1.使用gulp.src获取要处理的文件
    gulp.src('./src/css/index.css')
    //2.将获取的文件传出到dist目录
        .pipe(gulp.dest('./dist/css'));
});

1.安装一个命令行工具

npm install gulp-cli -g

2.使用下面命令执行任务（gulp 任务名）

gulp first

3.此时dist目录下面就有传进去的文件了

5、Gulp常用插件

• gulp-htmlmin：html文件压缩
• gulp-csso：压缩css
• gulp-babel：JavaScript语法转化
• gulp-less：less语法转化
• gulp-uglify：压缩混淆JavaScript
• gulp-file-include：公共文件包含
• browsersync：浏览器实时同步

例如，我们对html代码进行压缩
1.运用下面命令下载gulp-htmlmin插件

npm install gulp-htmlmin

2.gulpfile.js中进行编辑

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');

gulp.task('htmlmin',() => {
    gulp.src('./src/*.html')
        .pipe(htmlmin({ collapseWhitespace: true}))
        .pipe(gulp.dest('dist'));
});

3.运行以下命令，之后dist目录下就会出现压缩了的html的文件

gulp htmlmin

6、package.js文件

6.1 node_modules文件夹的问题

• 文件夹以及文件过多过碎，当我们项目整体拷贝给别人的时候，传输速度会很慢
• 复杂的模块依赖关系需要被记录，确保模块的版本和当前一致，否则会导致当前项目运行报错

6.2 package.json文件的作用

• 项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖哪些第三方模块等，使用 npm init -y命令生成
• 当我们将项目整体拷贝给别人的时候，不需要拷贝 node_modules文件夹，只需要在当前目录下执行 npm install命令，该文件夹就会自动生成，这样我们就能解决第一个问题了

6.3 项目依赖

• 在项目开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖
• 使用npm install 包名下载的文件会默认添加到package.json文件的dependencies字段中

{
    "dependencies": {
        "jquery": "^3.3.1"
    }
}

6.4开发依赖

• 在项目的开发阶段需要依赖，线上运营的阶段不需要依赖的第三方包，称为开发依赖
• 使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中

{
    "devDependencies":{
        "gulp":"^3.9.1"
    }
}

6.5 package-lock.json文件

• 锁定包的版本，确保再次下载不会因为包版本不同而产生问题
• 加快下载速度

7、Node.js模块加载机制

7.1 模块查找规则-当模块拥有路径但没有后缀时

require('./find.js')；
require('/find');

• require方法根据路径查找模块，如果是完整路径，直接引入模块
• 如果模块后缀省略，先找同名js文件再找同名js文件夹
• 如果找到同名文件夹，找同名文件夹中的index.js
• 如果文件夹中没有index.js就会去当前文件夹中的package.js文件中查找main选项中的入口文件
• 如果指定的入口文件不存在或者没有指定入口文件就会报错，模块没有找到

7.2 模块查找规则-当模块没有路径且没有后缀时

require('find');

• Node.js会假设它是系统模块
• Node.js会去node_modules文件夹中
• 首先看是否有改名字的js文件
• 再看是都有改名字的文件夹
• 如果是文件夹看里面是否有index.js文件
• 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件
• 否则找不到会报错