glup和sass node.js

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地址名称 切换下载地址
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任务

gulp_text 项目文件夹

• src 项目源代码目录
  • css 存放 css 所有文件
  • data 存放数据文件
  • js 存放 js 所有文件
  • lib 存放一些第三方和公共资源（swiper/utils/...）
  • pages 存放所有页面
  • sass 存放 sass 所有文件
  • static 存放所有静态资源文件
    • audios 存放所有音频文件
    • images 存放所有图片文件
    • videos 存放所有视频文件
• gulpfile.js 该项目的 gulp 打包规则
• package.json npm 的项目管理文件

const gulp=require('gulp')//导入gulp模块
const gulpcssmin=require('gulp-cssmin')//压缩css文件插件
const autopre=require('gulp-autoprefixer')//自动给css兼容前缀
const uglify=require('gulp-uglify')//将js文件进行压缩 不认识es6
const babel=require('gulp-babel')//将jsEs6转换成Es5 还需要下载@babel/core 和@babel/preset-env 
const sass=require('gulp-sass')//将sass压缩成css
const htmlmin=require('gulp-htmlmin')//压缩html文件
const include=require('gulp-file-include')//导入html片段
const del=require('del')//专门用来删除文件夹的
const webserver=require('gulp-webserver')//开启webserver服务的
gulp.task('css',function(){//创建'css'任务
return gulp//return可以返回一个结束时间
.src('./src/css/*.css')//找到文件地址
.pipe(autopre())//创建管道函数任务，调用函数给css兼容前缀
.pipe(gulpcssmin())//压缩css文件
.pipe(gulp.dest('./dist/css'))//放置到那个文件夹
})
gulp.task('sass',function(){
return gulp
.src('./src/sass/*.scss')
.pipe(sass())//将sass转换成css
.pipe(autopre())//css兼容前缀
.pipe(gulpcssmin())//压缩css文件
.pipe(gulp.dest('./dist/css'))//放置文件
})
gulp.task('js',function(){
return gulp
.src('./src/js/*.js')
.pipe(babel({//es6转es5函数调用
presets:['@babel/env']//配置参数进行语法转换
}))
.pipe(uglify())//压缩js文件
.pipe(gulp.dest('./dist/js'))
})
gulp.task('html',function(){
return gulp
.src('./src/pages/*.html')
.pipe(include({//导入Html片段函数调用
prefix:'@cc',//看到的标识符，html看到识别解析
basepath:'./components'//存放html片段的地址
//你定义的标识符include（你要导入的html的片段名称）来进行导入
//标识符include(html片段名，({'变量名'：'值'})json格式的数据)可以传多个 控制类名
//定义的标识符+变量名 书写片段时可以写变量 在导入html片段是传递 
}))
.pipe(htmlmin({//压缩html
collapseWhitespace:true,//移除空行
collapseBooleanAttributes:true,//移除值为布尔值的属性
removeEmptyAttributes:true,//移除空属性
removeComments:true,//移除注释
minifyCSS:true,//把内嵌的style的标签合起来
minifyJS:true,//把内嵌的script的标签合起来
}))
.pipe(gulp.dest('./dist/pages'))
})
gulp.task('del',function(){
return del('./dist')//要删除的文件夹 可以直接使用
})
gulp.task('webserver',function(){
return gulp
.src('./dist')
.pipe(webserver({//开启服务
host:'www.520.com',//域名 
post:'80',//端口号
open:'./pages/lx.html',//你默认打开的那个文件，直接从dist文件夹开始的目录
livereload:true,//自动刷新
proxies:[//你所有的代理配置
{
source:'/list',//你请求的代理标识符 自己起的名字
target:'https://mall.360.cn/h5/getPrimaryCategory'//你请求的代理地址
}
]
}))
})
gulp.task('watch',function(){
gulp.watch('./src/css/*.css',gulp.series('css'))//监控文件变化 并调用创建任务
//gulp.series()逐个执行任务
//gulp.parallel()并行执行任务
})
gulp.task('node',function(){
return gulp
.src('./src/node_modules')
.pipe(gulp.dest('./dist'))
})
gulp.task('default',gulp.series(gulp.parallel('css','js','html','node'),'webserver','watch'))
//定义一个默认任务default default：当你运行gulp的时候，唯独default不用写 创建任务的时候 函数位置直接写gulp.parallel