Node常用模块及方法汇总

2020-03-18

Gulp

1、使用

npm install gulp 下载gulp库文件
在项目根目录新建gulpfile.js文件
重构项目文件夹结构，src放置源代码文件，dist放置构建后的文件
在gulpfile.js文件中编写任务
命令行工具中执行gulpfile.js文件

注：需要连续执行多个任务时，gulp.task('default', ['任务1', '任务2', '', ...])

2、方法

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

注：需要连续依次对文件进行处理时，用gulp.pipe()进行链式操作

3、插件

1 2	const gulp = require('gulp') const fileinclude = require('gulp-file-include')

gulp-htmlmin：html文件压缩

const htmlmin = require('gulp-htmlmin')
gulp.task('htmlmin', () => {
  gulp.src('./src/*.html') // *.xxx代表选择该文件夹中的所有xxx类型的文件
      // 先抽取公共文件抽取再进行压缩、转换等操作
      .pipe(fileinclude())
      .pipe(htmlmin({ collaseWhitespace: true })) // collaseWhitespace: true为压缩空格，false为不压缩空格
      .pipe(gulp.dest('dist'))
})

gulp-csso：压缩css

const csso = require('gulp-csso')
gulp.task('cssmin', () => {
  gulp.src('./src/css/*.css')
      .pipe(csso())
      .pipe(gulp.dest('dist'))
})

gulp-babel：JavaScript语法转化（ES6转换）

const babel = require('gulp-babel')
gulp.task('jsmin', () => {
  gulp.src('./src/js/*.js')
      .pipe(babel({
        // 可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
        presets: ['@babel/env']
      }))
      .pipe(gulp.dest('dist/js'))
})

gulp-less：less语法转化

const less = require('gulp-less')
gulp.task('cssmin', () => {
  gulp.src(['./src/css/*.less', './src/css/*.css']) // 要处理多个文件时，用[]接收
      .pipe(less())
      .pipe(gulp.dest('dist/css'))
})

gulp-uglify：压缩混淆JavaScript

const uglify = require('gulp-uglify')
gulp.task('jsmin', () => {
  gulp.src('./src/js/*.js')
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'))
})

gulp-file-include：公共文件抽取
browsersync：浏览器实时同步

模块查找规则

1、路径完整、省略后缀

1 2	require('./find.js') // 有后缀 require('./find') // 无后缀

如果是完整路径，直接引入模块
如果模块后缀省略，先找同名JS文件，找不到再找同名JS文件夹
如果找到了同名JS文件夹，引入文件夹中的index.js
如果文件夹中没有index.js，找当前文件夹中的package.json，引入main选项中的入口文件（一般默认为index.js）
如果package.js不存在或main中没有指定入口文件，报错，找不到该模块

2、路径不完整，且省略后缀

1	require('find')

默认为系统模块，到系统模块中进行查找
系统模块未找到，到node_modules文件夹中查找
node_modules文件夹中未找到，查找是否有同名JS文件
无同名JS文件，查找是否有同名JS文件夹
有同名JS文件夹，到该文件夹中查找index.js文件
未找到index.js文件，查找该文件夹中的package.json中main选项的入口文件
都未找到，报错，找不到该模块

async关键字（ES7）

普通函数定义前加async关键字，普通函数变成异步函数
默认返回Promise对象
在异步函数内部使用return关键字进行结果返回，结果会被包裹在promise对象中，return代替了resolve方法
在异步函数内部使用throw抛出异常
调用异步函数再链式调用then方法获取异步函数执行结果
调用异步函数再链式调用catch方法获取异步函数执行错误信息

await关键字（ES7）

只能出现在异步函数中
后面只能跟promise对象
可以暂停异步函数向下执行，直到promise有返回结果

一个正在成长的前端小白~