4.第三方模塊
4.1 什么是第三方模塊
別人寫好的囱井，具有特定功能的，我們能直接使用的模塊即第三方模塊刻恭，由于第三方模塊通常都是由多個(gè)文件組成并放置在一個(gè)文件夾中佛玄，所以又叫包硼一。
第三方模塊有兩種存在模式
- 以js文件的形式存在，提供實(shí)現(xiàn)項(xiàng)目具體功能的API接口梦抢。
- 以命令行工具形式存在般贼，輔助項(xiàng)目開發(fā)。
4.2 獲取第三方模塊
npm：node的第三方模塊管理工具奥吩。
- 下載：npm install 模塊名稱
- 卸載：npm uninstall package 模塊名稱
全局安裝與本地安裝 - 命令行工具：全局安裝
- 庫文件：本地安裝
4.3 第三方模塊nodemon
nodemon是一個(gè)命令行工具哼蛆，用以輔助項(xiàng)目開發(fā)。
在Node.js中霞赫，每次修改文件都要在命令行工具中重新執(zhí)行該文件腮介，十分繁瑣。
使用步驟：
- 使用npm install nodemon -g下載它
2.在命令行工具中用nodemon命令替代node替代node執(zhí)行文件
4.4第三方模塊 nrm
nrm:npm下載地址切換工具绩脆。
npm默認(rèn)的下載地址在國外萤厅，國內(nèi)下載速度慢橄抹。
使用步驟：
1.使用npm install nrm -g下載它
2.查詢下載地址列表nrm ls
3.切換下載地址nrm use 下載地址名稱
4.5 第三方模塊 Gulp
基于node平臺(tái)開發(fā)的前端構(gòu)建工具
將機(jī)械化操作編寫成任務(wù)靴迫，想要執(zhí)行機(jī)械化操作時(shí)執(zhí)行一個(gè)命令行命令，任務(wù)就能自動(dòng)執(zhí)行楼誓。
4.6 Gulp能做什么
- 項(xiàng)目上線玉锌，HTML，CSS疟羹，JS文件壓縮合并
- 語法轉(zhuǎn)換（es6主守，less）
- 公共文件抽離
- 修改文件瀏覽器自動(dòng)刷新
4.7 Gulp使用
1.使用npm install gulp下載gulp庫文件
2.在項(xiàng)目根目錄下建立gulpfile.js文件
3.重構(gòu)項(xiàng)目的文件夾結(jié)構(gòu)src目錄放置源代碼文件禀倔，dist目錄放置構(gòu)建后文件
4.在gulpfile.js文件中編寫任務(wù)
5.在命令行工具中執(zhí)行g(shù)ulp任務(wù)
4.8 Gulp中提供的方法
- gulp.src('文件路徑'):獲取任務(wù)要處理的文件
- gulp.dest('文件路徑'):輸出文件
- gulp.task('任務(wù)名稱',回調(diào)函數(shù)):建立gulp任務(wù)
- gulp.watch():監(jiān)控文件的變化
const gulp=require('gulp');
//使用gulp.task()方法建立任務(wù)
gulp.task('first',()=>{
console.log('我的第一個(gè)gulp任務(wù)執(zhí)行了');
//獲取要處理的文件
gulp.src('./src/css/base.css')
//將處理后的文件輸出到dist目錄(這里的pipe是執(zhí)行的意思，把要執(zhí)行的文件放到pipe里参淫，會(huì)自動(dòng)執(zhí)行)
.pipe(gulp.dest('./dist/css'));
});
4.9 Gulp插件(記住名字救湖，現(xiàn)用現(xiàn)查)
- gulp-htmlmin:壓縮html
// html任務(wù)
// 1.html文件中代碼的壓縮操作
// 2.抽取html文件中的公共代碼
gulp.task('htmlmin', () => {
gulp.src('./src/*.html')
//先抽取公共代碼
.pipe(fileinclude())
//抽取完公共代碼，需要在公共代碼原來所在的地方涎才，寫一個(gè)引入的式子(由include提供)：@@include('公共代碼文件路徑')
// 壓縮html文件中的代碼(清除空格)
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});
- gulp-csso:壓縮css
// 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'))
});
- gulp-babel:JS語法轉(zhuǎn)化
// js任務(wù)
// 1.es6代碼轉(zhuǎn)換
// 2.代碼壓縮
gulp.task('jsmin', () => {
gulp.src('./src/js/*.js')
.pipe(babel({
// 它可以判斷當(dāng)前代碼的運(yùn)行環(huán)境 將代碼轉(zhuǎn)換為當(dāng)前運(yùn)行環(huán)境所支持的代碼
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
- gulp-less:less語法轉(zhuǎn)化
- gulp-uglify:壓縮混淆JS
- gulp-file-include:公共文件包含
- browsersync:瀏覽器實(shí)時(shí)同步
其他操作：
復(fù)制文件夾：
gulp.task('copy',()=>{
gulp.src('文件路徑')
.pipe(gulp.desk('文件路徑'));
})
執(zhí)行一個(gè)任務(wù)鞋既，剩下全部執(zhí)行：
// 構(gòu)建任務(wù)
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);
