gulp、动态样式语言

玛卡巴卡21
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);
}
avatar
文章
阅读
粉丝