什么是第三方模塊

別人寫好的、具有特定功能的、我們能直接使用的模塊即第三方模塊，由于第三方模塊通常都是由多個文件組成并且被放置在一個文件夾中，所以又名包。

---

---

---

---

---

---

第三方模塊 nodemon

nodemon是一個命令行工具，用以輔助項目開發(fā)。

在Node.js中，每次修改文件都要在命令行工具中重新執(zhí)行該文件，非常繁瑣。

使用步驟

1. 使用npm install nodemon –g 下載它

2. 在命令行工具中用nodemon命令替代node命令執(zhí)行文件

---

---

第三方模塊 nrm

使用步驟

1. 使用npm install nrm –g 下載它

2. 查詢可用下載地址列表 nrm ls

3. 切換npm下載地址 nrm use 下載地址名稱

---

---

第三方模塊 Gulp

基于node平臺開發(fā)的前端構(gòu)建工具

將機械化操作編寫成任務(wù), 想要執(zhí)行機械化操作時執(zhí)行一個命令行命令任務(wù)就能自動執(zhí)行了

用機器代替手工，提高開發(fā)效率。

---

---

Gulp能做什么

項目上線，HTML、CSS、JS文件壓縮合并

語法轉(zhuǎn)換（es6、less ...）

公共文件抽離

修改文件瀏覽器自動刷新

---

---

Gulp使用

1. 使用npm install gulp下載gulp庫文件

2. 在項目根目錄下建立gulpfile.js文件

3. 重構(gòu)項目的文件夾結(jié)構(gòu) src目錄放置源代碼文件 dist目錄放置構(gòu)建后文件

4. 在gulpfile.js文件中編寫任務(wù).

5. 在命令行工具中執(zhí)行g(shù)ulp任務(wù)

---

---

Gulp中提供的方法

gulp.src()：獲取任務(wù)要處理的文件

gulp.dest()：輸出文件

gulp.task()：建立gulp任務(wù)

gulp.watch()：監(jiān)控文件的變化

---

---

?

---

---

Gulp插件

gulp-htmlmin ：html文件壓縮

gulp-csso ：壓縮css

gulp-babel ：JavaScript語法轉(zhuǎn)化

gulp-less: less語法轉(zhuǎn)化

gulp-uglify ：壓縮混淆JavaScript

gulp-file-include 公共文件包含

browsersync 瀏覽器實時同步

---

---

---

---

// 引用gulp模塊 const gulp = require('gulp'); const htmlmin = require('gulp-htmlmin'); const fileinclude = require('gulp-file-include'); const less = require('gulp-less'); const csso = require('gulp-csso'); const babel = require('gulp-babel'); const uglify = require('gulp-uglify');// 使用gulp.task建立任務(wù) // 1.任務(wù)的名稱 // 2.任務(wù)的回調(diào)函數(shù) gulp.task('first', () => {console.log('我們?nèi)松械牡谝粋€gulp任務(wù)執(zhí)行了');// 1.使用gulp.src獲取要處理的文件gulp.src('./src/css/base.css').pipe(gulp.dest('dist/css')); });// html任務(wù) // 1.html文件中代碼的壓縮操作 // 2.抽取html文件中的公共代碼 gulp.task('htmlmin', () => {gulp.src('./src/*.html').pipe(fileinclude())// 壓縮html文件中的代碼.pipe(htmlmin({ collapseWhitespace: true })).pipe(gulp.dest('dist')); });// css任務(wù) // 1.less語法轉(zhuǎn)換 // 2.css代碼壓縮 gulp.task('cssmin', () => {// 選擇css目錄下的所有l(wèi)ess文件以及css文件gulp.src(['./src/css/*.less', './src/css/*.css'])// 將less語法轉(zhuǎn)換為css語法.pipe(less())// 將css代碼進(jìn)行壓縮.pipe(csso())// 將處理的結(jié)果進(jìn)行輸出.pipe(gulp.dest('dist/css')) });// js任務(wù) // 1.es6代碼轉(zhuǎn)換 // 2.代碼壓縮 gulp.task('jsmin', () => {gulp.src('./src/js/*.js').pipe(babel({// 它可以判斷當(dāng)前代碼的運行環(huán)境 將代碼轉(zhuǎn)換為當(dāng)前運行環(huán)境所支持的代碼presets: ['@babel/env']})).pipe(uglify()).pipe(gulp.dest('dist/js')) });// 復(fù)制文件夾 gulp.task('copy', () => {gulp.src('./src/images/*').pipe(gulp.dest('dist/images'));gulp.src('./src/lib/*').pipe(gulp.dest('dist/lib')) });// 構(gòu)建任務(wù) gulp.task('default',gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy', function() {// Do something after a, b, and c are finished. }));

?

總結(jié)

以上是生活随笔為你收集整理的第三方模块——nodemon是一个命令行工具，用以辅助项目开发、nrm ( npm registry manager )：npm下载地址切换工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。