Node.js之第三方模块——Gulp

第三方模块

什么是第三方模块

是别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。（类似于插件）

第三方模块有两种存在的形式：

• 以js文件的形式存在，提供实现项目具体功能的API接口
• 以命令行工具形式存在，辅助项目开发

获取第三方模块

是别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。（类似于插件）

npm是什么？

npm（node package manager）:node的第三方模块管理工具
npmjs.com：第三方模块的存储和分发仓库

使用npm：

下载第三方模块的方法：

npm install 模块名称

比如下载一个 formidable
只需输入：

npm i formidable -D

只要没有红色的字就代表下载好了，下载的位置是：命令行所在目录下
打开这个目录，发现多了一个node_modules，它是npm创建的，第三方模块就被放在了这个文件夹下面；还多了一个 package-lock.json，这个在文章的后面解释

卸载第三方模块的方法：

npm uninstall formidable 

删除之后就会没有了node_modules目录了

全局安装与本地安装
分别对应公共项目和当前项目

• 命令行工具：全局安装
• 库文件：本地安装

第三方模块 nodemon

nodemon是一个命令行工具，用以辅助项目开发。
在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐

因此使用nodemon自动重启工具可以监听代码文件的变动，当代码改变之后，自动重启。

使用步骤:
1.

使用 npm i nodemon -g

在命令行工具中用nodemon命令替代node命令执行文件（发现命令行被挂起，在监听文件的保存情况）

第三方模块 nrm

nrm(npm registry manager): npm下载地址切换工具
npm默认的下载地址在国外，国内下载速度慢

因此使用nrm，加快下载速度，就像使用gitee而不使用github一样

使用步骤：
1.下载

npm i nrm -g 

2.查询可以用下载地址列表 nrm ls

在这里默认的是使用npm（星号代表当前默认的下载路径），国外的下载地址，速度较慢

3.切换npm下载地址 nrm use 下载地址名称
在这里切换到taobao

nrm use taobao

第三方模块 Gulp

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

Gulp能做什么

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

简而言之：方便程序员做一些没有技术含量不方便做又不得不做的事情

Gulp使用

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

接下来回到项目中，新建文件夹gulp-demo，新建一个文件gulpfile.js，然后新建两个文件夹分别为dist和src。然后将一个项目（找的一个新的项目不同于视频中的）复制到src中，然后就准备在gulpfile里面写内容了。

Gulp中提供的方法

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

流程：获取src文件夹下的，通过建立gulp任务，完成任务后输出到dest文件夹中

一个代码示例（复制文件的操作）：

const gulp = require('gulp');
// ES6语法：import gulp from 'gulp';
// 使用gulp.task()方法建立任务
gulp.task('first', done => {
    // 获取要处理的文件
    done();
    gulp.src('./src/css/base.css')
        // 将处理后的文件输出到dist目录
        .pipe(gulp.dest('./dist/css'));
});

这里只是先进行复制，没有进行压缩

在task中：第一个参数是当前要建立任务的名字，比如上面的first；第二个参数是一个回调函数，即要执行的任务。

自己动手书写：

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

再下载一个同名的命令行工具

npm i gulp-cli -g

下载好之后，使用方法：输入gulp 再加想要执行的任务名称
比如此时输入：

gulp first

成功输出，在dist文件夹下也有了新的css文件夹和css文件

Gulp插件

gulp的命令很少，但是想要实现更多的功能就只能使用插件，插件非常多，语法很难全部记住。
要成为CV工程师哦~

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

使用插件的方法：1.使用npm命令进行下载 2.在gulpfile.js中引入这个插件 3.调用这个插件

html文件压缩

安装gulp-htmlmin

（下载）
在终端中键入：

npm i gulp-htmlmin

（引入）
完成第一个：html文件压缩

// html任务
// 1.html文件中代码的压缩操作
const htmlmin = require('gulp-htmlmin'); // 引入插件
gulp.task('htmlmin', done => {
    done();
    gulp.src('./src/*.html')// *.html 就是通配所有html文件
        // 压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        //解释：collapse折叠，whitespace空格，这里表示要折叠空格
        .pipe(gulp.dest('dist'));
});

（调用）

在powershell或者终端中输入
gulp htmlmin

执行就完成了，这样代码就成功完成了压缩

抽取HTML中的公共代码

安装gulp-file-include

（下载）
在终端中键入：

npm i gulp-file-include

在src下新建common文件夹存储共同代码的片段，并且新建header.html，尝试将两个html的公共头文件抽取出来，然后将两个html的共同代码（头部代码）剪贴入header.html中，公共代码全部删除。

（引入）
在原来删除共同代码的地方写入（头部代码）

@@include('./common/header.html')

在gulpfile.js中增添两行代码：

// 2.抽取HTML文件中的公共代码(先)

	// 新增
	
const fileinclude = require('gulp-file-include');

const htmlmin = require('gulp-htmlmin'); // 引入插件
gulp.task('htmlmin', done => {
    done();
    gulp.src('./src/*.html')// *.html 就是通配所有html文件
    
    	// 新增
    	
        .pipe(fileinclude())
        
        // 压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        //解释：collapse折叠，whitespace空格，这里表示要折叠空格
        .pipe(gulp.dest('dist'));
});

（调用）

gulp htmlmin

完成css压缩和less语法转化：

less语法转换：

（下载）
在终端中键入：

npm i gulp-less

（引入）

在src中的css中新建一个文件（a.less）

// css任务
// 1.less语法转换
// 2.css代码压缩
const less = require('gulp-less')
gulp.task('cssmin', done => {
    done();
    gulp.src('./src/css/*.less')
        .pipe(less())
        .pipe(gulp.dest('dist/css'))
})

然后在终端中输入gulp cssmin
之后会发现在dist中的css中多了一个文件：a.css
看到了正常的css语法

若想将src文件夹下的css和less文件同时全部压缩，怎么做呢？
将gulp.src里面传入一个数组，这样在数组里面就可以写入多个路径了

将

gulp.src('./src/css/*.less')

修改为：

gulp.src(['./src/css/*.less', './src/css/*.css'])

css压缩：

（下载）

npm i gulp-csso

实现只需在刚才的代码上加入两行

（引入）

// 2.css代码压缩
const less = require('gulp-less')

//  引入csso代码压缩（新增）

const csso = require('gulp-csso')

gulp.task('cssmin', done => {
    done();
    // gulp.src('./src/css/*.less')
    //选择css目录下的所有less文件以及css文件
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        //将less语法转换为css语法
        .pipe(less())
        
        //将css代码进行压缩（新增）
        
        .pipe(csso())
        
        //将处理的结果进行输出
        .pipe(gulp.dest('dist/css'))
})

（调用）

gulp cssmin

编写一个JavaScript的任务，实现ES6转换为ES5的代码，实现代码的压缩

ES6转为ES5

第一步：下载插件

npm i gulp-babel @babel/core @babel/preset-env

后面带别的属性，是因为这些为依赖项

第二步：引入babel插件

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

第三步：调用插件

.pipe(babel({
    // 下面这个选项可以判断当前的环境，会将代码转换为当前运行环境所支持的代码
    presets: ['@babel/env']
}))

第四步：输出代码,新建一个base.js，其中写一些es6的语法，验证一下是否成功

.pipe(gulp.dest('dist/js'))

例如输入以下代码：

第五步：执行命令

gulp jsmin

转换成功

压缩JS代码

第一步：下载插件

npm i gulp-uglify

第二步：引入压缩的插件

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

第三步：调用插件

.pipe(uglify())

注意：和转换语法写在一起
第四步：执行命令

gulp jsmin

最后观察dist下的js文件夹的两个js文件，发现可以了，既转换了，又压缩了

编写一个任务：拷贝文件夹

将图片文件夹和lib文件夹拷贝至dist目录

// 复制文件夹
gulp.task('copy', () => {
// 使用拷贝命令
    gulp.src('./src/images/*')
// 获取src目录下的images文件夹下的所有文件
        .pipe(gulp.dest('dist/images'))
//将处理的结果进行输出
})

有个问题，所有任务都是分别编写的，若要执行则需分别执行任务

现在新写一个任务，当执行这个任务后，其余所有任务也会跟随着执行

构建任务（写好default后，直接执行gulp即可）

// 构建任务
// 当执行default任务的时候，后面的任务也会依次的执行
// gulp.task('default', ['copy', 'jsmin']) 失败，版本过低，4.0以下的版本写法
// gulp.task('default', gulp.series(['copy', 'jsmin'])) 4.0以上的版本写法

把每个任务都执行了一遍

直接打gulp也可以