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

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

<script src="js/require.js" async='true' defer data-main="js/xxx"></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.强制注释。在多行注释第一个后加!
在任何版本下都会保留 压缩版本也会存在

*/