2017春 前端自动化(二)   页面自动刷新、sass与css转换的使用、pxToRem直观转换

引言：
  此文要演示：浏览器页面自动刷新；移动端px与rem的转换，简单直观化；使用sass自动生成css进行编译,而不是借助于考拉工具;
  顺便从头来一遍流程……
 
 
建立如上图01所示的目录结构，层次明晰，便于日后管理。

快捷键进入当前文件夹，在此打开dos窗口
输入:node -v，显示node版本，说明node之前已经安装好（之前已经介绍安装方法）
 

之后安装 cnpm,为了日后安装所需的包，速度更快一些（基于阿里云的服务）
  输入：  npm install -g cnpm --registry=https://registry.npm.taobao.org

 输入：npm init ，以来生成packge.json文件 ，便于查找对比，哪个工具存在

在当前目录，安装gulp
 输入：cnpm install gulp  --save-dev 

（ps: cnpm node gulp 全局安装一次，默认之前都有了；局部安装 gulp 输入：cnpm install gulp --save-dev )

接着，安装，浏览器自动实时刷新  browser-sync 
dos输入：cnpm install browser-sync --save-dev

接下来，安装 sass,安装 sass之前，需要预先安装ruby,这样我们可以摆脱考拉工具了，纯dos下， 是不是显得略屌点……

ruby 安装 地址
http://rubyinstaller.org/downloads/
下载，安装

之后，dos下输入：cnpm install gulp-sass --save-dev   来安装 sass
(ps:如果 cnpm执行不下去，就执行 npm)
 
新建立html页面
------------------------------------------------------【html页面-------------------------------------------------------------
<!doctype html>
<html>

<head>
<title>我是首页</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=100%, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<meta content="telephone=no" name="format-detection" />
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<link href="static/css/out/base.css" type="text/css" rel="stylesheet" />
<link href="static/css/out/main.css" type="text/css" rel="stylesheet" />
</head>

<body>

   <ul class="list">
     <li>菜单1</li>
     <li>菜单2</li>
   </ul>

   <button class="button">确定</button>
</body>

</html>
------------------------------------------------------html页面】-------------------------------------------------------------
 
------------------------------------------------------【关键css片段----------------------------------------------------------
html {
    font-size: 20px;
}

@media only screen and (min-width: 400px) {
    html {
        font-size: 21.33px !important;
    }
}

@media only screen and (min-width: 414px) {
    html {
        font-size: 22.08px !important;
    }
}
@media only screen and (min-width: 480px) {
    html {
        font-size: 25.6px !important;
    }
}
$browser-default-font-size: 40px !default;
@function pxToRem($px) {
    //$px为需要转换的字号
    @return $px / $browser-default-font-size * 1rem;
}
------------------------------------------------------关键css片段】----------------------------------------------------------
在项目里面，右键新建，gulpfile.js文件
开始写任务
------------------------------------------------------【gulpfile.js片段----------------------------------------------------------
var gulp=require("gulp");
var browserSync=require("browser-sync");
var sass=require("gulp-sass");

gulp.task("server",["listenProduct","buildSass"],function(){
console.log("server is starting.....");
browserSync.init({
 server:"./dev",
 port:8383,
 reloadDelay:500,
 notify:true,
 files:[
   "./dev/*.html",
   "./dev/static/css/def/scss/*.scss",
   "./dev/static/css/out/*.css",
   "./src/static/js/def/*.js",
   "./src/static/js/out/*.js",
  ]
});
});
gulp.task("listenProduct",function(){
gulp.watch("./dev/static/css/def/scss/*.scss",["autoBuildConcat"]);
});

gulp.task("autoBuildConcat",function(){
   runSequence("buildSass");
});

gulp.task("buildSass",function(){
 console.log("buildSass")
 return gulp.src('./dev/static/css/def/scss/*.scss')
.pipe(sass({
outputStyle:"expanded"
}))
.pipe(gulp.dest("./dev/static/css/out/"));
});

gulp.task("default",function(){
gulp.start("server");
});
涉及到之前已略有介绍此相关
这里只显示主要内容片段
------------------------------------------------------gulpfile.js片段】----------------------------------------------------------
在main.scss里面写
.button{
    width: pxToRem(100px);
    height:pxToRem(100px);
    display: block;
    margin: 0 auto;
    text-align: center;
}
这样之后
dos下输入 gulp 一个命令  即可自动打开如下 页面，实现了：自动刷新，px  rem换算 ,sass  css转换 
 

且，通过如此配置， 你可以，随心所欲的使用sass,而不是再去借助于考拉工具
这里，可以不必在去口算，心算psd的具体宽度，高度
psd上面，是多少，就写多少
这里，已经帮你配置好，换算好
 
(ps：描述过程中的截图，是为了更好的匹配选择，减少弯路过程；加粗或背景是重点。)
 
多谢，田兄，一路指点，方可完善。
 
下载地址 ；http://files.cnblogs.com/files/leshao/auto01.rar 
                               

2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换的更多相关文章

  1. 详解Grunt插件之LiveReload实现页面自动刷新（两种方案）

    http://www.jb51.net/article/70415.htm    含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...

  2. 方法总结：如何实现html页面自动刷新

    使用场景: 1. 页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据 ...

  3. 如何实现html页面自动刷新

    使用场景: 1. 页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据 ...

  4. PHP 页面自动刷新可借助JS来实现，简单示例如下：

    <?php  echo "系统当前时间戳为:"; echo ""; echo time(); //<!--JS 页面自动刷新 --> echo ...

  5. HTML 页面自动刷新

    学习就是一个不断积累的过程,每一天能够学到一点新东西说明自己就在进步!! HTML head 里面设置页面自动刷新功能 <meta http-equiv="Refresh" ...

  6. 实现html页面自动刷新的几种方式

    自动页面刷新通常会用在对数据的实时性比较敏感的网站中,比如股票走势等,另外在普通的页面自动跳转中也会使用到页面自动刷新技术. 页面刷新我见过的有三种方式,下面来一一说明 1.通过在<head&g ...

  7. 如何设置页面自动刷新第一篇??　servlet setHeader("refresh","2")

    import java.io.IOException; import java.util.Random; import javax.servlet.ServletException; import j ...

  8. JAVA-JSP内置对象之response对象实现页面自动刷新

    相关资料:<21天学通Java Web开发> response对象 实现页面自动刷新1.可以通过response对象的addIntHeader()方法添加一个标题为Refrsh的标头,并指 ...

  9. html（对php也有效）页面自动刷新和跳转（简单版本）

    <html>    <head><title>html页面自动刷新和跳转</title><meta http-equiv="Refres ...

随机推荐

  1. NIO相关基础篇二

    转载请注明原创出处,谢谢! 上篇NIO相关基础篇一,主要介绍了一些基本的概念以及缓冲区(Buffer)和通道(Channel),本篇继续NIO相关话题内容,主要就是文件锁.以及比较关键的Selecto ...

  2. 两个port贴合七夕主题，百度输入法的“情感营销”策略

        一年一度的七夕佳节是情侣.夫妻之间传情达意.诉说衷肠的最佳时节.基于这一背景.一些传统企业.互联网公司也会针对性的推出一些营销策划,使产品和服务更贴近用户需求,更"接地气" ...

  3. 解决EJB本地调用“java.lang.ClassCastException: $Proxy96 cannot be cast to com.tgb.ejb.UserManager”异常

    EJB本地调用方式:把Webclient和EJB服务端部署到同一个JBoss,client和server通过一个JVM进行通信. Web客户端本地调用时.需引用EJB服务端打包的jar,不需引用JBo ...

  4. HBase源代码分析之HRegion上MemStore的flsuh流程（一）

    了解HBase架构的用户应该知道,HBase是一种基于LSM模型的分布式数据库.LSM的全称是Log-Structured Merge-Trees.即日志-结构化合并-树. 相比于Oracle普通索引 ...

  5. ios应用程序国际化

    1.程序名称国际化: 在Xcode中新建项目后,能够在project的info选项卡中找到Localization的项目,能够加入应用程序须要支持的国际语言. 回到项目中能够发如今InfoPlist. ...

  6. 关于chrome浏览器的帐号密码和背景色的填充问题

    不知道大家平时做项目的时候有木有关注这个问题,其实之前做项目遇到过类似的问题,但是因为是单独的chrome浏览器的填充,而且是样式问题稍微严重点,也就没在意.然而在近期的项目中有遇到了这个问题,最为一 ...

  7. 页面的新开页，window.open的hacker

    一.window.open如何进行hack 网上看的办法很多,归根接地还是不能解决掉,只有通过a标签的target属性 $obj.click(function(){  var newTab=windo ...

  8. Linux常用操作命令及快捷键

    Linux操作命令: 大体分为两类: 1.内部命令       help 命令(查看内部命令)  2.外部命令    命令 --help(查看外部命令) type 命令:用来查看该命令是内部命令还是外 ...

  9. springmvc返回json字符串中文乱码问题

    问题: 后台代码如下: @RequestMapping("menuTreeAjax") @ResponseBody /** * 根据parentMenuId获取菜单的树结构 * @ ...

  10. 自学Zabbix3.6.5-触发器item-Unit symbols单位符号

    在zabbix里面,我们不需要使用大数字来,例如我们可以不使用86400来表示一天,这个数字又不容易理解也容易出错.用什么办法来解决大数字问题呢?我们可以使用单位来简化,例如简化zabbix触发器表达 ...