第三方模块 npm

第三方模块 npm

别人写好的，具有特定功能的，可以直接使用的模块，由多个文件组成。

两种存在形式：

以js文件的形式存在，提供实现项目具体功能的API接口

以命令工具形式存在，辅助项目开发

自己先有一个包描述（package.json）
1、创建一个包描述文件 npm init [-y]
默认生成 -y
不能有中文名称
2、下载一个包 npm install
–save记录包依赖
根据package.json文件中的dependences属性恢复依赖
3、卸载一个包npm uninstall jquery
4、查看包的信息
npm info jquery
5、查看包的信息中的某个字段（版本）（掌握）
npm info jquery versions
6、查看包的文档
npm docs jquery
7、安装全局命令行工具
npm install -g http-server
8、卸载全局命令行工具
npm uninstall -g http
9、查看全局包的下载路径
npm root -g
10、修改存储目录
npm config set prefix ”D:/XXX"
不要node_modules
11、修改环境变量中的path属性
添加或改为 D:/xxx
目的就是为了在任意目录启动xxx.cmd
重启命令行
获取第三方模块
mpmjs.com：第三方模块的存储和分发仓库

npm：node的第三方模块管理工具

下载：npm install 模块名称

卸载：npm uninstall package 模块名称

全局安装与本地安装

命令行工具：全局安装

库文件：本地安装

包的区别
凡是我们下载到项目的node_modules中的包，基本上都是拿来做require(’xx‘)调用其函数和属性
还有一类属于工具性的包（全局命令行工具）
在命令行直接使用的
查看全局变量安装路径

全局工具和项目包的区别

全局工具哪个目录都可以通过命令行启动，通过任意目录启动该工具，给相对路径传递任意的文件给该工具
项目中的包，部分具备命令行工具的能力，需要命令行环境变量的支持

nodemon

nodemon是一个命令行工具，用以辅助项目开发

在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐

使用步骤：

1、使用npm install nodemon -g 下载它

g表示全局安装

2、在命令行工具中用nodemon命令替代node命令

修改代码自动重启
手动触发重启，在命令行输入rs回车
进入到指定目录命令行nodemon ./xxx.js
启动：nodemon + 文件名

如果要退出按 ctrl+c，出现提示是否退出，再按一次ctrl+c

nrm

（国内）

nrm：npm下载地址切换工具

使用步骤：

1、使用npm install nrm -g下载它

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

3、切换npm下载地址nrm use 下载地址名称

4、nrm add ：添加自己的服务器的包

带’ * ‘的代表目前的下载地址

Gulp

基于node平台开发的前端构建工具

将机械化操作编写任务，想要执行机械化操作执行一个命令行任务就能自动执行了

用机械化代替手工

Gulp能够做什么

项目上线，HTML，CSS，JS文件压缩
语法转换（es6，less）
公共文件抽离
修改文件浏览器自动刷新
Gulp使用
1、使用npm install gulp下载gulp库文件

2、在项目根目录下建立gulpfile.js文件

3、重构项目的文件夹结构src目录放置源代码文件 dist目录放置构建后文件

4、在gulpfile.js文件中编写任务

5、在命令行工具中执行gulp任务

Gulp中提供的方法
gulp.src()：获取任务要处理的文件
gulp.des()：输出文件
gulp.task()：建立gulp任务
gulp.watch()：监控文件的变化
const gulp = require(‘gulp’);

//使用task()方法建立任务

//参数：当前建立的文件的名字（任务名字），回调函数

gulp.task(‘first’, ()=>{

//要处理的文件路径

gulp.src(’./src/css/index.css’)

//将处理后的文件输出到dist

.pipe(gulp.dest('./dist/css'));

})
下载命令行工具

npm install gulp-cli -g

执行

gulp 任务名字

Gulp的插件
gulp-htmlmin：html文件压缩

gulp-csso：压缩css

gulp-babel：JavaScript语法转化

gulp-less：less语法转化

gulp-uglify：压缩混淆JavaScript

gulp-file-include：公共文件包含

browsersync：浏览器实时同步

使用步骤：
1、下载

2、引用

3、调用

插件下载：

https://www.npmjs.com/package/gulp-htmlmin

使用步骤具体操作：

1、到官网复制下面这个install里这句话，下载插件

2、到命令行工具粘贴

2、引进这个插件

const htmlmin = require(‘gulp-htmlmin’);

编写实现相关任务的代码

//压缩html文件操作

const gulp = require('gulp');

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

gulp.task('htmlmin',()=>{

  gulp.src('./src/*.html')

  //压缩html文件中的代码，collapseWhitespace是否压缩空格，true压缩

    .pipe(htmlmin({ collapseWhitespace: true }))

    .pipe(gulp.dest('dist'));

})

3、命令行工具运行

//抽取公共部分

1、下载插件

官网查找

https://www.npmjs.com/package/gulp-file-include

复制下载命令

npm install gulp-file-include

到命令行工具粘贴，回车即可下载

2、引用

在官网文档也有说明

复制到代码里

3、调用

注意：要先抽取公共部分，在压缩html文件

将less语法转换成css，把css代码压缩
1、下载

到官网，https://www.npmjs.com/package/gulp-less

获取命令行安装命令到命令行工具安装

2、引用

const less = require (’ gulp-less ');

3、调用

在命令行工具输入 gulp cssmin

gulp.task('cssmin',()=>{

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

    .pipe(less())

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

})

构建任务
编写一个命令，执行，然后其他任务依次执行

gulp.task('default',['htmlmin','cssmin','jsmin','copy']);