gulp 教程 css 转rem

2024-08-29

gulp快速将css中的px替换成rem

1.Gulp安装配置 1.全局安装gulp 1.1 安装命令提示符执行cnpm install gulp -g; 1.2 查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装. 2.新建package.json文件 2.1说明:package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件: 2.2配置package.json 命令提示符执行cnpm init 3.本地安装gulp插件 3.1以gulp-replace为例(编

gulp之css,js压缩合并加密替换

为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然,这里还有个附加的需要就是,静态资源需要自行优化(压缩合并). 下面是我gulpfile.js的代码: var gulp = require('gulp'), //基础库 clean = require('gulp-clean'), //清空文件夹 minify = require('gulp-mi

使用gulp进行css、js压缩

var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); var concatCss = require('gulp-concat-css'); var uglify = require('gulp-uglify'); var concat = require('gulp-concat'); var del = require('del'); var gutil = require('gulp-util'); //

gulp压缩css和js

压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下.一.安装 gulp-minify-css 模块提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作. 在命令行输入 sudo npm install gulp-minify-css 安装成功后,命令行显示如下内容: E:\workSpace\bulingbuling>npm install g

gulp打包css/image/Less/Sass

其他的和打包前一篇随笔(打包js) http://www.cnblogs.com/teersky/p/7251329.html 相同,本篇文章主要写gulpFile.js的配置: 安装CSS打包插件: cnpm install gulp cnpm install gulp-minify-css 之后新建gulpfile.js文件 //打包cssvar gulp =require ("gulp") var minifyCss=require ("gulp-minify-css&

使用 gulp 压缩 CSS

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码规律找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. gulp 代码当熟悉使用 gulp 压缩 JS的方法后,配置压缩 CSS 的 gulp 代码就变得很轻松. 一.安装 gulp-minify-css 模块提示:你需要使用命令行的 cd 切

CSS中rem、em的区别

引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/51804227 前几天面试了一个最基本的问题,现在复习一下它的原理 CSS中的长度单位有8个,px,em,rem,pt,ex,pc,in,mm,cm; px--像素,相对于设备的长度,像素是相对于显示器的屏幕分辨率而言的. em--相对长度单位,是相对于其父元素的文本的字体尺寸.如果父级元素未设置字体大小,则相

gulp压缩css

gulp压缩css,选用的依赖是gulp-clean-css,在压缩大型项目时还对用到一个dom流压缩文件选取的依赖gulp-dom-src 依赖安装:npm i gulp-clean-css 依赖安装:npm i gulp-dom-src gulpflie: var gulp = require("gulp"), htmlSrc = require("gulp-dom-src"),//在html页面中选取文件合并压缩 concat = require("

从设计图到CSS：rem+viewport+媒体查询+Sass

根据UI图对移动端的h5页面做样式重构,是前端工程师的本职工作,看似简单,不过想做好却并不容易.下面总结一下其中要点. rem rem是一种相对长度单位,参考的基准是<html>标签定义的font-size.比如: html { font-size: 16px; } .intro { font-size: 1.2rem; margin-top: 0.2rem; } 那么实际效果就是: .intro { font-size: 16px * 1.2rem = 19.2px; margin-top:

gulp压缩css文件跟js文件

越到最后啊就越发现,真的很理解那句话就是自己多学一点一点知识,就少一句问别人的东西这是多么痛苦的领悟今天需要压缩css跟js文件然后不懂啊就问别人啊就问啊问啊然后再上网了解啊了解啊用gulp gulp是基于Node.js的前端构建工具恩确实是个好东西哦那进入正题前先说说gulp是个啥东西吧,其实一开始我也不是很懂百度呀网上说是自动化工具其实自动化工具说白了我也不是很懂我感觉我看很抽象的概念的时候加上自己没有那个具体的概念就很难弄懂有知道的小伙伴麻烦留言呀

7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch

rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设置的font-size. body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } 你看,这里div这娃的字体大小是1.2em.解释来说,就是他从bo

Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 --.本人之前也是在项目中没具体使用过,闲来无事,查查资料,自己写了一个用gulp工具的小demo,有很多不足之处,欢迎指点. 第一步:安装node和npm 不用说,要用gulp,得先安装node和npm(安装完node后,自带有npm) Node官网下载地址:https://nodejs.org/en

[js高手之路]gulp教程-从入门到项目中快速上手使用

在这之前,我已经分享过一个webpack的全系列,相对于webpack, gulp使用和配置起来非常的简单. gulp是什么? gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率.在 Web 前端开发工作中有很多"重复工作",比如压缩CSS/JS文件.而这些工作都是有规律的.找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些"重复工作" 一.安装gulp与压缩js文件命令: npm install gu

sublime插件CSS转rem配置

{ "px_to_rem": 40, //px转rem的单位比例,默认为40 "max_rem_fraction_length": 6, //px转rem的小数部分的最大长度.默认为6. "available_file_types": [".css", ".less", ".sass",".html"] //启用此插件的文件类型.默认为:[".css&quo

关于CSS单位:rem vh vw vmin vmax

rem(root em) 如果你给body设置了font-size字体大小,那么body的任何子元素的1em就是等于body设置的font-size demo: body { font-size: 14px; } div { font-size: 1.2rem; // calculated at 14px * 1.2, or 16.8px} em: 从它上一级父元素继承了字体大小,并且逐渐得增加. Demo: Html: <body> <div class=”div1”> &l

【css】rem及其替换方案

移动端的web前端开发其实经常会有一些令人头疼的问题,比如屏幕适配.1像素问题等,rem也是之前在屏幕适配上比较完善的一套方案,但是随着业务的深入,任何方案都有其优秀与不足的地方,rem这套方案也一样,笔者今就来从自身项目的角度,简单的聊聊rem这整套方案的得与失. 首先,介绍下原理: rem是什么?它是css3新推出的相对单位,英文全称为font size of the root element,意思就是根据网页的根元素来设置字体大小,和另一个em(font size of the eleme

gulp教程、gulp-less安装

gulp教程之gulp-less gulp详细入门教程 11.1.安装nodejs: 11.2.新建package.json文件:cnpm init 11.3.全局和本地安装gulp: cnpm install gulp -g.cnpm install gulp --save-dev 11.4.安装gulp插件:cnpm install gulp-less --save-dev 11.5.新建gulpfile.js文件: 11.6.通过命令提示符运行gulp任务.gulp ...

gulp为css,js添加版本号

由于cdn缓存,更改样式后会有一段时间不生效,解决方法就是给css,js加上版本号效果如下: 1.安装gulp插件 npm install --save-dev gulp-rev (version:9.0.0) npm install --save-dev gulp-rev-collector (version:1.3.1) npm install --save-dev run-sequence (version:2.2.1) 2.修改gulpfile.js文件 //引入gulp和gulp插件

css系列教程--css文件的创建

css文件的创建:1.外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css" />注:rel必须指定,否则不能识别样式表,type最好指定文件的类型.2.内部样式表:<style type="text/css"> hr {color: sienna;} p {margin-left: 20px;}</style>注:

webpack教程——css的加载

首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码意思是先用css-loader加载css文件,再用style-loader添加在页面中在app目录下创建component.css文件 body{ background-color: red; } 在app/index.js中引入css文件运行npm run start命令. 可以看到我们浏览器整个背景都变成了红

css之rem布局

rem介绍和原理网上都是,这里不具体介绍以iphone6设计稿 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; let htmlDom = document.getElementsByTagName('html')[0]; htmlDom.style.fontSize = htmlWidth / 10 + 'px'; @function px2rem($px) { $fontS

gulp 教程 css 转rem

热门专题