因为最近可能需要做移动端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. 27. Remove Element@python

    Given an array nums and a value val, remove all instances of that value in-place and return the new ...

  2. NOIP2018

    非常糟糕.从未意识到过考场debuff这么严重. 果不其然,高档选手强如txc实力AK:而像我这样的中档选手就是重在考场发挥和自我调整了吧. 究竟要付出多少代价才能领会一个教训 看来要尝试更自闭一点

  3. 【Python学习之五】高级特性4（切片、迭代、列表生成器、生成器、迭代器）

    4.生成器(generator) 通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.如果列表元素可以按照某种算法推算出来,那我们是否可以在循环的过程中不断推算出后续的 ...

  4. Java-basic-2-

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

  5. spring事务（Transaction ）报 marked as rollback-only异常的原因及解决方法

    很多朋友在使用spring+hibernate或mybatis等框架时经常遇到报Transaction rolled back because it has been marked as rollba ...

  6. while循环输出的表格

    方法一: <?php echo '<table border="1" width="800" align="center"> ...

  7. 在线安装ipa,超链接下载ipa

    在线安装ipa包其实是OTA实现,先粘一下OTA解释 OTA OTA即Over-the-Air,简单来说就是通过无线的方式发送指令给设备,具体针对iOS的设备,比如iphone .ipad等,让开发者 ...

  8. Python全栈开发第二期课表

     day01-python 全栈开发-基础篇                 01 开课介绍 01:55:13 ★  02 开课介绍02 01:28:31 ★  03 开课介绍03 00:22:55 ...

  9. Tomcat 禁用PUT方法, 404/500错误重定向, 网站图标

    (1) Tomcat禁用Put等不安全方法. <security-constraint> <web-resource-collection> <web-resource- ...

  10. [办公软件][2]screenToGif

    https://github.com/NickeManarin/ScreenToGif/wiki/help 下载: .Net Framework 4.6.1   https://www.microso ...