0730 NOTE

最新推荐文章于 2022-03-21 09:50:28 发布

菜鸟小胖砸

最新推荐文章于 2022-03-21 09:50:28 发布

阅读量81

点赞数

分类专栏： js日记学习日记文章标签： js

本文链接：https://blog.csdn.net/qq_41580536/article/details/119282520

版权

js日记同时被 2 个专栏收录

56 篇文章 1 订阅

订阅专栏

学习日记

41 篇文章 0 订阅

订阅专栏

0730 NOTE

Gulp

gulp3

安装 npm i gulp3 -D

依赖于node解决前端问题

gulp3 node版本10

执行：

1.创建名为gulpfile.js的文件

2.引入：var gulp = require(“gulp”)

3.gulp.task(“default”,[“a”],function(){}) //执行某某任务;default为默认任务，a为前置执行任务，函数为具体执行内容

Gulp方法

工作方式

gulp实际工作是使用nodejs中的stream来处理的，简单来说，如果需要合并两个文件，就需要讲两个文件都加载进来，然后再处理将文件合并，注意这里加载进来的文件并不是文本形式加载，而是以二进制数据流的方式，也就是steam加载进入。被加载进入的文件是以二进制数据流模式存在的，内容中除了含有文件内容，还包括了文件的地址，文件名等等一系列相关信息。然后再将所有的数据流处理生产新文件。因此这里就用到了nodejs中stream的方法pipe
pipe
管道，流向的意思，可以在这里理解为写入
```
a.pipe(b) 	//将a写入b中
```

src方法
读取文件的数据流

gulp.src(globs)
//globs参数是读取文件的筛选条件，可以写入字符串，也可以是数组，数组含有多个读取条件
gulp.src("js/a.js") //读取一个文件
gulp.src(["js/a.js","js/b.js"]) //读取两个文件,有先后顺序的加载
gulp.src("js/*.js") //js文件夹下所有的js文件

匹配条件
- “*”: 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
- “**” : 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。也就是能匹配某个目录下所有文件包括其子目录下的所有内容
- “?” : 匹配文件路径中的一个字符(不会匹配路径分隔符)
- “[…]” :匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法
```
!(pattern|pattern|pattern) //匹配任何与括号中给定的任一模式都不匹配的
?(pattern|pattern|pattern) 
//匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?
+(pattern|pattern|pattern) 
//匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+
*(pattern|pattern|pattern) 
//匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*
@(pattern|pattern|pattern) 
//匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)
```

dest方法
```
//给文件写入数据流
gulp.dest(path)
//path参数是要写入文件存放的路径
gulp.task("init",function () {
gulp.src("./js/*.js").pipe(gulp.dest("./dist/"))
});
```
这样就会将当前目录下，js文件夹下所有的js读入，然后写入到当前目录的dist文件夹下用gulp.dest()把文件流写入文件后，文件流仍然可以继续使用。

task方法

定义任务

如果需要有多个任务操作时就需要定义任务

//gulp.task(任务名,任务所依赖前面任务名的数组,任务执行的函数);
gulp.task("default",function () {
	console.log("aaa");
});
//这是默认执行，执行gulp就可以，无需输入任务名
gulp.task("one",function () {
	console.log("one");
});
gulp.task("two",["one"],function () {
	console.log("two")
});
//如果执行 gulp two 这时候就会先执行任务one，再执行任务two

watch方法

监视文件变化

//gulp.watch("监视的文件",[监视文件发生变化后需要执行任务名的数组])
gulp.task("default",function () {
	gulp.watch('js/*.js', function(event){
		console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变
		console.log(event.path); //变化的文件的路径
    });
});
//这里启动任务后，会开始监视，如果js文件夹下那个文件修改了，或者删除，增加，这里都会打印出来

Gulp常用插件：

gulp-load-plugins

安装命令：npm install --save-dev gulp-load-plugins

功能：自动加载插件
gulp-uglify

安装命令：npm install --save-dev gulp-uglify

功能：压缩文件
gulp-rename

安装命令：npm install --save-dev gulp-rename

功能：文件重命名
gulp-minify-css

安装命令：npm install --save-dev gulp-minify-css

功能：css文件压缩
gulp-minify-html

安装命令：npm install --save-dev gulp-minify-html

功能：html文件压缩
gulp-concat

安装命令：npm install --save-dev gulp-concat

功能：文件合并
gulp-sass

安装命令：npm install --save-dev gulp-sass

功能：sass文件解析
gulp-imagemin

安装命令：npm install --save-dev gulp-imagemin

功能：图片压缩
browser-sync

安装命令：npm install --save-dev gulp-browser-sync

功能：搭建静态服务器
gulp-babel

安装命令：npm install --save-dev @babel/core @babel/preset-env

功能：ES6语句编译转化成ES5语句（会提示export is not defined）

//gulpfile.js
var {series,dest,src,watch}=require("gulp");
var plugin=require("gulp-load-plugins")();
var browser=require("browser-sync");
var imagemin=require("gulp-imagemin");
var sass=require("gulp-sass")(require("sass"));

function changeJS(done){
    src("./src/js/*.js")
    .pipe(plugin.concat("main.js"))
    .pipe(plugin.uglify())
    .pipe(plugin.rename("main.min.js"))
    .pipe(dest("./dist/js"))
    .on("end",browser.reload);
    done();
}
function changeCss(done){
    src("./src/css/*.scss")
    .pipe(sass())
    .pipe(plugin.concat("main.css"))
    .pipe(plugin.minifyCss())
    .pipe(plugin.rename("main.min.css"))
    .pipe(dest("./dist/css"))
    .on("end",browser.reload);
    done();
}
function changeImg(done){
    src("./src/img/*.jpg")
    .pipe(dest("./dist/img/"))
    .on("end",browser.reload);
    done();
}
function changeHTML(done){
    src("./src/**/*.html")
    .pipe(plugin.minifyHtml())
    .pipe(dest("./dist/"))
    .on("end",browser.reload);
    done();
}

function watchServer(done){
    browser.init({
        server:"./dist",
        port:4005
    });
    watch("./src/js/*.js",changeJS);
    watch("./src/css/*.scss",changeCss);
    watch("./src/img/*.@(jpg|jpeg|png|webp|bmp|gif)",changeImg);
    watch("./src/**/*.html",changeHTML);

}

// exports.default=series(changeJS,changeCss,changeImg,changeHTML,watchServer)
exports.default=series(changeJS,changeCss,changeImg,changeHTML,watchServer)


// gulp.task("a",function(){
//     console.log("aaa");
// })

// gulp.task("default",function(){
//     console.log("ccc");
// })
// 前置执行任务
// gulp.task("default",["a"],function(){
//     console.log("ccc");
// })

function changeJs(){
    gulp.src("./src/**/*.js")
        .pipe(plugin.concat("main.js"))
        .pipe(plugin.uglify())
        .pipe(plugin.rename("main.min.js"))
        .pipe(gulp.dest("./dist/js/"));
}

function changeCss(){
    gulp.src("./src/css/*.*")
    .pipe(sass())
    .pipe(plugin.concat("main.css"))
    .pipe(plugin.minifyCss())
    .pipe(plugin.rename("main.min.css"))
    .pipe(gulp.dest("./dist/css"))
}

gulp.task("default",function(){
    // gulp.watch("./src/index.html",function(){
    //     gulp.src("./src/index.html").pipe(gulp.dest("./dist"))
    // })
   
    // gulp.src("./src/**/*.*").pipe(gulp.dest("./dist"));
    // gulp.src("./src/**/*.js")
    // gulp.src("./src/js/*.js")
    // gulp.src(["./src/js/a.js","./src/js/b.js"]).pipe(gulp.dest("./dist"));
    // gulp.src("./src/img/*.@(jpg|png|jpeg|webp)")
    // changeJs();
    // gulp.watch("./src/**/*.js",changeJs);
    changeCss();
    gulp.watch("./src/css/*.*",changeCss)
})

gulp4

安装 npm i gulp4 -D

node版本高于10

var {series,parallel,dest,src}=require("gulp");

// gulp.task("a",function(done){
//     console.log("bbb");
//     done();
// })
// gulp.task("default",function(done){
//     console.log("aa");
//     done();
// })

// 同时执行
// gulp.task("default",gulp.parallel(["a"],function(done){
//     console.log("aaa");
//     done();
// }))
// 顺序执行
// gulp.task("default",gulp.series(["a"],function(done){
//     console.log("aaa");
//     done();
// }))

// gulp.task("default",function(done){
//     gulp.watch("./src/js/*.js",function(done){
//         console.log("aaa");
//         done();
//     })
// })

// exports.default=function(done){
//     console.log("aa");
//     done();
// }

function fna(done){
    console.log("aaa");
    done();
}
function fnb(done){
    console.log("bbb");
    done();
}
// exports.fna=fna;
// exports.fnb=fnb;
exports.default=series(fna,fnb);

gulp4搭建静态服务器

var {series,dest,src,watch}=require("gulp");
var plugin=require("gulp-load-plugins")();
var browser=require("browser-sync");
var imagemin=require("gulp-imagemin");
var sass=require("gulp-sass")(require("sass"));

function changeJS(done){
    src("./src/js/*.js")
    .pipe(plugin.concat("main.js"))
    .pipe(plugin.uglify())
    .pipe(plugin.rename("main.min.js"))
    .pipe(dest("./dist/js"))
    .on("end",browser.reload);
    done();
}
function changeCss(done){
    src("./src/css/*.scss")
    .pipe(sass())
    .pipe(plugin.concat("main.css"))
    .pipe(plugin.minifyCss())
    .pipe(plugin.rename("main.min.css"))
    .pipe(dest("./dist/css"))
    .on("end",browser.reload);
    done();
}
function changeImg(done){
    src("./src/img/*.jpg")
    .pipe(dest("./dist/img/"))
    .on("end",browser.reload);
    done();
}
function changeHTML(done){
    src("./src/**/*.html")
    .pipe(plugin.minifyHtml())
    .pipe(dest("./dist/"))
    .on("end",browser.reload);
    done();
}

function watchServer(done){
    browser.init({
        server:"./dist",
        port:4005
    });
    watch("./src/js/*.js",changeJS);
    watch("./src/css/*.scss",changeCss);
    watch("./src/img/*.@(jpg|jpeg|png|webp|bmp|gif)",changeImg);
    watch("./src/**/*.html",changeHTML);

}

// exports.default=series(changeJS,changeCss,changeImg,changeHTML,watchServer)
exports.default=series(changeJS,changeCss,changeImg,changeHTML,watchServer)

SASS

Scss就是Sass的升级版,Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass(扩展名是.scss)
书写贴近于CSS的写法

$color:red;
div{
  color: $color;
}
span{
  color: $color;
}

sass的语法
变量的声明

$color:red;
$width:300;
div{
  color: $color;
   width: $width+px;
}
span{
  color: $color;
}

选择器的嵌套

$color_1:red;
$color_2:blue;
div{
  span{color: $color_1}
  div{color: $color_2}
}

父选择器

span{
   color: red;
  &:hover{
    color: blue;
  }
}

这里的&就是span自身这个选择器给它自己加了hover

各种选择器的嵌套

article {
  ~ article { border-top: 1px dashed #ccc }

  > section { background: #eee }
  > dl > {
  > dt { color: #333 }
  > dd { color: #555 }
  > }
  > nav + & { margin-top: 0 }
  > }

属性嵌套

nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}

这是嵌套了属性，border-style被拆分

导入文件

$r:50px;
div{
width: $r;
height: $r;
border-radius: $r/2;
}

上面这个文件起名叫 a.scss

在main.scss中如下写入

@import "a";
div{
span {color: red}
& {@import "a";}
}

这里导入以后就会有把a中的定义内容导入
如果写在标签中，那么导入的内容将会作为这个标签的后代元素样式进入

混合器
普通类型混合器

$r:50px;
@mixin divRadius{
width: $r;
height: $r;
border-radius: $r/2;
}

div{
  @include divRadius;
}

这里的@mixin定义语句块，@include调用语句块

传参混合器

@mixin divRadius($r){
  width: $r;
  height: $r;
  border-radius: $r/2;
}

div{
  @include divRadius(50px);
  div{
    @include divRadius(25px)
  }
}

混合器传参的默认值

@mixin divRadius($r:100px){
  width: $r;
  height: $r;
  border-radius: $r/2;
}

div{
  @include divRadius;
  div{
    @include divRadius(50px)
  }
}

继承

.div0

{
  $r:100px;
  width: $r;
  height: $r;
  border-radius: $r/2;
}

div{
  div{
    @extend .div0;
  }
}

这里使用@extend 继承了类div0的样式

菜鸟小胖砸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
0730 NOTE

0730 NOTEGulpgulp3安装 npm i gulp3 -D依赖于node解决前端问题gulp3 node版本10执行：1.创建名为gulpfile.js的文件2.引入：var gulp = require(“gulp”)3.gulp.task(“default”,[“a”],function(){}) //执行某某任务;default为默认任务，a为前置执行任务，函数为具体执行内容Gulp方法工作方式 gulp实际工作是使用nodejs中的stream来处理的，
复制链接

扫一扫