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为例(编译less文件),命令提示符执行cnpm install gulp-replace --save-dev;将会安装在node_modules的gulp-less目录下,该目录下有一个gulp-less的使用帮助文档README.md;
3.2为了能正常使用,我们还得本地安装gulp:cnpm install gulp --save-dev;
PS:细心的你可能会发现,我们全局安装了gulp,项目也安装了gulp,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能;
4.新建gulpfile.js文件(重要)
说明:gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)。
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
replace = require('gulp-replace'); //定义一个tpxToRem任务(自定义任务名称)
gulp.task('pxToRem', function(){
return gulp.src('css/*.css')//该任务针对的文件
.pipe(replace(/(\d+)px/g, function(match, p1){
return Number(p1) / 100 + 'rem';
}))//该任务调用的模块
.pipe(gulp.dest('new'));//将会在new下生成替换好的css文件
}); gulp.task('default',['pxToRem']); //定义默认任务 //gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径
5.运行gulp
5.1 在命令窗口运行: gulp pxToRem (当执行gulp default或gulp将会调用default任务里的所有任务)
5.2 使用webstrom运行gulp任务:将项目导入webstorm,右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口,若出现”No task found”,选择右键”Reload tasks”,双击运行即可。
gulp快速将css中的px替换成rem的更多相关文章
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- CSS中单位px和em,rem的区别
PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- 彻底弄懂css中单位px和em,rem的区别 转的自己看
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- 弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...
- 【转载】彻底弄懂css中单位px和em,rem的区别
原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...
- css中单位px和em,rem的区别[转载]
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- [转]彻底弄懂css中单位px和em,rem的区别
难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...
- css中单位px,em,rem和vh/vw的理解
>px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...
- 网页布局设计css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
随机推荐
- Linux常用快捷键、文件管理和查询
有话要说 为什么要用Linux?要用Linux的原因太多,想说说不完啊.如果你说用Linux只是为了装逼,那证明你真的还很菜.不排除有装逼了因素,那也只占非常少的比例,可以忽略不计.我们反问一下,为什 ...
- 七,OpenERP 移库操作模块
整个代码中比较关键的地方是如何统计出不同库位的产品数量.
- 使用nginx反向代理jenkins
1.在Jenkins 官方网站(http://jenkins-ci.org/)下载最新版本war包.拷贝到 $TOMCAT_HOME/webapps 下(不用解压).启动tomcat服务. 2.找到n ...
- php 使用 rabbitmq
1,配置好rabbitmq 服务器 (参照 http://www.cnblogs.com/spicy/p/7017603.html)(我是linux) 2,新增了一个用户 并点击该用户 增加权限如下
- springMVC与Struts2区别
1.拦截级别 Struts2是类级别的拦截,一个类对应一个request上下文 SpringMVC是方法级别的拦截,一个方法对应一个request上下文,而方法同时又跟一个url对应 所以说从架构本身 ...
- Javac词法分析
参考:<深入分析Java Web>技术内幕 许令波 词法分析过程涉及到的主要类及相关的继承关系如下: 词法分析的接口为Lexer,默认实现类为Scanner,Scanner会逐个读取Jav ...
- DotNetCore跨平台~autofac属性的自动注入
回到目录 在使用autofac这个DI工具时,我们一般使用的是构造方法注入,而dotnetcore的标准框架里也集成了构造方法注入,而属性注入在一些场景下,表现的更为灵活,像java的spring框架 ...
- 介绍Windows Azure HDInsight服务的Hadoop Storm的视频
介绍Windows Azure HDInsight服务的Hadoop Storm的原理,用例及开发入门的视频,收藏一下: http://channel9.msdn.com/Shows/Data-Exp ...
- Eclipse空白包的显示和隐藏
Eclipse空白包的显示和隐藏 点击三角形, ,下拉 -> Customize View... -> Empty packages (勾选)
- CUBA与Spring相比,有很大的不同吗?
原文:Developing with CUBA - a big shift from Spring? 翻译:CUBA China CUBA-Platform 官网 : https://www.cuba ...