2017春前端自動化(二) 頁面自動刷新、sass與css轉換的使用、pxToRem直觀轉換

時間 2019-11-30

標籤前端自動化頁面自動刷新 sass css 轉換使用 pxtorem 直觀欄目測試自動化简体版

原文原文鏈接

2017春前端自動化(二) 頁面自動刷新、sass與css轉換的使用、pxToRem直觀轉換css

引言：

此文要演示：瀏覽器頁面自動刷新；移動端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文件，便於查找對比，哪一個工具存在html

在當前目錄，安裝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 node

接下來，安裝 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片斷----------------------------------------------------------

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轉換