因为最近可能需要做移动端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. oracle 将查询结果输出到txt文件里

    在查询语句里先输入spool filepath 中间是需要查询的语句,最后spool off 就会把中间查询的结果都输入到file文件里 spool E:\log.txt; select id,nam ...

  2. Java动画 重力弹球 如鹏游戏引擎 精灵 设计一个小球加速落地又减速弹起并反复直到停止的Java程序

    package com.swift; import com.rupeng.game.GameCore; public class BouncingBall implements Runnable { ...

  3. 从 Objective-C 里的 Alloc 和 AllocWithZone 谈起

    一.问题起源 一切起源于Apple官方文档里面关于单例(Singleton)的示范代码:Creating a Singleton Instance.主要的争议集中在下面这一段: static MyGi ...

  4. （70）zabbix telnet监控类型

    概述 zabbix监控的方式很多,例如前面讲到的agent.snmp以及后续后续要讲到ssh和今天要讲到的telnet.流程很简单,创建item-->配置ip.用户.密码.端口.脚本->z ...

  5. destoon去除编辑器替换图片删除原图功能，删除信息删除相关图片功能

    去除这些功能会造成大量垃圾图片,但是客户存在大量复制内容,其中图片一样,为了防止客户替换其中一个图片或者删除信息 造成其他复制信息图片丢失 去除文章模型级联图片功能. 对应模块class.php se ...

  6. redis代理集群（Twemproxy）（1）

    redis主从+哨兵模式只解决了读的分布式操作,大大提高了性能:但是写操作,只有主主机器才能进行,从机器无法进行写操作.此时,Twemproxy也就出现了. 这个模式单纯的安装有些复杂,需要引入很多的 ...

  7. JdbcTemplate实验

    实验1:测试数据源 @Test public void test() throws SQLException { ApplicationContext ioc = new ClassPathXmlAp ...

  8. LeetCode（275）H-Index II

    题目 Follow up for H-Index: What if the citations array is sorted in ascending order? Could you optimi ...

  9. Solution: 最近公共祖先·一 [hiho一下 第十三周]

    题目1 : 最近公共祖先·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho最近发现了一个神奇的网站!虽然还不够像58同城那样神奇,但这个网站仍然让小Ho乐在其中 ...

  10. Linux学习-核心编译的前处理与核心功能选择

    硬件环境检视与核心功能要求 根据自己的需求来确定编译的选项 保持干净原始码: make mrproper 我们还得要处理一下核心原始码底下的残留文件才行!假设我们是第一次 编译, 但是我们不清楚到底下 ...