node.js

Node.js 好用的包

2020年7月19日 作者 张舫

第三方模块 nodemon

  • nodemon是一种工具，可在检测到目录中的文件更改时通过自动重新执行代码.

1.安装

1
npm install nodemon -g

2.使用 用 nodemon 代替 node 执行文件

1
nodemon b.js

 

 

 

第三方模块 nrm

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

1.安装

1
npm install nrm -g

2.使用

1
2
nrm ls               //查看可用的镜像资源列表 前面有* 号代表当前使用的镜像源
nrm use <镜像源名称>  //下载地址名称

 

 

 

第三方模块 Gulp

前段构建工具 ,将机械化操作编写成任务,主要用于 压缩js css less sass  es5 es6语法转换 压缩 公共文件插入 修改刘阿联酋 自动刷新等

Gulp中提供的方法

1
2
3
4
gulp.task()   //简历gulp任务
gulp.src()    //源文件或文件夹
gulp.dest()   //输出文件夹
gulp.watch()  //监控文件变化

1.安装

1
2
npm install gulp         //这是库文件不需要全局安装
npm install gulp-cli -g  //这个是gulp的命令工具

2.在项目根目录中创建  gulpfile.js 文件

1
touch gulpfile.js        //命令任务 卸载这里

3.在项目根目录中创建  src 文件夹 和 dist 文件夹

1
2
mkdir src                //源文件 存放的文件夹
mkdir dist               //处理后的文件 存放的文件夹

4.在gulpfile.js文件中编辑任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const gulp = require('gulp')        //引入gulp组件
 
 
/**
* 定义一个demo任务
*/
gulp.task('demo', () => {
    /*获取源文件*/
    gulp.src('./src/css/*')
        
        /*这里可以使用 .pipe() 写更多执行流程如压缩 转换,但是不管怎么写,这些都是公共部分*/
        
        /*设置处理后存放的位置 pipe是管道函数,将上个函数执行的结果往下传递*/
        .pipe(gulp.dest('./dist/css'))
})

5.在命令行中执行gulp任务

1
gulp demo    //demo 是编写的任务名

Gulp插件

1
2
3
4
5
6
npm install gulp-htmlmin                                //压缩html           https://www.npmjs.com/package/gulp-htmlmin
npm install gulp-csso                                   //压缩css            https://www.npmjs.com/package/gulp-csso
npm install gulp-babel @babel/core @babel/preset-env    //JavaScript语法转换  https://www.npmjs.com/package/gulp-babel
npm install gulp-less                                   //less语法转换        https://www.npmjs.com/package/gulp-less
npm install gulp-uglify                                 //压缩混淆 JavaScript https://www.npmjs.com/package/gulp-uglify
npm install gulp-file-include                           //公共文件引入         https://www.npmjs.com/package/gulp-file-include

Gulp常用参考方法参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
const gulp        = require('gulp')                     //引入gulp组件
const path        = require('path')                     //引入系统路径组件
const htmlmin     = require('gulp-htmlmin')             //引入html压缩组件
const fileinclude = require('gulp-file-include');       //引入公共文件引入组件
const less        = require('gulp-less');               //引入less语法转换器
const csso        = require('gulp-csso');               //引入css压缩组件
const babel       = require('gulp-babel');              //引入JavaScript语法转换工具
const uglify      = require('gulp-uglify');             //引入JavaScript语法转换工具
 
/**
* 定义一个demo任务
*/
gulp.task('demo', async() => {
    /*获取源文件*/
     gulp.src(path.join(__dirname, '/src/css/*'))
 
        /*这里可以使用 .pipe() 写更多执行流程如压缩 转换,但是不管怎么写,这些都是公共部分*/
 
        /*设置处理后存放的位置 pipe是管道函数,将上个函数执行的结果往下传递*/
        .pipe(gulp.dest(path.join(__dirname, '/dist/css')))
})
 
/**
* 压缩html
*/
gulp.task('min-html', async() => {
    gulp.src(path.join(__dirname, '/src/*.html'))
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest(path.join(__dirname, '/dist')))
})
 
/**
* 引入公共文件
* ***********************
* 别忘了在 src/*.html 文件中引入需要加载文件如
* @@include('./common/header.html')
* https://www.npmjs.com/package/gulp-file-include
*/
gulp.task('include', async() => {
    /*获取源文件*/
    gulp.src(path.join(__dirname, '/src/*.html'))
        .pipe(fileinclude())
        .pipe(gulp.dest(path.join(__dirname, '/dist')))
})
 
/**
* less转css-min
*/
gulp.task('less-to-min-css', async() => {
    /*获取源文件*/
    gulp.src(path.join(__dirname, '/src/css/*'))
        .pipe(less())                                       /*将less转化为css*/
        .pipe(csso())                                       /*压缩css*/
        .pipe(gulp.dest(path.join(__dirname, '/dist/css')))
})
 
/**
* js es6 转 es5 然后压缩
*/
gulp.task('es6-to-es5-min', async() => {
    /*获取源文件*/
    gulp.src(path.join(__dirname, '/src/js/*.js'))
        .pipe(babel({
            presets: ['@babel/env']     /*它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码*/
        }))
        .pipe(uglify())                 /*压缩代码*/
        .pipe(gulp.dest(path.join(__dirname, '/dist/js')))
})
 
/**
* 复制文件
*/
gulp.task('copy',async()=>{
    gulp.src(path.join(__dirname, '/src/images'))
        .pipe(gulp.dest(path.join(__dirname, '/dist/images')))
    gulp.src(path.join(__dirname, '/src/images'))
        .pipe(gulp.dest(path.join(__dirname, '/dist/lib')))
})
 
/**
* 我用的Gulp是 "version": "4.0.2" 和 gup3 是有区别的
* 建立一个任务合集
*/
gulp.task('default', gulp.series('min-html', 'include', 'less-to-min-css', 'es6-to-es5-min', 'copy', async done=>{
    console.log(done)
}))

 

第三方模块 mime

1.安装

1
npm install mime

2.使用

1
2
mime.getType('txt');                    // 根据文件路径获取文件类型 ⇨ 'text/plain'
mime.getExtension('text/plain');        // 根据文件类型获取扩展名   ⇨ 'txt'

系统模块 URL模块

1
2
url.parse('https://www.zfajax.com/wp-admin/post.php?post=2192&action=edit')          //解析url 获取url的详细数据
url.parse('https://www.zfajax.com/wp-admin/post.php?post=2192&action=edit', true)    //解析url 获取url的详细数据 将query对象化

系统模块 querystring模块

1
2
//name=123&age=123  这个就是query参数实例
querystring.parse(postParams)       //解析query参数 ,返回一个对象

 

cross-env模块 解决环境变量问题 理解为laravel .env

1
npm install --save-dev cross-env

关于作者

好好学习天天向上

发表评论

邮箱地址不会被公开。 必填项已用*标注