Node.js 基礎----學習記錄(四)

3. 第三方模塊

3.1 什麼是第三方模塊

別人寫好的、具備特定功能的、咱們能直接使用的模塊即第三方模塊，因爲第三方模塊一般都是由多個文件組成而且被放置在一個文件夾中，因此又名包。

第三方模塊有兩種存在形式：

• 以js文件的形式存在，提供實現項目具體功能的API接口。
• 以命令行工具形式存在，輔助項目開發

3.2 獲取第三方模塊

npmjs.com：第三方模塊的存儲和分發倉庫

npm (node package manager) ： node的第三方模塊管理工具

• 下載：npm install 模塊名稱
• 卸載：npm unintall package 模塊名稱

全局安裝與本地安裝

• 命令行工具：全局安裝
• 庫文件：本地安裝

3.3 第三方模塊 nodemon

nodemon是一個命令行工具，用以輔助項目開發。
在Node.js中，每次修改文件都要在命令行工具中從新執行該文件，很是繁瑣。

使用步驟

• 使用npm install nodemon –g 下載它
• 在命令行工具中用nodemon命令替代node命令執行文件

3.4 第三方模塊 nrm

nrm ( npm registry manager )：npm下載地址切換工具
npm默認的下載地址在國外，國內下載速度慢

使用步驟

1. 使用npm install nrm –g 下載它
2. 查詢可用下載地址列表 nrm ls
3. 切換npm下載地址 nrm use 下載地址名稱

3.5 第三方模塊 Gulp

基於node平臺開發的前端構建工具
將機械化操做編寫成任務, 想要執行機械化操做時執行一個命令行命令任務就能自動執行了
用機器代替手工，提升開發效率。

3.6 Gulp能作什麼

• 項目上線，HTML、CSS、JS文件壓縮合並
• 語法轉換（es六、less ...）
• 公共文件抽離
• 修改文件瀏覽器自動刷新

3.7 Gulp使用

• 使用npm install gulp下載gulp庫文件
• 在項目根目錄下創建gulpfile.js文件
• 重構項目的文件夾結構 src目錄放置源代碼文件 dist目錄放置構建後文件
• 在gulpfile.js文件中編寫任務.
• 在命令行工具中執行gulp任務

3.8 Gulp中提供的方法

• gulp.src()：獲取任務要處理的文件
• gulp.dest()：輸出文件
• gulp.task()：創建gulp任務
• gulp.watch()：監控文件的變化

const gulp = require('gulp');
  // 使用gulp.task()方法創建任務
 gulp.task('first', () => {
    // 獲取要處理的文件
    gulp.src('./src/css/base.css') 
    // 將處理後的文件輸出到dist目錄
    .pipe(gulp.dest('./dist/css'));
 });

3.9 Gulp插件

• gulp-htmlmin ：html文件壓縮
• gulp-csso ：壓縮css
• gulp-babel ：JavaScript語法轉化
• gulp-less: less語法轉化
• gulp-uglify ：壓縮混淆JavaScript
• gulp-file-include 公共文件包含
• browsersync 瀏覽器實時同步