[JavaScript知识库]node.js与gulp相关服务器搭建、模块化、npm包、操作文件理论与案例

node.js?

? ? ? ? 概念：node.js是一个js运行环境，有大量的api
? ? ? ? ? ? ? ? ? ?node.js=谷歌V8引擎+大量的api

? ? ? ? 读取一个js文件：cmd中 --------------node 文件名

? ? ? ? 作用：js依赖于浏览器的js引擎，只能在页面运行，而nodejs实现了js代码脱离浏览器，在cmd控制台即可运行，可以实现诸多功能

? ? ? ? 安装：node官网下载安装

node搭建服务器（http官方模块）

? ? ? ? 导入http模块:const http=require("http");

? ? ? ? 创建服务器对象：http.createServer(function(req,res){}).listen(端口号)

const http = require("http");
http.createServer(function(req, res) {
    //响应头
	res.writeHead(200, {
		"Content-type": "text/html;charset=utf-8"
	});
     //响应内容
	res.write("我是服务器响应数据");
	res.end("<b>我是加粗的</b>");
}).listen(8888);

????????ps：cmd读取运行之后，可在网页地址栏输入地址访问该页面，实现了用js代码搭建服务器

文件的读写（fs官方模块）

读：

????????创建一个js文件，并导入fs模块

?????????const fs=ruquire('fs');

????????fs.readyFile("文件名",(err,data)=>{
? ? ? ? console.log(data)
????????})?

????????当前目录cmd运行 node js文件名

const fs = require("fs");
fs.readFile("4.txt", (err, data) => {
	if (err) {
		console.log("文件读取失败")
	} else {
		console.log("文件读取成功");
		console.log(data.toString());
	}
})

写：

????????fs.writeFile("文件名","内容"，覆盖还是增加，回调函数)

????????有该文件名则默认覆盖，无该文件自动创建

fs.writeFile("5new.txt", "用nodejs可以直接创建一个新文件",{flag:"a"}, () => {
	console.log("写入数据成功")
})

????????当前目录cmd运行 node js文件名?

????????创建一个目录：

? ? ????????? ? fs.mkdir("目录名",（）=>{})

????????删除一个目录：
? ????????? ? ? fs.rmdir("目录名",()=>{})

????????删除一个文件：

? ? ????????? ? fs.unlink("文件名",()=>{})

自定义模块

? ? ? ? node可以实现js文件访问js文件，模块之间进行交互

? ? ? ? 导出：

? ? ????????? ? module.exports={
? ? ????????? ? a:123,
? ? ????????? ? b:321}

? ? ? ? 导入（可以导入多个模块）：

? ? ? ????????? const c=require('./文件名')

? ? ????????? ? c.a即可取得其值

? ? ????????? ? cmd运行该文件即可在cmd显示结果

?es6的模块化：

? ? ? ? 导出：

? ? ????????? ? let a=123;

? ? ????????? ? let b=321;

? ? ? ????????? let c=542;

? ? ? ????????? export default{a,b,c};

? ? ? ? 导入（可以导入多个模块）：

? ? ????????? ? import c from "./文件名"

? ? ????????? ? c.a即可取其值

? ? ? ????????? 在html页面中引入该js文件并type="module"

第三方模块

? ? ? ? npm install 模块名

? ? ? ? npm uninstall 模块名

? ? ? ? npm list 查看安装的模块

? ? ? ? npm install -g nodemon自动重运行工具(gulp有用)

gulp

? ? ? ? 是一个基于node平台的项目自动构建化工具，能够实现文件的拷贝、压缩、合并、重命名、es6转es5等功能

????????安装步骤：

? ? ? ? ????????安装cnpm:? ? ? ?npm install cnpm --registry=https://registry.npm.taobao.org ?-g

? ? ? ????????? 安装gulp软件:? ? ? ? cnpm install gulp -g

?????????项目的使用步骤：

? ? ? ? ????????在项目根目录下? ? ? ? cnpm init 创建初始化文件

? ? ? ????????? 安装gulp模块? ? ? ? cnpm install gulp --save-dev

? ? ? ????????? 创建js文件(代码将在这里写)? ? ? ? gulpfile.js

?????????下载各种模块：

? ? ? ? ? ? ? ?合并模块????????cnpm install gulp-concat --save-dev?

? ? ? ? ? ? ? ?压缩js模块????????cnpm install gulp-uglify --save-dev

? ? ? ? ? ? ? ?文件重命名模块?????????cnpm install gulp-rename --save-dev ??

? ? ? ? ? ? ? ?压缩css模块?????????cnpm install gulp-minify-css --save-dev

? ? ? ? ? ? ? ?压缩图片模块????????cnpm install gulp-imagemin@7.1.0 --save-dev

? ? ? ? ? ? ? ?ES6转ES5模块
????????????????? ? cnpm install --save-dev babel-preset-es2015
? ????????????????? cnpm install --save-dev gulp-babel@7 babel-core babel-preset-env

????????在gulpfile.js中：

? ? ?? ???????设置任务： gulp.task(任务名称,回调函数);

? ? ? ? ???? ?运行任务：在控制台 gulp 任务名称

????????拷贝：

?
const gulp = require('gulp');
gulp.task("copy", function() {
	gulp.src("copy.html").pipe(gulp.dest("d:/dest"))
})
gulp.task("copy", function() {
	gulp.src("js/**/*").pipe(gulp.dest("d:/dest"))
})
gulp.task("copy", function() {
	gulp.src("bigjs/**/*").pipe(gulp.dest("d:/dest"))
})

?

????????合并：

const gulp2 = require("gulp-concat");
gulp.task("concat", function() {
	gulp.src(["concat1.js", "concat2.js"]).pipe(gulp2("newjs.js")).pipe(gulp.dest("d:/dest"))
})

?????????压缩js文件：

const gulp3 = require("gulp-uglify");
gulp.task("uglify", function() {
	gulp.src("1路由.js").pipe(gulp3()).pipe(gulp.dest("d:/dest"))
})

????????压缩css文件：

const gulpcss = require("gulp-minify-css");
gulp.task("mincss", function() {
	gulp.src("压缩.css").pipe(gulpcss()).pipe(gulp.dest("d:/dest"))
})

????????压缩图片：

const gulpimg=require("gulp-imagemin");
gulp.task("minimg",function(){
	gulp.src("bigimg/**/*").pipe(gulpimg()).pipe(gulp.dest("d:/dest"))
})

????????es6转es5：

const gulpes5=require("gulp-babel");
gulp.task("change",function(){
	gulp.src("es6.js").pipe(gulpes5({presets:['es2015']})).pipe(gulp.dest("d:/dest"))
})

?????????合并压缩重命名拷贝：

const gulp4 = require("gulp-rename");
gulp.task("rename", function() {
	gulp.src(["concat1.js", "concat2.js"]).pipe(gulp2("newnewjs.js")).pipe(gulp3()).pipe(gulp4(
		"newnewnewjs.js")).pipe(gulp.dest("d:/dest"))
})