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

ctrl+c两次 关闭Node.js
dir(查看当前文件下的所有文件)
tree(查看 当前目录下所有目录的文件夹,以树状结构给你展示)
cd (进入某一个文件夹)
cd文件夹名称
cd..(去到上一级目录)
盘符:(切换盘符)不区分大小写
md文件夹名称(在当前目录下创建一个文件夹)
rd文件夹名称(删除当前目录下的文件夹)
xcopy文件夹名称 新的名称(复制一个文件夹)
type nul>文件名 (创建一个文件)
echo 输出文本内容》文件名(向文件里面写入内容) 覆盖式写入
echo 文本内容》》文件名(向文件里面追加内容)
del 文件名 ( 删除一个文件)
copy 文件名 ( 复制一个文件)
move 文件名 路径 (移动一个文件)
ren 文件名称 新文件名称 (修改文件名称)可以批量+*
文件名 回车(打开文件)
cls (清屏)
ipconfig(查看ip链接信息)
ping 地址(测试网络延迟)
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表示当前服务,默认监听127.0.0.1域名
req:表示当前请求
res:response给当前请求一个响应
res.end()给客户端一个响应信息
listen()用来监听端口号的
语法:server.listen(你要监听的端口号,回调函数)
req requset 请求
1,req.headers 请求头
2,req.methods 请求方式
3,req.url 请求地址
res response响应
1,res.statusCode=状态码
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开发依赖 -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 你要监控的文件夹:你要生成的文件夹
\ $变量名称:值

子类选择器
&自己规则集,链接伪类伪元素
属性嵌套-可以替换:{}进行写入
使用@mixin 函数名(可以传参变量:默认参数){}
使用@include函数名 调用
形参定义就是直接在(变量1,变量2,变量3)
@include 混合器名称(实参1,实参2,实参3)调用
使用关键字@extend要继承的规则集 css里面的标签属性
语法:@import ''要导入的文件 scss
gulp
$ npm i -g gulp 安装gulp
可以运行gulp的指令 检测
gulp 项目名称 运行
gulpfile.js文件这个文件里面就来书写一些配置项
dependencies记载着下载的项目依赖
devDependencies记载着开发依赖
npm i --save-dev gulp 项目依赖 简写-D
直接require(第三方包名) 导入依赖
方法
gulp.task(参数,函数)创建任务
gulp.src('./src/css/*.css')找文件
gulp.pipe(方法)管道函数 做事情
gulp.dest('./dist/css')放置文件 在管道函数里使用
gulp.series()逐个执行任务
gulp.parallel()并行执行任务
gulp.watch(文件,执行的任务)监控文件 发生改变执行

第三方模块
gulp-cssmin 压缩css文件 调用函数导入()
gulp-sass 将cass压缩成css node-sass不成功先装这个
gulp-autoprefixer 自动给css兼容前缀 需要传参
browsers:['last 2 versions'] 兼容最近的两个版本
或者package.json 里面添加数组'browserslist':['last 2 versions'] 就可以不用写参数了

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传递参数进行语法转换

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格式的数据)可以传多个 控制类名
定义的标识符+变量名 书写片段时可以写变量
在导入html片段是传递

gulp-imagemin 压缩图片的 一般不用
定义一个默认任务default
default:当你运行gulp的时候,唯独default不用写
创建任务的时候 函数位置直接写gulp.parallel

del 专门用来删除文件夹的 第三方模块
del('./dist')要删除的文件夹 可以直接使用

gulp-webserver() 专门打开一个浏览器 第三方模块
需要配置参数
src(./dist)文件夹
C>windows>system32>drivers>etc hosts配置站点域名
host:''域名
pont''端口号
open:''你默认打开的那个文件,直接从dist文件夹开始的目录
livereload:true,自动刷新
webserver里直接配置参数代理:
proxies:[你所有的代理配置
{
source:'/list',你请求的代理标识符 自己起的名字
target:'http://localhost:80/server/list.php'你请求的代理地址
},
可以直接代理一个文件夹
]

监控文件变化 创建watch任务

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,428评论 1 32
  • 原文标题:Gulp for Beginners作者: Zell Liew翻译:治电小白菜原文地址:https://...
    ZZES_ZCDC阅读 1,570评论 6 18
  • 原文地址:https://css-tricks.com/gulp-for-beginners/原文代码:https...
    小雨雪smile阅读 1,471评论 0 2
  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 907评论 0 1
  • Sass&Gulp 一、sass介绍 (一) SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计...
    锋享前端阅读 1,489评论 0 3