首页 > 代码库 > 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换
2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换
2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换
引言:
此文要演示:浏览器页面自动刷新;移动端px与rem的转换,简单直观化;使用sass自动生成css进行编译,而不是借助于考拉工具;
顺便从头来一遍流程……
顺便从头来一遍流程……
建立如上图01所示的目录结构,层次明晰,便于日后管理。
快捷键进入当前文件夹,在此打开dos窗口
输入:node -v,显示node版本,说明node之前已经安装好(之前已经介绍安装方法)
输入: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/
下载,安装
ruby 安装 地址
http://rubyinstaller.org/downloads/
下载,安装
之后,dos下输入:cnpm install gulp-sass --save-dev 来安装 sass
(ps:如果 cnpm执行不下去,就执行 npm)
(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="http://www.mamicode.com/static/css/out/base.css" type="text/css" rel="stylesheet" />
<link href="http://www.mamicode.com/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>
<!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="http://www.mamicode.com/static/css/out/base.css" type="text/css" rel="stylesheet" />
<link href="http://www.mamicode.com/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;
}
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");
});
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;
}
这样之后
.button{
width: pxToRem(100px);
height:pxToRem(100px);
display: block;
margin: 0 auto;
text-align: center;
}
这样之后
dos下输入 gulp 一个命令 即可自动打开如下 页面,实现了:自动刷新,px rem换算 ,sass css转换
且,通过如此配置, 你可以,随心所欲的使用sass,而不是再去借助于考拉工具
这里,可以不必在去口算,心算psd的具体宽度,高度
psd上面,是多少,就写多少
这里,已经帮你配置好,换算好
这里,可以不必在去口算,心算psd的具体宽度,高度
psd上面,是多少,就写多少
这里,已经帮你配置好,换算好
(ps:描述过程中的截图,是为了更好的匹配选择,减少弯路过程;加粗或背景是重点。)
多谢,田兄,一路指点,方可完善。
下载地址 ;http://files.cnblogs.com/files/leshao/auto01.rar
2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。