gulp less 的css文件转rem

2024-10-28

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文件然后不懂啊就问别人啊就问啊问啊然后再上网了解啊了解啊用gulp gulp是基于Node.js的前端构建工具恩确实是个好东西哦那进入正题前先说说gulp是个啥东西吧,其实一开始我也不是很懂百度呀网上说是自动化工具其实自动化工具说白了我也不是很懂我感觉我看很抽象的概念的时候加上自己没有那个具体的概念就很难弄懂有知道的小伙伴麻烦留言呀

用nodejs把目录下所有用px做单位的css文件转化为用rem做单位的css文件

20171105 1211/星期日公司为了更好适配手机端,以前用px做单位的css文件,全部需要转化为用rem做单位,目前是1rem=37.5px;开发新项目时,还是用习惯的px写样式代码,完成UI稿的还原后,再统一转化为用rem做单位,贴上我写的nodejs 代码: var fs = require('fs');var path=require('path'); console.log((__dirname))var oldContent='./px/';var newContent='./

前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号

原理修改js和css文件通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文件名方案现在网上的方案都是生成一个新的dist目录,里面包含了要发布的html,js,css等文件.但是在实际的公司的项目中,会有情况不能生成新的HTML进行发布,需要在原来的HTML文件上进行js ,css版本的替换. 这里分享下我在实际项目中通过改动插件然后在原目录结构下进行版本的控制方案.

用gulp把less文件编译成css文件

第一次使用gulp构建工具,使用gulp将.less文件编译成.css文件并输出.根据视频做了笔记.提供新手和自己以后做参考. HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-

gulp入门-压缩js/css文件（windows）

类似于grunt,都是基于Node.js的前端构建工具.不过gulp压缩效率更高. 工具/原料 nodejs/npm 方法/步骤首先要确保pc上装有node,然后在global环境和项目文件中都install gulp npm install gulp -g (global环境) npm install gulp --save-dev (项目环境) 在项目中install需要的gulp插件,一般只压缩的话需要 npm install gulp-minify-css gulp-con

使用gulp将移动端px转为rem

使用gulp的插件可以很方便的将xp转为rem,在布局的时候使用@1x .@2x布局,即10rem=device-width:@1x即设计图为320px,1rem对应的10px像素,相对的@2x即为布局使用640px的布局,1rem=20px像素:不过浏览器有默认最小字体,谷歌浏览器默认的最小的字体大小为12px,所以1x大小设置可能会出现问题,绝大多数还是会使用2x的布局方法: 在阅读这篇文章之前至少要回使用gulp,可以去中文网先了解写gulp的基本使用方法,我也是在总结gulp的使用方法,

应用gulp工具构建个自动算rem布局的小例子

因为最近可能需要做移动端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'), watc

CSS中的rem的换算

rem好像也是一个相对大小的值,它是相对于根元素<html>,比如假设,我们设置html的字体大小的值为 html{font-size: 87.5%;}(也就是14px,这是twentytwelve默认主题里的设置).然后其他的字体就是将你要的值除以14得到的值:比如默认的twentytwelve主题大小是960px:换算成rem就是960/14=68.57142857142857rem(我这个用电脑的计算器计算的,比默认的更精确,嘿嘿):padding的24px也就是24/14=1.7142

Gulpfile.js——编译、压缩、合并js和css文件

gulp 一个入门教程:http://www.ydcss.com/gulp API文档地址:http://www.gulpjs.com.cn/docs/api/ 我的一个Low版的gulpfile var gulp = require('gulp'); gulpif = require('gulp-if'); sass = require('gulp-sass'); concat = require('gulp-concat'); rename = require('gulp-rename');

前端资源多个产品整站一键打包&包版本管理（四）—— js&css文件文件打包并生成哈希后缀，自动写入路径、解决资源缓存问题。

问题: 当我们版本更新的时候,我们都要清理缓存的js跟css,如何使得在网页中不需要手动清理呢? 答案: 生成带有哈希后缀的js跟css文件 1.文件路径路径中的conf.js 是用于放置全局打包的公共方法的. conf.team.json 则是用于放置 team 这个项目的打包路径 . gulpfile.team.js 用于写 team 这个项目的打包. 打包前的文件放在build中.打包后的文件放在dist中总的打包任务在webapp 根目录下为什么要这样放置目录,请看 gulp分流

Gulp:静态资源(css,js)版本控制

为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录结构 html模板文件 <html> <head>  <link rel="stylesheet" href="../styles/one.css"&g

webstorm之js，css文件压缩

不说废话了,代码压缩是每个网站上线前的必备过程,但由于有时候小的项目或者加急的项目每次都构建一次类似gulp或者grunt等前端部署,实在是大题小做,所以才有了今天这个帖子: 我们会用到yui compressor 的jar包,已放入百度云,下载地址:http://pan.baidu.com/s/1o67tnB0 一:添加css压缩: 1.选择设置: 2.选择工具中的file Watchers选项 3.点击右侧的加号,选择YUI Compressor CSS选项 4.看图中所示位置选择下载的ja

Gulp 给所有静态文件引用加版本号

在juqery和easyui 盛行的年代许多项目采用纯静态页面去构建前端框架从而实现前后端分离的目的.项目开发周期内往往会频繁修改更新某个文件,当你将文件更新到服务器后客户端由于缓存问题而出现显示异常的情况,这时候你会经常让客户清楚缓存,然后开始了漫长的教学过程,,, 我们也会尝试在静态资源后面加上 "index.html?v=" new Date().getTime(); 来解决这个问题,效果也颇为良好,但当项目为已有项目时会是个相当头疼的问题,这个时候我们就会希望有一个全局构建工具

[转]gulp排除已压缩文件思路

文章转载至[gulp排除已压缩文件思路] gulp默认排除语法的弊端有个时候我们需要时用gulp排除已经压缩过的js,css等.如果以压缩文件是以".min.js"之类命名规范的还好,如果不是呢?而且还有其他一些场景也会有需要.gulp默认支持glob格式,排除语法为!举几个例子:排除目录 gulp.src([ baseDir + '/**', // Include all '!' + baseDir + '/excl1{,/**}', // Exclude excl1 dir '!

gulp 对js\css进行md5 加密

有的服务器为了网站加载速度,会做服务器缓存,这样就会出现代码出现引用地址没变,新代码不生效,而我们又希望新代码可以及时生效,这样我们就需要避免缓存,当然也有很多方法,本文只介绍使用gulp-rev(对文件名加MD5后缀)和gulp-rev-collector(路径替换)配合进行对文件名字进行md5加密. rev会做什么: 根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存文件名路径对应关系. 替换html里静态资源的路径为带有md5值的文件路径,这样

Asp-Net-Core开发笔记：使用NPM和gulp管理前端静态文件

前言本文介绍的是AspNetCore的MVC项目,WebApi+独立前端这种前后端分离的项目就不需要多此一举了~默认前端小伙伴是懂得使用前端工具链的. 为啥要用MVC这种服务端渲染技术呢? 简单项目不需要强行分离增加复杂度(如:我正在开发的博客项目) 后端渲染利于SEO,对博客网站友好 OK,虽然MVC的技术老了点,但依然可以结合现代前端工具链来提高效率本文的食用需要先安装好Node.js环境,下载地址:https://nodejs.org/en/download 在开始前,先看看我们的项目

js或css文件后面的参数是什么意思？

经常看到不少导航网站测样式或js文件后面加了一些参数,主要是一你为一些并不经常更新的页面重新加载新修改的文件. 经常遇到页面里加载的js与css文件带有参数,比如: <script type="text/javascript" src="jb51.js?version=1.2.6"></script><link rel='stylesheet' href='base.css?version=2.3.3' type='text/css'

MVC学习随笔----如何在页面中添加JS和CSS文件

http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子页面调用模板页即可. @{ ViewBag.Title = "用户注册"; Layout = "~/Views/Shared/_Layout.cshtml";} 第二句话便是指定该页面的模板页.我们只需要在模板页中进行js和css的引用. 下面来看_Layo

Sublime text 3如何编辑less并转(编译)成css文件

今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个软件还能扩展sublime的功能,何乐而不为,于是赶紧去网上查了资料并加以整理. 1.在sublime里安装好less(less语法高亮功能插件)和Less2Css(编译功能插件)这两个插件,具体步骤为: Ctrl+Shift+p打开命令面板,输入install package并在下拉里选中inst

gulp less 的css文件转rem

热门专题