gulp相关说明

fevin 发布于2019-08-22 10:48 / 1661人阅读

摘要：当你按下或切换到浏览器，浏览器将会会自动刷新如果你修改的是文件将会刷新网页如果你修改的是或，这个文件或文件将会被重载而不是刷新整个页面这个特性在写单页面应用时尤为实用模板引入考虑以下情况我们需要创建如下的模板，并且在不同的页面高亮不同的这时

1.当你按下ctrl+s 或切换到浏览器，浏览器将会会自动刷新

如果你修改的是html文件将会刷新网页

如果你修改的是css或less，这个less文件或css文件将会被重载而不是刷新整个页面（这个特性在写单页面应用时尤为实用）

2.模板引入

考虑以下情况

我们需要创建如下的模板，并且在不同的页面高亮不同的li

这时候可以在引入的时候传入参数 (假设这个模板名字为nav)

    {nav{jquery选择器,第几个,要加的类}}
    
    jquery选择器默认值：li，选填

    第几个：无默认值，必填

    要加的类默认值：on，选填

    {{nav(2)}}

上面的模板将会被编译为(虽然编程语言大部分从0开始计数，但是这里从1开始)

3.关于浏览器前缀

事实上你不需要再写浏览器前缀（除了-webkit-line-clamp），auto-prefix插件会根据设置自动添加前缀并清理掉不必要的前缀

3.less的嵌套（less详细文档）

通常我们给一个元素和它的子元素编写样式会像下面一样，每次都要重复写父级元素

.banner {
  height: 20px;
}
.banner ul {
  color: red;
}
.banner li {
  color: blue;
}
.banner li a {
  font-size: 14px;
}

在less文件里你可以这么写，将会编译成跟上面一样的内容

.banner{
    height: 20px;
    ul{
        color:red;
    }
    li{
        color:blue;
        a{
            font-size: 14px;
        }
    }
}

4.媒体查询

你可以引入以下的less文件以快速的进行响应式网页的开发，复制文本到你的less文件开头或者新建less文件到less文件夹均可

@lg:1200px;
@md:992px;
@sm:768px;
@xs:480px;

.max(@screenWidth,@rules){
  @media screen and (max-width:@screenWidth){
    @rules();
  }
}
.min(@screenWidth,@rules){
  @media screen and (min-width:@screenWidth){
    @rules();
  }
}

.lg(@rules) {
  @media screen and (max-width:@lg) {
    @rules();
  }
}
.md(@rules) {
  @media screen and (max-width: @md) {
    @rules();
  }
}
.sm(@rules) {
  @media screen and (max-width: @sm) {
    @rules();
  }
}
.xs(@rules) {
  @media screen and (max-width: @xs) {
    @rules();
  }
}

在下面情况中我们希望在小屏幕的时候header的高度变为20

.header{
    font-size: 18px;
    color:red;
    width: 100%;
    height: 30px;

}

只需要加上.sm({height: 20px;})

.header{
    font-size: 18px;
    color:red;
    width: 100%;
    height: 30px;
    .sm({
        height: 20px;
    });
}

将会被编译为

.header {
  font-size: 18px;
  color: red;
  width: 100%;
  height: 30px;
}
@media screen and (max-width: 768px) {
  .header {
    height: 20px;
  }
}

下面是更多例子

.hedaer{
    font-size: 18px;
    color:red;
    width: 100%;
    height: 30px;

    .md({
        font-size: 16px;
        height: 25px;
    });

    .sm({
        font-size: 14px;
        height: 20px;
    });

    .max(320px,{
        font-size: 16px;
        height: 15px;
    });

    .min(320px,{
        box-shadow: 5px 5px 5px red
    });
}

将会被编译为

.hedaer {
  font-size: 18px;
  color: red;
  width: 100%;
  height: 30px;
}
@media screen and (max-width: 992px) {
  .hedaer {
    font-size: 16px;
    height: 25px;
  }
}
@media screen and (max-width: 768px) {
  .hedaer {
    font-size: 14px;
    height: 20px;
  }
}
@media screen and (max-width: 320px) {
  .hedaer {
    font-size: 16px;
    height: 15px;
  }
}
@media screen and (min-width: 320px) {
  .hedaer {
    box-shadow: 5px 5px 5px red;
  }
}

GPU云服务器云服务器等相关说明 ecs海外主机相关问题说明 gulp gulp4

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91304.html

重读 Gulp

摘要：当接收一个回调函数的时候，一定要注意回调函数中的参数。主要作用就是用来读取文件或者文件夹中的数据。表示文件的名称指的是发生的变化使用技巧的进一步使用，可以参照中文官网中的技巧集。 Gulp 简介 Gulp 对现在的前端而言，是一个稍微老旧的工具了，但是，为了复习以前学过的内容，还是把它翻出来，放在自己的博客中。说不定哪天又用到了呢。需要说明的是，这里使用的 Gulp 版本是 3.9....

vpants 2019-08-22 11:19 评论0 收藏0
gulp排除已压缩文件思路

摘要：默认排除语法的弊端有个时候我们需要时用排除已经压缩过的，等。主要用两个属性来描述文件，它们分别是路径及内容。判断函数接受一个文件对象，返回一个值。官方例子仅压缩符合条件的文件，丹斯所有文件包括不符合条件的都会被发送到目录。 gulp默认排除语法的弊端有个时候我们需要时用gulp排除已经压缩过的js，css等。如果以压缩文件是以.min.js之类命名规范的还好，如果不是呢？而且还有其他...

Aklman 2019-08-22 10:49 评论0 收藏0
PostCSS自学笔记（一）【安装使用篇】

摘要：而则可制定个人需求的一套解决方案仅安装需要的插件。迫不及待的你已经等不及安装使用了吧。安装及使用一般是结合自动化工具使用，如果要单独使用可以安装，这里我先对的安装使用讲解下。接下来说点实际的，如何利用结合自动化工作在项目中使用。 PostCSS介绍 PostCSS是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能。其中，Autoprefixer就是众多Post...

jsummer 2019-08-29 13:17 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（一）

摘要：我觉得这方面的原因是当时对和的依赖，导致大家对的兴趣不弄，错过了最佳时机，这个其实跟百度自己的的技术栈有很大关系。这个阮一峰对于前端构建的变化吐槽过，说新的构建工具就是的构建工具。文章来源最近几年，前端发展越来越迅速，各种萌新加入了前端这个大家庭，大有赶IOS、超Android的趋势呀！同时，萌新们提出了各种前端工作问题，除了最基础的html、css、js三板斧之外，最让人头疼的应...

KavenFan 2019-08-02 16:21 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（一）

摘要：我觉得这方面的原因是当时对和的依赖，导致大家对的兴趣不弄，错过了最佳时机，这个其实跟百度自己的的技术栈有很大关系。这个阮一峰对于前端构建的变化吐槽过，说新的构建工具就是的构建工具。文章来源最近几年，前端发展越来越迅速，各种萌新加入了前端这个大家庭，大有赶IOS、超Android的趋势呀！同时，萌新们提出了各种前端工作问题，除了最基础的html、css、js三板斧之外，最让人头疼的应...

Yangyang 2019-08-22 11:01 评论0 收藏0