这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战

Gulp

第三方模块Gulp是基于node平台开发的前端构建工具，将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行了。用机械代替手工，提高开发效率。

1. Gulp能作什么

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

2. Gulp使用

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

3. Gulp 中提供的方法

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

4. Gulp插件

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

部分插件示例代码如下：

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// 使用gulp.task建立任务
// 1.first === 任务的名称
// 2.任务的回调函数
gulp.task('first', () => {
    console.log('我人生中的第一个gulp任务执行了！');
    // 1.使用gulp.src获取要处理的文件
    gulp.src('./src/CSS/index.css')
        .pipe(gulp.dest('dist/css'));

});

/* HTML任务：
1.html文件中代码的压缩操作；
2.抽取html文件中的公共代码。 */
gulp.task('htmlmin', done => {
    gulp.src('./src/01 项目 copy.html')
        // 调用抽取公共文件的API
        .pipe(fileinclude())
        // 压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'));
    done();
});
/* css任务
1.less语法转化
2.css代码压缩*/
gulp.task('cssmin', done=> {
    // 选择css目录下的所有less文件以及css文件
    gulp.src(['./src/CSS/*.less', './src/CSS/*.css'])
        // 将less语法转换为css语法
        .pipe(less())
        // 将css代码进行压缩
        .pipe(csso())
        // 将处理的结果进行输出
        .pipe(gulp.dest('dist/css'))
    done();
})

/* js任务
1.ES6代码转换
2.代码压缩 */
gulp.task('jsmin', done => {
    gulp.src('./src/js/*.js')
    // 它可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
    done();
})

// 构建任务default，执行全部任务
// gulp 4.0 加入了 gulp.series 和 gulp.parallel 来实现任务的串行化和并行化。
gulp.task('default', gulp.series(['htmlmin','cssmin','jsmin']));

5. package.json文件

5.1 node_modules文件夹的问题

文件夹以及文件过多过碎。
复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错。

5.2 package.json文件的作用

项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。使用npm init -y命令生成。

5.3 项目依赖

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

5.4 开发依赖

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

5.5 package-lock.json文件的作用

锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作

6 Node.js 中模块加载机制

模块查找规则

(1) 当模块拥有路径但没有后缀时,会发生如下几种情况：

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

（2）当模块没有路径且没有后缀时：

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