2019-10-27 node第三方模块学习

第三方模块(由多个文件组成,又称为包);

存在形式:①JS:提供实现项目具体功能的API接口;②以命令形式存在,辅助项目开发;

获取第三方模块:非官方模块(存储在公共平台)npmjs.com

下载方法: 在powerShell:  npm install 模块名称

默认下载当前目录下:node-modules和package-lock.js

卸载: npm uninstall 模块名称

本地安装:将模块下载到当前项目中,供当前项目使用;  (一般库文件)

全局安装:将模块安装在公共目录中,所有项目都可以使用;(命令行工具)

=============================================================

nodemon模块(命令行工具,辅助项目开发)

作用:监控文件的保存操作,当文件发生保存操作时,就会重新执行该文件(直接看到修改后效果,不需要繁琐执行);

①下载: npm  install nodemon -g    //-g全局安装

②使用: 执行:nodemon 01.helloworld.js 

断开操作:ctrl+c   //返回当前工作目录

=============================================================

nrm模块

作用:npm下载地址的管理工具,快速切换npm的下载地址(由于网站在国外,下载速度慢,容易下载失败,所以在国内有公司专门建立服务器存储npm的同步,替代npm地址);

①下载: npm install nrm -g  // 全局下载

操作: nrm ls  //查看下载地址

nrm use 下载名称  //修改下载地址

=========================================================

gulp模块(前端构建工具)

作用:将机械换操作编写成任务,输入命令,自动执行任务。

html文件压缩: gulp-htmlmin

css压缩:gulp-csso

压缩混淆的JavsScript:gulp-uglify

less语法转换css:gulp-less

JavaScript语法转换:gulp-babel

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

浏览器实时同步:browsersync



gulp中提供的方法:

gulp.src()  // 获取任务要处理的文件

gulp.dest() //输出文件

gulp.task() //建立gulp任务

gulp.watch()  //监控文件的变化

语法:

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

gulp.task('first',()=>{                                 //使用gulp.task()方法建立任务  first是名字

gulp.src('./src/css/base.css')                    // 获取要处理的文件

.pipe(gulp.dest('./dist/css'));                     // 将要处理的文件输出到dist目录下的css目录

});

在powershell下执行:gulp first  

 // 自动去当前项目根目录下找当前的gulpfile.js文件,再去找firsrt任务,帮我们执行这个任务的回调函数。


使用:①下载 npm install gulp      npm install gulp-cli -g

②在项目根目录下建立gulpfile.js文件   //不能更改文件名

③重构项目文件夹结构src目录放置源代码文件,dist目录放置构建后文件。

④在gulpfile.js文件中编写任务

⑤在命令行执行工具中执行gulp任务(npm install gulp-cli -g要下载该工具)

例子:

在编辑器中新建一个文件夹:gulp-demo

在命令行工具中使用cd命令,切换到gulp-demo文件夹下

安装gulp的库文件: npm install gulp

在根目录gulp-demo下建立gulpfile.js文件,新建文件夹src和dist

将源代码放入src文件夹中

在gulpfile.js中编写任务

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。