Node开发及Gulp使用

-前言-

Node是一个基于Chrome V8引擎的JavaScript代码运行环境,让我们脱离浏览器也可以运行我们js代码。

我们都知道JavaScript是由ECMAScript、DOM、BOM组成,Node.js则由ECMAScript及Node环境提供的一些附加API组成、包括文件系统、网络、路径等。

下面会记录我学习Node中的一些关键笔记,以及使用Gulp的相关笔记。·希望能帮到你。

-正文-

Node模块化开发

Node.js中规定一个JavaScript文件就是一个模块,模块内部定义的变量和函数默认情况下在外部无法得到。如果外部想得到我们的变量,需要使用exports或者module.exports将成员导出。在其他地方就可以使用require导入模块,返回的就是模块中的exports属性。

//导出模块
function hello(){
    console.log("say hello");
}

exports.hello = hello;
module.exports.hello = hello;

值得注意的是虽然exports与module.exports等价,但是module.exports优先级高于exports,当两者不同的时候以moudle.exports为准。

Node中的path

在Node中运行的node都是通过命令行执行,默认根目录都是命令行的执行目录,因此我们执行某项任务的时候尽量使用全路径去匹配资源,另外由于系统缘故资源分隔符也可以有path方法连接后得到。

//path全路径
//nodejs的回调函数为错误优先的回调函数,回调函数的第一个参数一般都是错误信息。
const path = require('path');
const fs = reuire('fs');
console.log(__dirname);
fs.readFile(path.join(__dirname,"test.js"),'utf-8',(err,doc)=>{
    console.log(err);
});

安装第三方模块

在安装Node后,自动安装了Node的包管理器npm,我们通过npm管理我们的第三方模块。

//下载
npm install 【模块名称】

//卸载
npm uninstall【模块名称】

我们所有的Node模块可以在npm官网查到:https://www.npmjs.com/

修改npm下载地址

//1.下载nrm地址切换工具
npm install nrm -g
//2.查询可用下载列表
nrm ls
//3.修改到中国的服务器下载地址:taobao
nrm use taobao

Package.json文件

package文件是我们项目的项目描述文件,记录了项目信息,包括了项目名称、版本、作者、github地址、项目依赖的模块信息等。

生成package.json

//初始化项目信息
npm init
//当我们不想填写信息,全部取默认值时
npm init -y

项目依赖及开发依赖

在项目开发阶段及运营阶段都要依赖的第三方包,称为项目依赖,我们通过npm install直接下载,会被package.json添加到dependencies字段中。

在项目开发中需要使用的模块,线上不需要使用的第三方包,称为开发依赖。我们通过使用npm install --save-dev命令安装包,这个时候会被添加到package.json中的devDependencies字段中。

//安装项目依赖使用
npm install 
//安装开发依赖
npm install --save-dev

根据package.json下载项目依赖

当我们拿到一个项目的时候一般不包含依赖的模块包文件,因为这些文件一般都比较大,所以没必要放到SVN上。

////这个时候npm 会在当前命令根目录下去寻找package.json,寻找其中的dependencies及devDependencies下载安装依赖包
npm install 
//只下载packagejson中Dependencies字段中依赖的包
npm install --production

package-lock.json文件

  • 锁定包的版本,确保再次下载不会因为包版本不同产生问题。
  • 加快下载速度,因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,重新安装时只需要下载即可,不需要做额外的工作。

Node.js中模块加载机制

模块有路径情况

//require方法根据模块路径查找模块,如果是完整路径,直接引入模块
require('./find.js');


//如果模块后缀省略,先找同名JS文件再找同名JS文件夹
    //true:找到同名文件 return
    //false:寻找同名文件夹,找文件夹中的index.js
        //true:找到index.js return
        //false:寻找当前文件夹中的package.js中查找min选项中的入口文件
           //true:返回这个main指定的文件
           //false:模块没有被查找到,报错 
require('./find');

模块没有路径没有后缀

//Node.js会假设这个模块是系统模块
    //true:执行这个系统模块
    //false:去node_modules文件夹中查找,首先查找同名js文件
        //true:执行
        //false:寻找这个名字的文件夹
            //false:报错
            //true:寻找这个文件夹中的有没有index.js
                //true:执行这个index.js
                //fasle:寻找package.json确定main字段定义的入口文件
                    //true:执行这个main字段的入口文件
                    //false:报错                
require('find');

Gulp使用

gulp基于node平台的前端构建工具,强大的不光是gulp还有gulp相关的插件的搭配使用,让我们在项目构建的时候解放双手。

gulp一般功能包括:

  • 项目HTML、CSS、JS合并压缩
  • 语法转换(es62es5,less2css)
  • 公共文件抽离

除了上面的功能,我们还能在项目中间搭配其他node第三方库完成更加强大的功能,简直就是合理搭配干活不累的典范。

gulp.src()//获取任务要处理的文件  src可以传入单个路径或者路径数组
gulp.dest()//输出文件
gulp.task()//建立gulp任务
gulp.watch()//监控文件的变化

使用gulp的时候我们需要在项目的根目录添加gulpfile.js来执行gulp任务。下面分别使用gulp3及gulp4写出一个简单的任务流程。

//gulp3
const gulp = require('gulp')

gulp.task("dosomething0",()=>{
    gulp.src('./src/img/*')
    .pipe(gulp.dest('dist/image'));
})

gulp.task("dosomething1",()=>{
    console.log("dosomething1");
})

gulp.task("default",["dosomething0","dosomething1"]);

//gulp4
const {series, parallel} = require("gulp“);
const gulp = require("gulp");

function doSomething0(cb){
    console.log("doSomething0");
    cb();
}

function doSomething1(cb){
    console.log("doSomething1");
    cb();
}

exports.default = series(doSomething0,doSomething1);

更多的操作还需要慢慢去了解多使用Gulp就知道会有多香。

感谢观看~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章