node.js的基本操作以及sass和gulp

ctrl+c兩次 關閉Node.js
dir(查看當前文件下的所有文件)
tree(查看 當前目錄下所有目錄的文件夾迷扇,以樹狀結構給你展示)
cd (進入某一個文件夾)
cd文件夾名稱
cd..(去到上一級目錄)
盤符:(切換盤符)不區(qū)分大小寫
md文件夾名稱(在當前目錄下創(chuàng)建一個文件夾)
rd文件夾名稱(刪除當前目錄下的文件夾)
xcopy文件夾名稱 新的名稱(復制一個文件夾)
type nul>文件名 (創(chuàng)建一個文件)
echo 輸出文本內容》文件名(向文件里面寫入內容) 覆蓋式寫入
echo 文本內容》》文件名(向文件里面追加內容)
del 文件名 ( 刪除一個文件)
copy 文件名 ( 復制一個文件)
move 文件名 路徑 (移動一個文件)
ren 文件名稱 新文件名稱 (修改文件名稱)可以批量+*
文件名 回車(打開文件)
cls (清屏)
ipconfig(查看ip鏈接信息)
ping 地址(測試網(wǎng)絡延遲)
systeminfo(查看電腦基本配置信息)
tap(當你寫文件或者文件夾名稱的時候自動補全)
esc(取消當前的輸入)

require(文件路徑)導入
module.exports是一個對象 導出
內置模塊
path模塊
Join拼接路徑
fs模塊
語法:readFile(你要讀取的文件路徑,文件格式,function(err,data){})
語法:writeFile(你要寫入的路徑押搪,寫入的內容,function(){}
同步讀取
const res=readFileSync(你要讀取的文件恨樟,讀取文件的格式)
同步寫入
fs.writeFileSync(你要寫入的文件,你要寫入的內容)
HTTP模塊
createServer()
語法:const server = http.createServer(function(req,res){})
server表示當前服務,默認監(jiān)聽127.0.0.1域名
req:表示當前請求
res:response給當前請求一個響應
res.end()給客戶端一個響應信息
listen()用來監(jiān)聽端口號的
語法:server.listen(你要監(jiān)聽的端口號虐拓,回調函數(shù))
req requset 請求
1,req.headers 請求頭
2单绑,req.methods 請求方式
3回官,req.url 請求地址
res response響應
1,res.statusCode=狀態(tài)碼
2,res.setHeaders('content-type','text/palin')
3,res.writeHead(200,{'content-type','text/palin'}
4,res.write()
5,res.end

npm -v npm檢測
npm install jquery 下載jquery
npm install swiper下載一個swiper
npm i 包名@版本號下載bootstrap
npm i 包名 —S開發(fā)依賴 -D項目依賴//
npm view 包名 versions 在npm上查看所有包的版本
npm init npm的初始化
npm init -y npm的初始化
npm uninstall 包名 npm的卸載包
npm uninstall 包名 -S -D刪除包
npm update 包名 升級包 當前大版本的最新版本
npm i 下載所有依賴
npm cache clear -f清除緩存
npm cache clean -f
c:用戶》名字》appData(隱藏)》roaming>npm-cache刪除
npm i - -global nrm
npm i -g nrm 安裝全局包
nrm --version安裝完畢檢測安裝
nrm test檢測可以使用的下載地址的延遲信息
nrm use地址名稱 切換下載地址
首先我們在cmd中輸入npm config get registry命令查看npm的默認下載地址
https://registry.npmjs.org/默認
$ npm config set registry http://jnpm.cbpmgt.com/ JD
再使用npm config set registry https://registry.npm.taobao.org命令將默認下載地址改成淘寶鏡像就可以了。
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
node-sass會從淘寶鏡像源下載

npm i -g sass 安裝sass工具
sass是沒有括號scss有括號
sass -v 檢測安裝
sass你要轉換的文件 你要轉成什么文件
sass --watch 你要編譯的文件:你要生成的文件
sass --watch 你要監(jiān)控的文件夾:你要生成的文件夾
\ $變量名稱:值

子類選擇器
&自己規(guī)則集搂橙,鏈接偽類偽元素
屬性嵌套-可以替換:{}進行寫入
使用@mixin 函數(shù)名(可以傳參變量:默認參數(shù)){}
使用@include函數(shù)名 調用
形參定義就是直接在(變量1歉提,變量2,變量3)
@include 混合器名稱(實參1区转,實參2苔巨,實參3)調用
使用關鍵字@extend要繼承的規(guī)則集 css里面的標簽屬性
語法:@import ''要導入的文件 scss
gulp
$ npm i -g gulp 安裝gulp
可以運行gulp的指令 檢測
gulp 項目名稱 運行
gulpfile.js文件這個文件里面就來書寫一些配置項
dependencies記載著下載的項目依賴
devDependencies記載著開發(fā)依賴
npm i --save-dev gulp 項目依賴 簡寫-D
直接require(第三方包名) 導入依賴
方法
gulp.task(參數(shù),函數(shù))創(chuàng)建任務
gulp.src('./src/css/*.css')找文件
gulp.pipe(方法)管道函數(shù) 做事情
gulp.dest('./dist/css')放置文件 在管道函數(shù)里使用
gulp.series()逐個執(zhí)行任務
gulp.parallel()并行執(zhí)行任務
gulp.watch(文件蜗帜,執(zhí)行的任務)監(jiān)控文件 發(fā)生改變執(zhí)行

第三方模塊
gulp-cssmin 壓縮css文件 調用函數(shù)導入()
gulp-sass 將cass壓縮成css node-sass不成功先裝這個
gulp-autoprefixer 自動給css兼容前綴 需要傳參
browsers:['last 2 versions'] 兼容最近的兩個版本
或者package.json 里面添加數(shù)組'browserslist':['last 2 versions'] 就可以不用寫參數(shù)了

gulp-uglify 將js文件進行壓縮 不認識ES6
gulp-babel 將JSes6換成es5 還需要兩個包 8版本
@babel/core 8版本||babel-core 7版本
@babel/preset-env 8版本||babel-preset-env 7版本
下載需要三個 引入一個就可以
presets:['@babel/env'] babel傳遞參數(shù)進行語法轉換

gulp-htmlmin 壓縮Html文件 需要配置
htmlmin({
collapseWhitespace:true,移除空行
collapseBooleanAttributes:true,移除值為布爾值的屬性
removeEmptyAttributes:true,移除空屬性
removeComments:true,移除注釋
minifyCSS:true,把內嵌的style的標簽合起來
minifyJS:true,把內嵌的script的標簽合起來
})
components 片段文件夾
gulp-file-include 導入html片段 第三方模塊需要傳參
prefix:'@s',定義的表示符 看到解析
basepath:'',存放html片段的路徑地址
你定義的標識符include(你要導入的html的片段名稱)來進行導入
標識符include(html片段名恋拷,({'變量名':'值'})json格式的數(shù)據(jù))可以傳多個 控制類名
定義的標識符+變量名 書寫片段時可以寫變量
在導入html片段是傳遞

gulp-imagemin 壓縮圖片的 一般不用
定義一個默認任務default
default:當你運行gulp的時候,唯獨default不用寫
創(chuàng)建任務的時候 函數(shù)位置直接寫gulp.parallel

del 專門用來刪除文件夾的 第三方模塊
del('./dist')要刪除的文件夾 可以直接使用

gulp-webserver() 專門打開一個瀏覽器 第三方模塊
需要配置參數(shù)
src(./dist)文件夾
C>windows>system32>drivers>etc hosts配置站點域名
host:''域名
pont''端口號
open:''你默認打開的那個文件厅缺,直接從dist文件夾開始的目錄
livereload:true,自動刷新
webserver里直接配置參數(shù)代理:
proxies:[你所有的代理配置
{
source:'/list',你請求的代理標識符 自己起的名字
target:'http://localhost:80/server/list.php'你請求的代理地址
}蔬顾,
可以直接代理一個文件夾
]

監(jiān)控文件變化 創(chuàng)建watch任務

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市湘捎,隨后出現(xiàn)的幾起案子诀豁,更是在濱河造成了極大的恐慌,老刑警劉巖窥妇,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件舷胜,死亡現(xiàn)場離奇詭異,居然都是意外死亡活翩,警方通過查閱死者的電腦和手機烹骨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來材泄,“玉大人沮焕,你說我怎么就攤上這事±冢” “怎么了峦树?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長旦事。 經常有香客問我魁巩,道長,這世上最難降的妖魔是什么姐浮? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任谷遂,我火速辦了婚禮,結果婚禮上单料,老公的妹妹穿的比我還像新娘埋凯。我一直安慰自己点楼,他們只是感情好,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布白对。 她就那樣靜靜地躺著掠廓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪甩恼。 梳的紋絲不亂的頭發(fā)上蟀瞧,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天,我揣著相機與錄音条摸,去河邊找鬼悦污。 笑死,一個胖子當著我的面吹牛钉蒲,可吹牛的內容都是我干的切端。 我是一名探鬼主播,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼顷啼,長吁一口氣:“原來是場噩夢啊……” “哼踏枣!你這毒婦竟也來了?” 一聲冷哼從身側響起钙蒙,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤茵瀑,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡病蛉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了鸿捧。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡疙渣,死狀恐怖笛谦,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情昌阿,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布恳邀,位于F島的核電站懦冰,受9級特大地震影響,放射性物質發(fā)生泄漏谣沸。R本人自食惡果不足惜刷钢,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望乳附。 院中可真熱鬧内地,春花似錦伴澄、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至荆针,卻和暖如春敞嗡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背航背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工喉悴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人玖媚。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓箕肃,卻偏偏與公主長得像,于是被迫代替她去往敵國和親今魔。 傳聞我的和親對象是個殘疾皇子勺像,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內容

  • 在現(xiàn)在的前端開發(fā)中,前后端分離涡贱、模塊化開發(fā)咏删、版本控制、文件合并與壓縮问词、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,433評論 1 32
  • 原文標題:Gulp for Beginners作者: Zell Liew翻譯:治電小白菜原文地址:https://...
    ZZES_ZCDC閱讀 1,574評論 6 18
  • 原文地址:https://css-tricks.com/gulp-for-beginners/原文代碼:https...
    小雨雪smile閱讀 1,472評論 0 2
  • 安裝Gulp首先需要安裝Node.js督函,并在控制臺輸入$ npm install gulp -gMac端需要寫成$...
    LaBaby_閱讀 911評論 0 1
  • Sass&Gulp 一、sass介紹 (一) SASS是一種CSS的開發(fā)工具激挪,提供了許多便利的寫法辰狡,大大節(jié)省了設計...
    鋒享前端閱讀 1,494評論 0 3