因为最近可能需要做移动端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. sql server 定时备份 脚本

    ) DECLARE @date DATETIME SELECT @date = GETDATE() SELECT @filename = 'G:\backup\NewPlulishSQL-' + CA ...

  2. 01_1_Socket实现

    01_1_Socket实现 1.什么是MIME Multipurpos Internet Mail Extension 指明白传送内容的格式 最早用于邮件附件 2.HTTP协议基础 HTTP(Hype ...

  3. 科学计算库Numpy——概述

    Numpy主要用于数组的各种计算. 导入Numpy import numpy as np 数组类型 Numpy的数组类型为numpy.ndarray. array=np.array([1,2,3,4, ...

  4. Python基础-os模块 sys模块

    sys模块 与操作系统交互的一个接口 文件夹相关 os.makedirs('dirname1/dirname2')    可生成多层递归目录 os.removedirs('dirname1')    ...

  5. Django之用户认证

    用户认证组件简介 功能:用session记录登录验证状态 前提:必须使用django自带的auth_user表.那这里有的同学就会有疑问了,自己不能创建自己的用户表吗? 当然可以,用户认证组件虽然只针 ...

  6. JAVA-基础(十） Swing

    在看到applet和Swing的时候,我想起了winform,以及java beans包中各种所谓的组件的时候,一切都那么似曾相识. Swing是AWT的扩展,它提供了更强大和更灵活的组件集合. 除了 ...

  7. idea Live Template 快速使用

    善用LiveTemplates,好用到没朋友,我凑揍 , 尊重原创,原文链接: https://blog.csdn.net/u012721933/article/details/52461103#co ...

  8. 对python的想法

    作为计算机专业的学生,在编程语言之余,我认为掌握一门脚本语言是很必要的.尤其是现在在数据分析,AI,机器学习等各个方面都大放异彩的python.相比于之前接触过的Java,C,C++乃至于php等语言 ...

  9. [python][oldboy] * **的用法

    * 和**主要用在函数的参数中, # coding=utf8 """ 三种编码: 1 python程序代码的编码 # coding=utf8 2 设置/查看python程 ...

  10. [密钥权限过大错误]ssh “permissions are too open” error

    I had a problem with my mac where I couldn't save any kind of file on the disk anymore. I had to reb ...