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"))
})