1,node.js簡介
本質是一種運行執行js程序代碼的方式方法/環境
之前,我們只能在瀏覽器環境中運行js程序
現在我們可以在node環境彙總,運行js程序
node.js環境 是 基於 Chrome V8 引擎的環境,也就是以谷歌瀏覽器內核爲環境,來運行js程序
引擎對js程序的作用就像汽油對汽車的作用，就是給動力，在這裏指通過引擎運行js程序
js程序,在不同的環境下,有不同的功能
在瀏覽器環境下,受到瀏覽器的限制
能操作 ECMAScript DOM BOM
不能操作 I/O 數據庫等
在node.js環境下
可以操作 ECMAScript I/O 數據庫等，就是指可以操作硬盤文件，編譯輸出時命令行是node demo.js
就像python demo.py其他語言編譯運行一樣
不能操作 DOM BOM
運行方式很簡單，依靠終端 node demo.js
node.js第三方依賴包的安裝
(1) , 使用 npm 來進行安裝
npm 是 node.js 默認給我們安裝好的工具,我們可以直接使用
(2) , 設定 npm 的下載路徑(鏡像源/鏡像文件)，就是把下載地址從國外變爲國內下載
直接設定 推薦的方法
npm config set registry https://registry.npm.taobao.org 直接設定爲淘寶下載
(3) , 清除 npm 的下載緩存
如果上一次下載失敗,會在node.js中有上一次下載的緩存文件
如果要執行新的下載,node.js默認會從上一次下載的程序中,繼續下載
就容易造成下載失敗
如果出現下載失敗的情況,一定要執行清除操作之後,再來進行第二次下載
一般推薦使用軟清除就可以了
如果軟清除有問題,再使用硬清除
千萬注意,硬清除之後,要再執行一次軟清除
清除 npm 的緩存有兩種方法
(1) , 通過 命令 來清除緩存 --- 軟清除
npm cache clear -f
清除緩存文件
(2) , 直接清除緩存文件 --- 硬清除
C:\Users\你的用戶名\AppData\Roaming\npm-cache
這個 npm-cache 文件夾中存儲的就是 緩存文件
直接刪除這個文件夾,然後再次執行 軟清除
npm cache clear -f
注意: AppData 是一個隱藏文件 , 必須要顯示隱藏文件,纔可以看到
(4) , 依賴包的安裝,分爲兩種形式
(1), 全局安裝
npm i -g 依賴包 --global 可以簡寫成 -g
npm install --global 依賴包
全局安裝的依賴包,在任意路徑下,都可以調用使用
(2), 項目/局部 安裝
npm i 依賴包 install 簡寫 i
npm install 依賴包
項目/局部安裝的依賴包,只能在安裝路徑下,執行調用
還有一種安裝語法，比較不常用
nmp i -D 依賴包
兩種語法,在使用上沒有任何區別
只是安裝依賴包信息,在 package.json 中的存儲位置不同
npm i 依賴包 ---- 存儲在 dependencies 中
nmp i -D 依賴包 ---- 存儲在 devDependencies 中
有些 依賴包 必須要 安裝全局的同時,也安裝項目依賴包
gulp安裝與使用
gulp是在node.js中需要下載的依賴包，它主要用於壓縮打包程序，在瀏覽器上運行的都是壓縮後的文件，這樣可以提高瀏覽器的加載速度，這種方法常用於打包項目
操作步驟如下：
1,建立文件夾目錄
src 源文件
dist 壓縮文件
src中
pages HTML文件
sass sass文件
js 未壓縮的js文件
images 圖片
radio 音頻
video 視頻
lib 壓縮好的js文件
2,格式化依賴包信息
npm init -y 格式化成功後會出現 package.json 文件，看下面的特別說明有解釋
3,安裝相應的依賴包
gulp 的全局依賴包
npm i -g gulp
gulp 的項目依賴包
npm i gulp
以上兩個依賴包全局，局部都要安裝，否則會出錯，無法進行壓縮打包
4，下載相應的打包壓縮規範依賴包
css的
npm i gulp-cssmin 壓縮依賴包
npm i gulp-autoprefixer 自動添加前綴依賴包
js的
npm i gulp-uglify 打包壓縮ES5語法規範依賴包
npm i gulp-babel 將其他ES語法規範轉化爲ES5語法規範
npm i @babel/core 這是兩個和 gulp-babel 配合使用的依賴包
npm i @babel/preset-env 說白了就是 gulp-babel 的兩個補丁文件,是讓 gulp-babel 能更正確的執行
下載4個依賴包 只要 加載 兩個依賴包
html的
npm i gulp-htmlmin html壓縮依賴包
webserver的
npm i gulp-webserver webserver依賴包
del的
npm i del 刪除依賴包
下載好依賴包後要創建 gulpfile.js 文件, 文件名稱,必須是這個名稱,一個字母都不能錯,大小寫也不能錯
gulp運行時,只執行 gulpfile.js 文件 , 必須必須必須是這個名稱
在 gulpfile.js 文件中來定義 你要執行的 程序內容，首先就是先引入依賴包模塊
// 首先引入第三方模塊，gulp模塊
const gulp = require('gulp');
// 導入css文件壓縮相關依賴包
const cssmin = require('gulp-cssmin');
// 添加兼容前綴依賴包
const autoprefixer = require('gulp-autoprefixer');
// 定義的內容,是固定語法形式 有這個定義,自動添加兼容前綴依賴包纔會起作用
// 需要加入到package.json中才會起作用
// "browserslist": [
// "last 2 versions", // 兼容 瀏覽器 最新的2個版本, 沒有特別設定的瀏覽器, 就兼容最新的兩個版本
// "IOS > 7", //IOS 系統 兼容 7版本以上
// "FireFox > 20" //火狐 瀏覽器 兼容 20版本以上
// ]
// 加載js壓縮相關依賴包
// 打包壓縮ES5規範的依賴包
const uglify = require('gulp-uglify');
// 將其他ES語法轉換爲ES5語法規範依賴包，還有兩個補丁文件，需要下載但不需要加載
// 因爲加載下面的這個那兩個補丁文件就自動加載到gulp-babel裏面了
const babel = require('gulp-babel');
// 加載html打包規範依賴包
const htmlmin = require('gulp-htmlmin');
// 加載內置服務器依賴包
const webserver = require('gulp-webserver');
// 加載sass依賴包
const sass = require('gulp-sass');
// 加載刪除的依賴包
const del = require('del');
// 定義sass的打包規範
const sassHandle = function () {
return gulp.src('./src/sass/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest('./dist/css'));
}
// 定義css壓縮規範，利用函數封裝，以返回值的形式定義程序內容
const cssHandle = function () {
return gulp.src('./src/css/*.css') // 告訴gulp要壓縮的css文件路徑
.pipe(autoprefixer()) // 添加前綴
.pipe(cssmin()) // 打包壓縮
.pipe(gulp.dest('./dist/css')) // 將壓縮的文件移到指定文件夾中保存
}
// 定義js壓縮規範，利用函數封裝，以返回值的形式定義程序內容
const jsHandle = function () {
return gulp.src('./src/js/*.js') // 告訴gulp要壓縮的css文件路徑
.pipe(babel({ presets: ['@babel/env'] })) // 將其他語法規範,轉化爲ES5語法規範, babel() 中的參數是固定的語法格式
.pipe(uglify()) // 打包壓縮js文件
.pipe(gulp.dest('./dist/js')) // 將壓縮的文件移到指定文件夾中保存，就是寫入到文件中，有就是添加內容，沒有這個文件就是新建
}
// 定義html壓縮規範
const htmlHandle = function () {
return gulp.src('./src/pages/*.html')
.pipe(htmlmin({
removeAttributeQuotes: true, // 打包時刪除屬性值上的雙引號
removeComments: true, // 刪除程序中的註釋內容
collapseBooleanAttributes: true, // 刪除布爾屬性中定義的屬性值
collapseWhitespace: true, // 刪除程序中多餘的空格,只刪除標籤之前的空格,標籤內部和內容的空格不會刪除
minifyCSS: true, // 壓縮HTML標籤中的css程序代碼
minifyJS: true, // 壓縮html標籤中的js代碼
}))
.pipe(gulp.dest('./dist/pages')) // 打包好的文件移到指定文件夾保存
}
// 定義服務器執行規範
const webserverHandle = function () {
return gulp.src('./dist') // 指定的路徑是壓縮文件的路徑,也就是在服務器上運行的都是壓縮文件,提高頁面中程序的執行效率
.pipe(webserver({
host: '127.0.0.1', // 定義的域名地址,目前使用本地域名地址127.0.0.1
port: 8000, // 定義端口號
open: './pages/index.html', // 默認打開執行的網頁,也就是 輸入 127.0.0.1:8080 直接打開的網頁
livereload: true, // 熱啓動 當文件內容,代碼,css,js等發生改變時,會自動重新加載頁面,執行效果,不用手動刷新
}))
}
// 音頻,視頻,圖片等,不打壓縮,直接移動到指定的文件夾位置
// 將所有格式的圖片,都移動到指定的文件夾位置中
// 添加到 watch 監聽中 和 default 默認執行中
const imgHandle = function () {
return gulp.src('./src/images/*.*') // 指定要移動的圖片的文件夾位置
.pipe(gulp.dest('./dist/images')) // 指定移動到的文件夾位置
}
// 定義刪除規範
const delHandle = function () {
return del(['./dist']);
}
// 定義監聽規範
const watchHandle = function () {
// 如果監聽的文件發生改變就立馬重新執行壓縮規範
gulp.watch('./src/css/*.css', cssHandle);
gulp.watch('./src/js/*.js', jsHandle);
gulp.watch('./src/pages/*.html', htmlHandle);
gulp.watch('./src/sass/*.scss', sassHandle);
gulp.watch('./src/images/*.*', imgHandle); // 監聽 圖片 文件
}
// 定義gulp文件的默認執行程序以及程序的執行順序
// 定義默認執行的程序,定義之後,不用寫 node gulpfile.js 執行程序
// 直接執行 gulp 就可以了,會默認的執行定義的程序內容
// 默認按照順序,執行()中的程序
// 先執行 刪除規範,刪除的是之前,壓縮的文件
// 在執行 同時執行 所有的壓縮規範
module.exports.default = gulp.series( // 按照順序執行
delHandle, // 第一步,先執行刪除規範
gulp.parallel(cssHandle, jsHandle, htmlHandle, imgHandle, sassHandle), // 第二步,同時執行所有的壓縮規範,css,html,js等等....
webserverHandle, // 設置服務器，會自動打開設定的默認頁面
watchHandle, // 第三步,執行的是監聽規範,隨時監聽源文件的改變
);
特別說明:
gulpfile.js 我們程序員自動手動定義的文件
gulp執行打包壓縮時,會只執行 這個文件名中的打包壓縮程序
package.json 執行 npm init -y 自動生成的文件
其中會存儲 下載使用 依賴包的相關信息
是一個非常重要的文件
package-lock.json 執行 npm 下載安裝依賴包之後 自動生成的文件
沒啥大用,但是也要留着,別刪除,之後會用
編譯 sass 文件
1,單一文件的編譯
sass 你要編譯的文件 編譯之後的文件名稱 例如：sass demo.scss demo1.css
可以定義編譯生成的文件的名稱
但是,源scss文件,每次修改之後,都要再次執行編譯纔會生成新的內容的css文件
2,單一文件的時時編譯
sass --watch 你要編譯的sass文件:生成的文件 sass --watch demo.scss:demo1.css 都是文件
監聽形式,如果源scss文件發生改變,自動生成新的編譯的css文件
但是,這種語法,只能監聽一個scss文件
3,時時監聽一個文件夾,多文件的時時編譯
sass --watch 你要編譯的sass文件夾:生成的文件夾
不能定義文件名稱的,生成與源文件,文件名相同,文件類型不同的css文件
說明:
map文件的作用
map 稱爲映射
map 文件是映射生成的代碼的位置,表示原文件中代碼的所在的行數
實際項目中,後代代碼調試,有可能造成sass文件代碼與對應的css代碼的行數不同
map映射文件,是爲了在控制檯中,顯示css樣式是在 sass 文件中的源碼位置
所謂的映射:
映射概念是 計算機編程中,常見的一個名詞
我們之前也接觸過,類似映射的概念
數組a 是 [1,2,3,4,5]
將數組a中所有的數據,數值乘以2,形成一個新的數組b
數值b 是 [2,4,6,8,10]
數組b,就是數組a的映射
通俗得講,所謂的映射,就是將 A 通過 一定的規範 轉化生成 B
那麼 B 就是 A 的映射
sass在gulp中的使用方法
首先下載 相關的依賴包
下載sass依賴包,將 sass 語法編譯爲 css語法
依賴包要下載爲項目形式,也就是sass與gulp一樣,要有全局和項目的兩個依賴包
全局的 sass 平時編譯使用的
npm i -g sass
項目的 gulp-sass 打包壓縮使用的
npm i gulp-sass 常用這種方法，如果出錯可以使用下面這種方法
下載gulp-sass時,有可能出現問題
1,使用的是 taobao 地址,但是因爲現在 taobao 地址下載 gulp-sass會有問題,需要新增地址
需要新增 gulp-sass專用下載地址
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
如果 taobao 不能下載 gulp-sass 直接執行這個命令
在 taobao 地址中,新增一個 gulp-sass 專用的下載地址
2,如果還是報錯,不行,就需要做另外的操作了
(1) 下載一個 node-sass 全局作用域
npm i -g node-sass
(2) 再下載安裝 gulp-sass 項目作用域的
npm i gulp-sass
sass在gulp中的代碼在上面，有需要可以參考