5、第三方模块
（1）什么是第三方模块
别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。
第三方模块有两种存在形式：
以js文件的形式存在，提供实现项目具体功能的API接口。
以命令行工具形式存在，辅助项目开发
（2）获取第三方模块
npmjs.com：第三方模块的存储和分发仓库
npm (node package manager) ： node的第三方模块管理工具
下载：npm install 模块名称
卸载：npm unintall package 模块名称
全局安装与本地安装
命令行工具：全局安装
库文件：本地安装
（3）第三方模块 nodemon
nodemon是一个命令行工具，用以辅助项目开发。
在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。
使用步骤
使用npm install nodemon –g 下载它
在命令行工具中用nodemon命令替代node命令执行文件
（4）第三方模块 nrm
nrm ( npm registry manager )：npm下载地址切换工具
npm默认的下载地址在国外，国内下载速度慢
使用步骤：
使用npm install nrm –g 下载它
查询可用下载地址列表 nrm ls
切换npm下载地址 nrm use 下载地址名称
（5）第三方模块 Gulp
基于node平台开发的前端构建工具
将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
用机器代替手工，提高开发效率。
（6）Gulp能做什么
项目上线，HTML、CSS、JS文件压缩合并
语法转换（es6、less …）
公共文件抽离
修改文件浏览器自动刷新
（7）Gulp使用
使用npm install gulp下载gulp库文件
在项目根目录下建立gulpfile.js文件
重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
在gulpfile.js文件中编写任务.
在命令行工具中执行gulp任务
（8）Gulp中提供的方法
gulp.src()：获取任务要处理的文件
gulp.dest()：输出文件
gulp.task()：建立gulp任务
gulp.watch()：监控文件的变化
代码语言：javascript复制 const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('first', () => {
// 获取要处理的文件
gulp.src('./src/css/base.css')
// 将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'));
});// 引用gulp模块
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.任务的名称
// 2.任务的回调函数
gulp.task('first', () => {
console.log('我们人生中的第一个gulp任务执行了');
// 1.使用gulp.src获取要处理的文件
gulp.src('./src/css/base.css')
.pipe(gulp.dest('dist/css'));
});
// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
gulp.src('./src/*.html')
.pipe(fileinclude())
// 压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});
// css任务
// 1.less语法转换
// 2.css代码压缩
gulp.task('cssmin', () => {
// 选择css目录下的所有less文件以及css文件
gulp.src(['./src/css/*.less', './src/css/*.css'])
// 将less语法转换为css语法
.pipe(less())
// 将css代码进行压缩
.pipe(csso())
// 将处理的结果进行输出
.pipe(gulp.dest('dist/css'))
});
// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', () => {
gulp.src('./src/js/*.js')
.pipe(babel({
// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
// 复制文件夹
gulp.task('copy', () => {
gulp.src('./src/images/*')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'))
});
// 构建任务
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);
当任务名为：default时,可以只写gulp
注：gulp.pipe:**
首先，gulp的源码里没有任何一部分是定义pipe的。
gulp的pipe方法是来自nodejs stream API的。
gulp本身是由一系列vinyl模块组织起来的。
pipe方法到底是什么呢？
pipe跟他字面意思一样只是一个管道
例如我有一堆文件
代码语言：javascript复制var s = gulp.src(["fileA","fileB","fileC"])1
src方法实际上是'vinyl-fs'模块的方法,选择一系列文件并创建可读流（readableStream）。
返回的是由从这些文件而来的流（stream）
既然是Stream，自然少不了最常用的pipe的方法。
s.pipe(fn)
pipe方法传入方法的是一个function，这个function作用无非是接受上一个流（stream）的结果，并返回一个处理后流的结果(返回值应该是一个stream对象)。
注意的是这个函数只是一个包装，并不是会直接操作文件的。
管道与Stream
也就是说pipe本身只是定义了管道的组织情况，管道本身的具体结构（Stream对象）
，是需要开发者自己去设计的。
pipe方法只负责返回这个管道结构（Stream对象）
楼主想要窥探管道里的内容，就要创建一个Stream对象，在Stream对象接收结果的方法里把流里的内容log出来即可
Stream与File
注意的是gulp里的流的file必须是vinyl对象
var File = require("gulp-utils").File//或者var File = require("vinyl") var myf = new File()myf.contents = new Buffer("haha")
