学习记录-gulp常用插件使用方法，require.js模块化开发，sass使用方法

谁借莪１个温暖的怀抱￠ 2023-05-28 06:44 24阅读 0赞

## gulp常用插件使用方法 ##

在本地创建一个gulpfile.js的文件，专门gulp去编写任务的gulpfile.js 中编写任务 需要在控制台通过  
**gulp 任务名（ 运行你编写好的任务）**

**注意一个雷区**：gulp4.0后的版本和node.js不太兼容，所以推荐大家使用gulp3.9.1 然后使用vnm下载多个版本的node js 进行版本切换

例：require.js中编写下面的函数 然后在CMD中 进入文件路径后  
gulp hello 即可运行

const gulp = require("gulp");
    //编写第一个任务
    /* 第一个参数：任务的名字自定义 第二个参数：回调函数，任务执行的功能 */
    gulp.task("hello",function(){ 
        console.log("hello world");
    })

**.给gulp添加插件，插件的详细用法**  
见官网： https://gulpjs.com/plugins/

**使用第三方插件的步骤：**  
commonJS规范  
**1.先去下载插件到本地**  
cnpm install 插件名字 --save-dev  
或者  
cnpm i 插件名字 -D  
**2.通过require（）引入文件**  
**3.查询插件的用法**

**注意：**  
开发版本:index.css  
上线版本：index.min.css  
重点： jQuery编写的代码大家不要合并和压缩  
记住：给别人代码的时候，node\_modesls 删除掉  
拿到这个这个项目后，进入目录，重新下载所有的依赖的插件在package.json中有记录 直接运行cnpm install 即可重新下载所有的插件

--------------------

## 常用插件及使用方法 ##

--------------------

/\*

gulp.src()  找到源文件路径

gulp.dest()  找到目的文件的路径，{ 注}：如果设置这个目的文件路径不存在，会自动创建

pip()    程序运行管道

**1.复制.html文件**

gulp.task("copy-html",function(){ 
        return gulp.src("index.html").pipe(gulp.dest("dist/"))
        .pipe(connect.reload());//实时刷新;
    })

**2.静态文件，拷贝图片**

gulp.task("images",function(){ 
        // return gulp.src("img/*.png").pipe(gulp.dest("dist/iages"));拷贝.png
        // return gulp.src("img/*.{png,ipg}").pipe(gulp.dest("dist/iages"));.png .jpg 全部拷贝
        // return gulp.src("img/*/*").pipe(gulp.dest("dist/iages"));//只拷贝了文件里面的文件内容
        return gulp.src("img/**/*").pipe(gulp.dest("dist/iages"))
        .pipe(connect.reload());//实时刷新;
    
    })

**3.拷贝多个文件到一个目录**

gulp.task("data",function(){ 
        return gulp.src(["json/*.json","xml/*.xml","!xml/4.xml"]).pipe(gulp.dest("dist/data"));
    })

**4.一次性执行多个任务的操作 注意：4.0以后新增语法 多任务必须用gulp.series将右边的两个函数括起来**

gulp.task("build",["copy-html","images","data"],function(){ 
        console.log("任务执行完毕");
    })

**5.监听，如果监听到文件有改变，会自动去执行对应的任务。更新数据**

gulp.task("watch",function(){ 
        /* 第一个参数，是文件监听的路径 第二个参数。我们要去执行的任务 */
        gulp.watch("index.html",["copy-html"]);
        gulp.watch("img/**/*",["images"]);
        gulp.watch(["json/*.json","xml/*.xml","!xml/4.xml"],["data"]);
    })

**6. scss 转成 css样式**

//引入文件 scss 转成 css样式
        const sass = require("gulp-sass");
        //压缩css gulp-minify-css 插件
        const minifyCSS = require("gulp-minify-css");
        //重命名插件 gulp-rename
        const rename = require("gulp-rename");
    ```javascript

7.**压缩文件gulp-minify-css**一般情况下压缩文件和重命名文件两个一起使用 将压缩的文件进行重命名后再传输\*\*

gulp.task("sass",function(){ 
            return gulp.src("stylesheet/index.scss")
            .pipe(sass())//调用sass函数编译
            .pipe(gulp.dest("dist/css"))//保存一份未压缩版本
            .pipe(minifyCSS())//压缩文件
            .pipe(rename("index.min.css"))//重命名
            .pipe(gulp.dest("dist/css"))
            .pipe(connect.reload());//实时刷新;//保存压缩版
        })

**8.gulp-concat 合并文件  
9.gulp-uglify 压缩js文件**

\*/

const concat = require("gulp-concat");//gulp-concat 合并文件
    
    const uglify = require("gulp-uglify");//gulp-uglify 压缩js文件
    
    
    gulp.task("scripts",function(){ 
        return gulp.src("JavaScript/*.js")
        .pipe(concat("index.js"))//合并成index.js文件
        .pipe(gulp.dest("dist/js"))
        .pipe(uglify())//压缩文件
        .pipe(rename("index.min.js"))//重命名压缩文件
        .pipe(gulp.dest("dist/js"))//保存压缩文件
        .pipe(connect.reload());//实时刷新
        
    })

**10.服务器处理**  
gulp-connect 启动一个服务器  
\*/

const connect = require("gulp-connect");
    
       gulp.task("server",function(){ 
           connect.server({ 
               root:"dist",//设置根目录
               port:8888,//设置端口号
               livereload:true //启动实时刷新 1. 启动监听 2.给每个需要刷新的任务添加.pipe(connect.reload());//实时刷新
           })
       })
    
    //同时启动监听和服务 default 默认任务 我们可以直接在控制台通过 gulp命令启动
    
    gulp.task("default",["watch","server"]);

## require.js模块化开发 ##

模块化开发的规范：

**CommonJS规范(服务器规范)，编写代码**

声明：
                module.exports = {
                    outa : showA,
                    outb : showB
                }
            引用：
                var moduleA = require("moduleA.js");
                moduleA.outa();
                modulea.outb();

**AMD规范(客户端、浏览器)**（常用）

声明：
                    define(function(){
                        //代码
                        return{
                            outA:showA,
                            outB：showB
                        }
                    })
                
                引入：(异步执行)
                    require("moduleA.js",function(){
                        //这里的代码，模块引入之后执行
                        moduleA.outA();
                        moduleA.outB();
                    })
    
                    alert("hello world");

小彩蛋 CMD规范

**ECMA6(模块化规范)**

export = { 
                        outA:showA
                        outB:showB
                    }
    
                    异步的
                    import moduleA from "moduleA.js "
                    moduleA.outA();
                    moduleA.outB();

在使用模块化开发的时候，我们需要先引用require.js官方的文件对我们的项目进行模块化管理，大家首先需要去下载这个文档，然后把文档放在我们的项目文件中

在html文件中引入一个script

模块化开发的作用域：管理当前页面上引入的所有.js文件

async='true' 异步加载   IE下不兼容
            IE下为 ： defer
    
            data-mian = ""  设置入口文件
            注：每一个.html文件都要有一个入口文件，管理当前.html页面使用所有的js代码
            注：后续引入的所有.js  后续都可以省略

主要管理文件 data-main

console.log("加载成功");
    /* 引入模块add.js模块,遵从AMD规范 第一个参数，必须是数组 因为模块不只有一个 /* 如果不想写路径的话 可以配置好路径 */
    require.config({   //配置路径
        paths:{ 
            //自定义模块的名字：引入模块的路径
            add:"demo/add",
            mul:"demo/mul"
        }
    })
    
    require(["add","mul"],function(addobj,mul){ //引入了两个模块add和mul两个模块
        //这里的代码，模块引入之后执行
        var res =  addobj.outadd(10,20);//调用addjs中对外暴露的函数
        var res1 = mul.outmul(5,2);
        alert(res);
        alert(res1);
        addobj.outshow();
        
    });

**add模块 一个同学开发的**

a同学封装  计算两个数的和计算的模块
    
    可以写多个函数，一般情况下我们把实现同类型功能的函数，放在一个模块
    
    遵从AMD规范
    
    */

define(function(){ 
        function add(x,y){ 
            return x + y;
        }
        function show(){ 
            console.log("hello world");
        }
        function ccc(){ 
            console.log("在mul中要使用的函数");
        }
        //对外暴露 外面只能调用对外暴露的函数
        return{ 
            outadd:add,
            outshow:show,
            outccc:ccc
        }
    });

另外一个同学开发的乘积的模块，并且在乘积模块中使用的a同学的加模块方法

/\*  
小B同学开发的两个数的乘积

当前模块依赖add模块

\*/

define(["add"],function(add){ 
        function mul(x,y){ 
            add.outccc();
            return x*y;
        }
        return{ 
            outmul:mul
        }
    });

## **sass使用方法** ##

让.css像编程一样进行样式的开发  
**sass/scss**  
.sass 1.不能有大括号，不能有分号 必须通过严格代码缩进进行编码  
.scss //1.可以有大括号，和分号 2.基本上使用方法和css语法方式一样

sass   比较古老的版本
          scss   改进的版本

**sass 安装及配置**  
大家可以去看一下sass官网的API文档里面有很详细的说明，不过下载过程不用镜像的话真的超慢

**sass文件**

//1.不能有大括号，不能有分号 必须通过严格代码缩进进行编码

body
        margin: 0px
        padding: 0px

**scss文件**

//1.可以有大括号，和分号  
//2.基本上使用方法和css语法方式一样

body{ 
        margin: 0px;
        padding: 0px;
    }

**1.声明变量**

$xxx:300px;  
$xxx:100px; **//普通变量**

**//默认变量**  
// $yyy:100px;  
$yyy:200px !default;//默认变量，只要有一个新值就会将这个值覆盖，无论前后  
还有局部变量，全局变量和JavaScript语法一致

**特殊变量**  
\#\{表达式/变量\}; 进行字符串拼接  
类似于js中的ECMA6 $\{\}

$zzz:top;
    #div4{ 
        border-#{ $zzz}:1px soild black;//border-top: 1px soild black; 类似于字符串拼接
    }

**引入公共样式**

.js   引入.js文件
    
    声明公共样式的时候
        标准：_base.scss 一下写一些项目开发是清除原由样式的操作  比如margin  和padding  都设置为0
        引入：@import "base"
    
        也可以引入混合（代码块）  再使用@include  混合名字()  调用混合即可

例：先创建两个…js文件

@import "base";
    @import "mixin";
    
    
    #div1{ 
        @include clearBoth;
    }

**控制指令**

@if  条件控制
    @for  循环控制
    @ench 循环指令
    @while 循环指令

**继承**

@extends  进行继承

例：

.btn{ 
        width: 200px;
        height: 5px;
        a{ 
            color: red;
            &:hover{ 
                background-color: orange;
                color: yellow;
            }
        }
    }
    .btn-primary{ 
        @extend .btn;
        background-color: blue;
    }
    .btn-success{ 
        @extend .btn;
        background-color: green;
    }

**混合： 类似于C语言中的宏定义 相当于代码块**

@mixin  混合名字()  声明混合
    @include  混合名字()  调用混合
    
    注： 可以选择有参数或者没有参数

@mixin center-block { 
        margin-left: auto;
        margin-top: auto;
    }
    
    //清除浮动
    @mixin clearBoth { 
        content: "";
        display: block;
        height: 0px;
        overflow: hidden;
        visibility: hidden;
    }
    
    
    #div1{ 
        @include center-block;
        .box{ 
            @include clearBoth;
        }
    }
    
    //带参数的混合
    @mixin xxx($padding:30px,$border:1px solid black) { 
        border-right: $border;
        border-top: $border;
        padding-left: $padding;
    }
    
    #div2{ 
        @include xxx;//不调用参数时 使用的默认值
        .box{ 
            @include xxx(50px);
        }
        .box2{ 
            @include xxx(50px,3px dashed red );
        }
        .box3{ 
            @include xxx($border:5px dashed orange);
        }
    
    }

**自定义函数**

@function 函数名称(参数列表){
        //数据处理
    
    }

\*/

$colors:(light:#ffffff,dark:#000000);
    //传入对应的key 返回对应的值
    @function color($key){ 
        @if not map-has-key($colors, $key){ 
            //警告 警告不会中断监听
            @warn "在这个映射里没有一个叫#{$key}的值";
            //错误 会中断监听 并提示错误的位置
            @error "在这个映射里没有一个叫#{$key}的值";
        }
        @return map-get($colors, $key);
    }

body{ 
        background-color: color(xxx);
    }

**嵌套：选择器嵌套 和 属性嵌套**

//选择器嵌套(常用)
    
    #div1{ 
        width: 100px;
        .box{   //div里面的.box
            height: 200px;
        }
        a{ 
            background-color: red;
            //&符合 在scss中表示父级元素选择器
            &：hover{ 
                color: orange;
                background-color: blue;
            }
    
        }
    }
    
    
    //属性嵌套（不常用）
    
    #div1{ 
        border: { 
            left: { 
                width: 100px;
                style:solid;
                color: red;
            };
        };
        border-top: 2px dashed black;
    }
    //结果如下
    /* #div1 { border-left-width: 100px; border-left-style: solid; border-left-color: red; } */

**7种数据类型**

1.数字 包括10px  
数字函数：  
abs（）绝对值 round（）向上取整 ceil（）向下取整 floor（）取整  
percentage（）计算百分比 min（） max（） 最小值最大值  
2.字符串 带引号 不带引号 双引号都是  
3.颜色  
4.布尔值  
5.空值  
6.列表（list）,用空格或逗号分隔（例：c 1.5em 1em 0 2em,helvetica,arial,sans-serif）  
7.映射 map映射 键->值 （key1：value1，key2：value2）

具体函数的一些方法可以查询api

**注释**

1.普通注释 不会显示在.css文件中

/\*  
2.多行注释 会出现在.css文件中 ，不会出现在压缩版本中  
\*/

/*!  
3.强制注释。在多行注释第一个*后加!  
在任何版本下都会保留 压缩版本也会存在

\*/