什么是第三方模塊

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

---

---

---

---

---

---

第三方模塊 nodemon

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

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

使用步驟

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

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

---

---

第三方模塊 nrm

使用步驟

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

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

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

---

---

第三方模塊 Gulp

基于node平臺開發的前端構建工具

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

用機器代替手工，提高開發效率。

---

---

Gulp能做什么

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

語法轉換（es6、less ...）

公共文件抽離

修改文件瀏覽器自動刷新

---

---

Gulp使用

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

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

3. 重構項目的文件夾結構 src目錄放置源代碼文件 dist目錄放置構建后文件

4. 在gulpfile.js文件中編寫任務.

5. 在命令行工具中執行gulp任務

---

---

Gulp中提供的方法

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

gulp.dest()：輸出文件

gulp.task()：建立gulp任務

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

---

---

?

---

---

Gulp插件

gulp-htmlmin ：html文件壓縮

gulp-csso ：壓縮css

gulp-babel ：JavaScript語法轉化

gulp-less: less語法轉化

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建立任務 // 1.任務的名稱 // 2.任務的回調函數 gulp.task('first', () => {console.log('我們人生中的第一個gulp任務執行了');// 1.使用gulp.src獲取要處理的文件gulp.src('./src/css/base.css').pipe(gulp.dest('dist/css')); });// html任務 // 1.html文件中代碼的壓縮操作 // 2.抽取html文件中的公共代碼 gulp.task('htmlmin', () => {gulp.src('./src/*.html').pipe(fileinclude())// 壓縮html文件中的代碼.pipe(htmlmin({ collapseWhitespace: true })).pipe(gulp.dest('dist')); });// css任務 // 1.less語法轉換 // 2.css代碼壓縮 gulp.task('cssmin', () => {// 選擇css目錄下的所有less文件以及css文件gulp.src(['./src/css/*.less', './src/css/*.css'])// 將less語法轉換為css語法.pipe(less())// 將css代碼進行壓縮.pipe(csso())// 將處理的結果進行輸出.pipe(gulp.dest('dist/css')) });// js任務 // 1.es6代碼轉換 // 2.代碼壓縮 gulp.task('jsmin', () => {gulp.src('./src/js/*.js').pipe(babel({// 它可以判斷當前代碼的運行環境 將代碼轉換為當前運行環境所支持的代碼presets: ['@babel/env']})).pipe(uglify()).pipe(gulp.dest('dist/js')) });// 復制文件夾 gulp.task('copy', () => {gulp.src('./src/images/*').pipe(gulp.dest('dist/images'));gulp.src('./src/lib/*').pipe(gulp.dest('dist/lib')) });// 構建任務 gulp.task('default',gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy', function() {// Do something after a, b, and c are finished. }));

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。