因为最近可能需要做移动端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. Bootstrap 提示工具(Tooltip)插件方法的用法

    方法 下面是一些提示工具(Tooltip)插件中有用的方法: 方法 描述 实例 Options: .tooltip(options) 向元素集合附加提示工具句柄. $().tooltip(option ...

  2. 01_12_Struts2_访问Web元素

    01_12_Struts2_访问Web元素 1. 配置struts.xml文件 <package name="login" namespace="/login&qu ...

  3. VueX源码分析（1）

    VueX源码分析(1) 文件架构如下 /module /plugins helpers.js index.esm.js index.js store.js util.js util.js 先从最简单的 ...

  4. Find the Longest Word in a String-freecodecamp算法题目

    Find the Longest Word in a String(找出最长单词) 要求 在句子中找出最长的单词,并返回它的长度 函数的返回值应该是一个数字. 思路 用.split(' ')将句子分隔 ...

  5. 解决mysql出现的问题#1055 - Expression of SELECT list is not in GROUP BY clause and contains nonaggregated column this i

    最近在学flask, 在访问主页时,一直出现1055错误,在网上找的解决方法是删除ONLY_FULL_GROUP_BY,当时是删除了,但是退出在进行select @@sql_mode时,仍出现ONLY ...

  6. python入门：1-99所有数的和的等式

    #!/usr/bin/env python # -*- coding:utf-8 -*- #1-99所有数的和的等式 #start(开始,译音:思达二测)sum(合计,译音:桑木)temp(临时雇员, ...

  7. Java 编辑html模板并生成pdf

    1.工具类 import com.hujiang.project.zhgd.Util; import com.itextpdf.text.BaseColor; import com.itextpdf. ...

  8. Html5_css

    CSS 在标签上设置style属性: background-color: #2459a2; height: 48px; ... 编写css样式: 1. 标签的style属性 2. 写在head里面 s ...

  9. List删除元素

    在单线程环境下的解决办法 public void remove() { if (lastRet == -1) throw new IllegalStateException(); checkForCo ...

  10. debian软raid

    http://www.linuxidc.com/Linux/2013-06/86487.htm