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就知道會有多香。

感謝觀看~

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