一、gulp
自动化构建工具(打包工具),gulp是基于node.js编写的一个第三方模块(包、独立软件)。
1.1 作用:
- 复制文件
- 压缩(css/js/图片...)
- 降级ES6为ES5,降级语法
- 将scss/less编译为css
- 重命名
1.2 为什么打包
1.3 下载安装
- cmd必须先全局安装gulp(不安的话,cmd提示:gulp不是内部命令) - 必做(运行gulp必要方式),一次性安装永久可用:npm i --global gulp
- cmd再你的项目中局部安装:npm i gulp
- cmd在你的项目初始化gulp:npm init
- 名字可以自己写,但是不能有大写&中文
- 配置完成,开始编写属于你自己的gulpfile.js文件!!!必须是这个名字
1.4 如何使用gulp
- 先引入var gulp=require("gulp");
- 布置任务:
gulp.task("任务名",()=>{
})
- 执行任务:
cmd里面输入gulp 任务名; - gulp基于node,但是属于是一个独立的软件
如果想不写任务名,默认执行default任务名的操作
var gulp = require("gulp");
gulp.task("dance",()=>{
console.log("跳舞");
})
- 复制:
- gulp.src("入口文件路径"); -- 选中某个、某些源文件
- gulp.pipe(); -- 管道 -- 输送/插件操作
- gulp.dest("出口路径"); -- 输送到哪里去
gulp.task("copyIndex",()=>{
gulp.src("src/index.html")
.pipe(gulp.dest("dist"))
})
gulp.task("copy",()=>{
gulp.src("src/*")
.pipe(gulp.dest("dist"))
gulp.src("src/*/*")
.pipe(gulp.dest("dist"))
})
- 文件的路径写法:
- 想找到src下面的html下面的1.html:src/html/1.html
- 想找到src下面的html下面的所有的html:src/html/*.html
- 想找到src下面的html下面的所有的文件:src/html/*
- 希望将src下面的/下面的所有内容都复制一份:src//
1.5 gulp的插件
- 压缩css步骤:gulp-cssmin插件
- npm下载插件:npm i gulp-cssmin
var cssmin = require("gulp-cssmin");
var rename = require("gulp-rename");
gulp.task("perfect",()=>{
gulp.src("src/*/*.css")
.pipe(cssmin())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest("dist"))
})
- 压缩js步骤:gulp-uglify插件
- npm下载插件:npm i gulp-uglify
var uglify = require("gulp-uglify");
gulp.task("perfect",()=>{
gulp.src("src/*/*.js")
.pipe(uglify())
.pipe(gulp.dest("dist"))
})
- ES降级:gulp-babel
- 目的:语法变回ES5 老IE也能支持我们写的语法
- 安装:
var babel = require("gulp-babel");
gulp.task("perfect",()=>{
gulp.src("src/*/*.js")
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest("dist"))
})
var tinypng = require("gulp-tinypng-compress");
gulp.task('perfect', function() {
gulp.src('src/*/*.{png,jpg,jpeg,gif,ico}')
.pipe(tinypng({
key: 'jMcJCqBpbf7gHYwKM8BXYX9svKRdcKdg',
sigFile: 'dist/.tinypng-sigs',
log: true
}))
.pipe(gulp.dest('dist'));
})
二、动态样式语言
sass/scss、less,在css的基础上,添加了新特性,目的:【简化css开发】
2.1 静态样式语言:css
2.2 常见的动态样式语言:
- sass/scss
- less
- stylus - 和css语法差别较大
2.3 编译:
- 浏览器只认识css,不认识其他的动态样式语言,动态样式语言-(编译)->自动得到一个css,html网页真正的引入的是css
- HBuilder:工具->倒数第一个插件,可以编译less和scss (手动)
- VSCode:安装一个插件:easy sass,编译你写的scss,你只要一保存就会自动生成一个css (自动)
2.4 Scss
- 变量:
- 创建:$变量名: 值;
- 使用时,$不能省略
- 不区分中划线和下划线
- 依然具有js的作用域,全局变量和局部变量,如果某个变量在选择器内部创建的,则为局部变量,放在最外面的就是全局变量
$w:100px;//变量
div {
$b_g: red;
width: $w;
background-color: $b-g;//不区分_和-
}
$w: 200px;
.d1 {
width: $w;
.d2 {
background-color: red;
>.d4 {
height: 50px;
&:hover {//&类似于JavaScript中的this,被那个{}所包裹,就是那个选择器
height: 30px;
}
}
}
.d3 {
color: pink;
}
}
//编译后
.d1 {
width: 200px;
}
.d1 .d2 {
background-color: red;
}
.d1 .d2 > .d4 {
height: 50px;
}
.d1 .d2 > .d4:hover {
height: 30px;
}
.d1 .d3 {
color: pink;
}
@import "01变量.scss";
@import "02嵌套.scss";
@mixin whb($w:10px,$h:20px,$b:pink){
width: $w;
height: $h;
background-color: $b;
}
div {
@include whb(500px,400px);
}
section {
@include whb(200px,100px,green);
}
//编译后
div {
width: 500px;
height: 400px;
background-color: pink;
}
section {
width: 200px;
height: 100px;
background-color: green;
}
.con {
width: 100px;
height: 200px;
}
ul {
@extend .con;
background-color: pink;
}
//编译后
.con, ul {
width: 100px;
height: 200px;
}
ul {
background-color: pink;
}
- 运算符:主要是用于颜色值的运算:支持+ - * /,越往0靠近数字越小,就越暗淡,越往f靠近数字就越大,就越明亮
$bg:red*1.1;//调亮10%
div {
background-color: $bg;
}
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}
//编译后
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
2.5 Less
@b-g:red;
div {
background-color: @b-g;
}
.whb(@w:0px,@h:0px,@b:transparent){
width: @w;
height: @h;
background: @b;
}
div{
.whb()
}
span{
.whb(100px,100px,red);
}
p{
.whb(@b:red);
}