因为最近可能需要做移动端rem布局，因为rem布局需要将px转化成rem，如果次都需要拿计算器算就太low了，所以就想到用less和gulp。

因为也是初学gulp，站点的文件结构还没想到太好，也只是demo下

用到gulp-less

　　gulp-watch

　　gulp-rev-append

首先是gulp代码

var gulp = require('gulp'),

    less = require('gulp-less'),

    rev = require('gulp-rev-append'),

    watch = require('gulp-watch');

    //liveReload = require('gulp-livereload');

//定义一个testless任务

gulp.task('testless',function(){

    gulp.src('src/less/index.less')

    .pipe(less())

    .pipe(gulp.dest('dist/css'));

//    .pipe(gulp.liveReload());

});

gulp.task('testRev',function(){

    gulp.src('index.html')

    .pipe(rev())

    .pipe(gulp.dest('dist/'));

})

gulp.task('testWatch',function(){

    gulp.watch('src/less/*.less',['testless']);//当less文件发生改变的时候，调用testless任务

})

html：动态设置像素比

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>html5</title>

    <link rel="stylesheet" href="dist/css/index.css?rev=@@hash" type="text/css">

    <script>

        var iScale = 1;

        iScale = iScale / window.devicePixelRatio;

        console.log(iScale);

        document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">');

        var iWidth = document.documentElement.clientWidth;

            iWidth=iWidth>1620?1620:iWidth;

            document.getElementsByTagName('html')[0].style.fontSize = iWidth/16 + 'px';

    </script>

</head>

<body>

    <div class="doc">

        <header></header>

        <section class="box">

            <div></div>

            <div></div>

            <div></div>

            <div></div>

            111<br />

            111<br />

            111<br />

css index.less unit()给计算结果添加rem单位 测试好用

@base:40;

@red : red;

@green:green;

html{ overflow:hidden;}

body{ overflow: auto;}

.doc{}

header{position:fixed;top:;left:; width:100%; height:unit(70/@base,rem); background: @red;}

.box{

    width:100%;

    height:unit(2000/@base,rem);

    padding-top:unit(70/@base,rem);

    div{ width:50%; height:unit(190/@base,rem); background: @green; border: 1px solid @red; float: left; box-sizing: border-box; }

}

footer{position:fixed;bottom:;left:; width:100%; height:unit(70/@base,rem); background: @green;}

至于复杂高森的gulp用法还没研究，暂时就这么多了。

　

应用gulp工具构建个自动算rem布局的小例子的更多相关文章

  1. gulp前端构建化工具，帮你搞定不同浏览器的兼容性写法问题

    .相信所有的前端攻城狮.听到浏览器兼容性问题都深有体会. 浏览器兼容性问题,无非就是因为浏览器内核不同,浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.还有就是根据浏览器的版本不同,所兼 ...

  2. gulp 前端构建工具入门

    gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...

  3. gulp自动化构建工具的使用

    gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...

  4. gulp 自动化构建html项目--自动刷新

    使用gulp自动化构建项目是前端学习的重要部分,gulp依赖于node.js.首选电脑要配置node和npm. 查看node版本号 node --version 查看npm 版本 npm --vers ...

  5. gulp 前端构建工具使用

    gulp 前端构建工具使用 1.新建一个web  h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_J ...

  6. 使用gulp来构建一个前端项目

    什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...

  7. gulp进阶构建项目由浅入深

    gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...

  8. 基于Gulp + Browserify构建es6环境下的自动化前端项目

    随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...

  9. 懒人小工具：T4自动生成Model,Insert,Select,Delete以及导出Excel的方法

    之前写了篇文章,懒人小工具:[自动生成Model,Insert,Select,Delete以及导出Excel的方法](http://www.jianshu.com/p/d5b11589174a),但是 ...

随机推荐

  1. C# 替换去除HTML标记方法(正则表达式)

    [from] http://blog.csdn.net/sgear/article/details/6263848/// <summary> /// 将所有HTML标签替换成"& ...

  2. Python学习记录4（语句）

    赋值语句 序列解包 条件语句 语句块 布尔变量 条件执行和if语句 条件运算符 循环 while语句 for循环 迭代工具 跳出循环 break continue while truebreak语句 ...

  3. 编译-LAMP基于fastcgi

    前言 最近没更新新篇幅了,今天就来点干活,过多的也不说了下面着手干!干!干! 准备环境 centos7.5 apr-1.6.3.tar.gz  apr-util-1.6.1.tar.gz      h ...

  4. 无法重启ssh

    rm /dev/null mknod /dev/null c 1 3 chmod 666 /dev/null

  5. windows server 服务器 环境配置

    自动备份 xcopy d:\web\zhiku\*.* d:\bak\web\zhiku\%date:~,4%%date:~5,2%%date:~8,2%\ /S /I

  6. 【Windows7注册码】

    [文章转载自 http://www.win7zhijia.cn/jiaocheng/win7_19324.html] 一.神Key: KH2J9-PC326-T44D4-39H6V-TVPBY TFP ...

  7. 2018 Python开发者大调查：Python和JavaScript最配？

    在2018年秋季,Python软件基金会与JetBrains发起了年度Python开发者调查. 报告的目的是寻找Python领域的新趋势,帮助开发者深入了解2018年Python开发者的现状. 该报告 ...

  8. Java-basic-2-

    接口只定义派生要用到的方法,但是方法的具体实现完全取决于派生类. 如果一个类定义在某个包中,那么package语句应该在源文件的首行. 如果源文件包含import语句,那么应该放在package语句和 ...

  9. nordic芯片开发——烧写方法记录

    在开发nordic芯片的时候,分为存外设开发和结合softdevice开发,另外还有结合mbr的开发(这个暂时没有深究)在裸机开发的时候,sdk里面称为blank,把芯片的程序erase之后,直接下载 ...

  10. poj3617 best cow line（贪心题）

    Best Cow Line Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 32687   Accepted: 8660 De ...