node.js基础以及前端工程化的小知识

小辉同学的笔记本
300 阅读6分钟

工程化开发

使用Node.js

Node.js下运行JavaScript

交互模式：

使用tab键自动补全

探索js对象（例如：Math.然后按两次tab键）

点命令（例如：输入.help然后回车）

全局对象

在交互模式下，声明的变量和函数都输入global（输入Node进入交互模式）

例如：var a=1;global.a可以访问到

在脚本模式下，声明的变量和函数都不属于global

全局函数

.parseInt/parseFloat/isNaN/isFinite/eval..

一次性定时器（setTimeut/clearTimeout）

周期性定时器(setInterval/clearInterval)

node提供的全局函数

立即执行定时器(setImmediate/clearImmediate)(在实践队列开始之前，立即执行)

进程立即执行定时器(process.nextTick)(在主进程结束之后立即执行)

Node.js模块

分为三个模块：

内置模块 官方提供

自定义模块 工程师自己写的

第三方模块 社区维护，需要单独下载

对象：

宿主对象： document,window等

自定义对象 ：工程师自己写的

第三方库：jQuery,Bootstrsp...

fs

fs提供了文件操作API

文件操作

目录操作

使用之前需要通过require引入

如追加写入*（删除unlink,读readFile）：

fs.appendFile(__dirname+'/2.txt','rwe1ewsdrfwsd/n',(err)=>{
    if(err) throw err//抛出错误
})

创建目录

语法：fs.mkdir('目录路径',回调函数)

删除：同上（rmdir）

该用法只能删除空目录，需要配合unlink先删除文件内容

重命名：fs.rename(旧名称，新名称，回调函数)

const fs=require('fs')
fs.rename(__dirname+'/d1',__dirname+'/d2',(err)=>{
    if(err) throw err
})

读目录：fs.readdir('目录路径',回调函数)

模块加载(自定义模块)

引入模块（文件和目录一样）

const 引入名（为方便和引入名相同名字）=require('./引入名')

导出：

module.exports={
    .....
}

更改入口文件（目录）

{
    "main":"a.js"//更改目录的入口文件为a.js
}

第三方模块

想使用第三方模块需要单独安装

npmjs.com

安装包：npm install--global

或者

npm i-g

卸载包：例如：

npm uninstall minify -g(全局)

项目安装：

1.创建项目目录(mkdir project)

2.进入项目目录(cd project)

3.初始化项目(npm init)

4.在项目中安装包

安装：npm install --save

或者

npm i -S

脚手架工具

作用：生成可以复用的代码（通俗理解）

脚手架分类：

通用脚手架：yeoman

专用：create-react-app vue-cli angular-cli

yeoman

作用：帮助开发者创建项目的基础结构代码

yo是yeoman的命令行管理工具

生成器：在yeoman中具体的脚手架 针对不同项目由不同的脚手架（例如：网站，APP，小程序等）

`04[2UVT2~[(PY1FUP SRTV

Yeoman使用

全局安装yo npm install --global yo

安装generator npm install --global generator-webapp

通过yo运行generator

mkdir project-name

cd project-name

yo webapp

启动应用 npm run start

自动化工具

npm scripts

npm 允许在package.json文件中，使用scripts定义脚本命令

1.声明命令

"scripts":{
    "foo":"node bar.js"
}

2.执行命令

npm run foo(等同于node bar.js)

并行不能直接在windows下执行，因此需要安装插件并使用

并行 &

串行：&&

npm-run-all插件

npm i npm-run-all -D(并行即可同时执行)
run-p 脚本1 脚本2 脚本3
run-s 脚本1 脚本2 脚本3(串行即有先后顺序)

构建样式文件

将less转成css

npm i less -g

lessc input.less output.css

压缩css文件

npm i minify -g

minify outut.css>output.min.css

步骤：

1.初始化项目(npm init --yes)

2.添加scripts命令(less +minify)

3.执行scripts命令(npm run命令)

构建脚本文件

Babel转化执行命令（将es6语法转化为es5上，因为有很多浏览器不能兼容）

单个文件：babel input.js --out-file output.js 或者：babel input.js-o output.js

整个目录：babel src --out-dir dist 或者：babel src -d dist

步骤：

1.初始化项目(npm init -yes)

2.安装Babel(npm install -g babel-core babel-cli)

3.安装转码规则(npm install -g babel-preset-env)

4.配置转换规则(.babelrc)(新建此文件)

5.在npm scripts中添加转换命令(babel src -d dist)

“script":babel src -d 你需要转到的目录

6.执行转换命令

代码格式校验

使用ESLint步骤：

1.初始化项目(npm init --yes)

2.安装ESLint(npm install eslint -g)

3.初始化配置文件(eslint --init)

4.检查JS代码格式

单个文件(eslint path/filename.js)

css代码格式

步骤：

1.初始化项目(npm init --yes)

2.安装ESLint(npm eslint -global stylelint)（npm install stylelint -g）

3.安装检测标准(npm install --global stylelint-config-standard)

4.创建配置文件(.stylelintrc.json)

5.检测CSS代码

单个文件(tylelint path/filename.css)

整个文件(stylelint**/*.css)

Gulp

Gulp基础

Gulp与npm scripts都可以实现自动化构建

Glup语法简单（Glup语法即为js语法，而npm scripts语法接近shell脚本）

Gulp生态完善，构建效率高

使用步骤：

1.全局安装gulp客户端（npm install -g gulp-cli）

2.初始化项目(npm init --yes)

3.安装gulp包(npm install gulp -D)

4.新建gulpfile文件(gulpfile.js声明在根目录下)

5.在gulpfile.js中，创建gulp任务

通过解构引入函数（都是gulp方法可以通过解构，原始用法：gulp.src,gulp.dest等等，后面可以直接使用src(''）：

const{src,dest,parallel}=require('gulp')

Gulp组合任务

gulp文件操作

src()->pipe()->dest()

gulp.src('某个目录下的某个文件',{base:'src'}).pipe(gulp.dest('需要复制到的目的地目录')

其中src第二个参数可选，当前表示参考src目录传输

构建样式文件

gulp构建样式文件需要的插件：

npm i gulp-less -D 将less文件转化为css文件

npm i gulp-clean-css -D 压缩css代码

npm i gulp-rename -D 对文件进行重命名

先引入
const less=require('gulp-less')
const cleancss=require('gulp-clean-css')
const rename=require()

在流加入
.pipe(less()).pipe(cleancss()).pipe(rename({"extname":".min.css"}))

autoprefixer(css兼容问题)

npm i gulp-autoprefixer -D(安装，需要引入)

const autoprefixer=require('gulp-autoprefixer')
使用方法：
.pipe(autoprefixer())
作用：解决css兼容

gulp构建脚本文件

所需插件：

gulp-babel 将es6+新语法转化为es5

gulp-uglify 压缩js代码

gulp-rename对文件进行重命名

安装：

npm install --save-dev gulp-babel@7 babel-core babel-preset-env

在使用时，都需要引用

构建HTML文件所需插件

gulp-htmlmin 压缩html文件

pipe(html({
    collapseWhitespace:true,
    minifyCSS:true
    可以对该文件的css以及js做压缩
}))

Gulp图片文件所需插件

gulp-imagemin 压缩图片文件

const imagemin=require('gulp-imagemin')
const imaage=()=>{
    return src("路径/**")//所有图片
    .pipe(imagemin([
        imagemin.mozjpeg({quality:75,progressive:true})
    ]))
    //将此路径里面的目录的图片全部压缩
}

文件清除

所需插件:del 删除文件和目录（不需要先清空）


const del=require('gulp-del')
const bulid=parallel(style,script,html,image等)//并行操作
const dev=series(clean,bulid)//使用串行
const clean=()=>{
    return del(['dist'])
}
module.exports={
    bulid,
    dev
}//导出任务

服务发布

开发服务器构建插件

browser-sync 发布web服务

安装：npm i browser-sync -D

const browserSync=require('browser-sync')
const bs=browserSync.create()//相对于其他插件多的一个步骤
const serve=()=>{
 bs.init({//初始化
     serve{
         baseDir:'指定目录'
     }
 })
}

使用Bootstrap

bootstrap 提供常用页面效果

jquery Bootstrap的依赖包

安装：npm i bootstrap@3.4.1 jquery -S

路由:(跳转地址)routes:{ '/node_modules':'node_modules' }

Reload

在服务上可添加：

watch(被监听文件，对应任务如html)

在初始化中可添加监视文件如啊files:'dist/**'

avatar
文章
阅读
粉丝