gulp、动态样式语言

151 阅读4分钟

一、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("跳舞");
})
  • 复制:
    1. gulp.src("入口文件路径"); -- 选中某个、某些源文件
    2. gulp.pipe(); -- 管道 -- 输送/插件操作
    3. 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"))
})
  • 文件的路径写法
    1. 想找到src下面的html下面的1.html:src/html/1.html
    2. 想找到src下面的html下面的所有的html:src/html/*.html
    3. 想找到src下面的html下面的所有的文件:src/html/*
    4. 希望将src下面的/下面的所有内容都复制一份:src//

1.5 gulp的插件

  • 压缩css步骤:gulp-cssmin插件
    • npm下载插件:npm i gulp-cssmin
var cssmin = require("gulp-cssmin");//压缩css
var rename = require("gulp-rename");//重命名
// css压缩
 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");//压缩js
// 压缩js
 gulp.task("perfect",()=>{
     gulp.src("src/*/*.js")
         .pipe(uglify())
         .pipe(gulp.dest("dist"))
})
  • ES降级:gulp-babel
    • 目的:语法变回ES5 老IE也能支持我们写的语法
    • 安装:
      • npm install --save-dev gulp-babel@7 babel-core babel-preset-env
      • npm install --save-dev babel-preset-es2015
      • 配置一个文件必须名为.babelrc:写入:
        {
            "presets": ["es2015"]
        }
        
var babel = require("gulp-babel");//降级
// 降级 压缩js  必须先降级再压缩  记得要要把严格模式给删掉
 gulp.task("perfect",()=>{
     gulp.src("src/*/*.js")
         .pipe(babel())
         .pipe(uglify())
         .pipe(gulp.dest("dist"))
})
var tinypng = require("gulp-tinypng-compress");//压缩图片 每月只能500张
// 图片压缩
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

  • 变量
    1. 创建:$变量名: 值;
    2. 使用时,$不能省略
    3. 不区分中划线和下划线
    4. 依然具有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 "文件路径";
/*
只认识多行注释
*/
@import "01变量.scss";
@import "02嵌套.scss";
  • 混合器:类似于JavaScript中的函数
@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);
}