第三方模塊(由多個文件組成俭驮,又稱為包)回溺;
存在形式:①JS:提供實現(xiàn)項目具體功能的API接口;②以命令形式存在混萝,輔助項目開發(fā)遗遵;
獲取第三方模塊:非官方模塊(存儲在公共平臺)npmjs.com
下載方法: 在powerShell:? npm install 模塊名稱
默認下載當前目錄下:node-modules和package-lock.js
卸載: npm uninstall 模塊名稱
本地安裝:將模塊下載到當前項目中,供當前項目使用逸嘀;? (一般庫文件)
全局安裝:將模塊安裝在公共目錄中车要,所有項目都可以使用;(命令行工具)
=============================================================
nodemon模塊(命令行工具崭倘,輔助項目開發(fā))
作用:監(jiān)控文件的保存操作翼岁,當文件發(fā)生保存操作時,就會重新執(zhí)行該文件(直接看到修改后效果司光,不需要繁瑣執(zhí)行)琅坡;
①下載: npm? install nodemon -g? ? //-g全局安裝
②使用: 執(zhí)行:nodemon 01.helloworld.js?
斷開操作:ctrl+c? ?//返回當前工作目錄
=============================================================
nrm模塊
作用:npm下載地址的管理工具,快速切換npm的下載地址(由于網(wǎng)站在國外残家,下載速度慢榆俺,容易下載失敗,所以在國內(nèi)有公司專門建立服務器存儲npm的同步跪削,替代npm地址)谴仙;
①下載: npm install nrm -g? // 全局下載
操作: nrm ls? //查看下載地址
nrm use 下載名稱? //修改下載地址
=========================================================
gulp模塊(前端構建工具)
作用:將機械換操作編寫成任務,輸入命令碾盐,自動執(zhí)行任務晃跺。
html文件壓縮: gulp-htmlmin
css壓縮:gulp-csso
壓縮混淆的JavsScript:gulp-uglify
less語法轉(zhuǎn)換css:gulp-less
JavaScript語法轉(zhuǎn)換:gulp-babel
公共文件包含:gulp-file-include
瀏覽器實時同步:browsersync
gulp中提供的方法:
gulp.src()? // 獲取任務要處理的文件
gulp.dest() //輸出文件
gulp.task() //建立gulp任務
gulp.watch()? //監(jiān)控文件的變化
語法:
const gulp = require('gulp');? ? ? ? ? ? ? ? ? ? ??// 引用gulp模塊
gulp.task('first',()=>{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//使用gulp.task()方法建立任務? first是名字
gulp.src('./src/css/base.css')? ? ? ? ? ? ? ? ? ? // 獲取要處理的文件
.pipe(gulp.dest('./dist/css'));? ? ? ? ? ? ? ? ? ? ?// 將要處理的文件輸出到dist目錄下的css目錄
});
在powershell下執(zhí)行:gulp first??
?// 自動去當前項目根目錄下找當前的gulpfile.js文件,再去找firsrt任務毫玖,幫我們執(zhí)行這個任務的回調(diào)函數(shù)掀虎。
使用:①下載 npm install gulp? ? ? npm install gulp-cli -g
②在項目根目錄下建立gulpfile.js文件? ?//不能更改文件名
③重構項目文件夾結(jié)構src目錄放置源代碼文件凌盯,dist目錄放置構建后文件。
④在gulpfile.js文件中編寫任務
⑤在命令行執(zhí)行工具中執(zhí)行gulp任務(npm install gulp-cli -g要下載該工具)
例子:
在編輯器中新建一個文件夾:gulp-demo
在命令行工具中使用cd命令烹玉,切換到gulp-demo文件夾下
安裝gulp的庫文件: npm install gulp
在根目錄gulp-demo下建立gulpfile.js文件驰怎,新建文件夾src和dist
將源代碼放入src文件夾中
在gulpfile.js中編寫任務