Node-Gulp

1. Gulp

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

2. Gulp使用

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

3. Gulp中的方法

1. gulp-cli安装

npm install gulp-cli -g

2. Task创建

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

// 引用gulp模块
const gulp = require('gulp');

// 使用gulp.task建立任务
// 1. 任务的名称
// 2. 任务的回调函数
gulp.task('firstTask', done => {
    // 使用gulp.src获取要处理的文件
    // 将处理后的文件输出到dist目录
    gulp.src('./src/css/base.css').pipe(gulp.dest('dist/css'));
    done();
});

3. gulp命令执行

gulp firstTask

4. Gulp插件

1. 常见插件

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

2. 插件使用方法

   1. 插件下载

   npm install gulp-htmlmin
   

   2. 插件引入

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

   3. 插件使用

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

   4. 构建执行多个task

   // 构建任务 - default的任务命令行执行时，不需要写default也可以
   gulp.task('default', gulp.series('firstTask', 'htmlmin', done => done()));
   

5. package.json

1. 文件的作用

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

2. 项目依赖

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

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

3. 开发依赖

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

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

6. package-lock.json

1. 文件的作用

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

7. Node.js中模块加载机制

1. 模块查找规则-当模块拥有路径但没有后缀时
   1. require方法根据模块路径查找模块，如果是完整路径，直接引入模块。
   2. 如果模块后缀省略，先找同名JS文件再找同名JS文件夹
   3. 如果找到了同名文件夹，找文件夹中的index.js
   4. 如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件
   5. 如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到
2. 模块查找规则-当模块没有路径且没有后缀时
   1. Node.js会假设它是系统模块
   2. Node.js会去node_modules文件夹中
   3. 首先看是否有该名字的JS文件
   4. 再看是否有该名字的文件夹
   5. 如果是文件夹看里面是否有index.js
   6. 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件
   7. 否则找不到报错