美文网首页
gulp下安装postcss-px2rem插件

gulp下安装postcss-px2rem插件

作者: 臭臭臭魁 | 来源:发表于2016-01-28 15:00 被阅读5818次

px2rem可以自动的把你的css代码px单位转换成rem单位,可以实现边编辑边转换,在开发手机网站是可以很 高效率的工作,同时也存在一些弊端。就是你在浏览器里调试px单位时,不太方便,,总之利大于弊。

第一步:

  你的电脑必须已经安装node.js,没有安装node的可以去node官网(https://nodejs.org/en/)下载并安装;

第二步:

1. 全局安装gulp环境;命令行输入以下代码:
命令行输入( npm  install gulp -g ) 全局安装gulp;

2. 全局安装完成之后,需要进入到具体的项目根目录里再安装一次;
命令行输入( npm  install gulp ) 项目安装gulp;

第三步:

1. 安装postcss, 命令行输入 
Paste_Image.png
2. 安装成功会显示如下图:
Paste_Image.png
3. 项目node_modules文件夹里会出现,下图文件:
Paste_Image.png

;

第四步:

1. 配置gulpfile.js文件

JavaScript

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
less = require('gulp-less');

//定义一个testLess任务(自定义任务名称)
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});

gulp.task('default',['testLess', 'elseTask']); //定义默认任务

//gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径

第五步:

运行命令 gulp(默认任务名:default) 或 gulp 任务名

通过package.json文件安装插件,先配置package.json文件,命令行输入npm install,就可以安装 package.json里的插件了。。
想通过命令行写package.json文件,输入npm install -save-dev gulp-postcss,就可以实现安装插件的同时,把插件同时写进package.json文件,多人同时开发是,一个人配置好之后,发个别人package.json文件,直接安装就可以用,很方便快捷,又避免多人各自安装出现各种问题。

相关文章

  • gulp下安装postcss-px2rem插件

    px2rem可以自动的把你的css代码px单位转换成rem单位,可以实现边编辑边转换,在开发手机网站是可以很 高...

  • gulp的简单使用

    gulp使用流程:安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gu...

  • 关于前端自动化工具GULP

    Gulp的准备工作 1、准备工作 2、Gulp基础 3、Gulp插件 安装gulp 在node.js环境下输入指令...

  • gulp入门

    安装gulp 安装gulp插件 gulp使用与执行 在目录创建gulpfile.js文件 执行:gulp defa...

  • gulp篇:速玩JS文件合并和压缩

    gulp合并插件 安装:npm install gulp-concat --save-dev 安装好之后 var ...

  • 移动端rem适配

    安装插件 在main.js中引入文件 配置postcss-px2rem

  • Hexo静态资源压缩

    静态资源压缩可以优化网页的访问速度、提高用户体验 安装gulp 在站点目录下 或者 安装gulp插件 创建gulp...

  • gulp搭建项目

    代码配置部分转载自blog链接 安装gulp 增加包管理文件 npm init 安装项目插件 除了全局安装gulp...

  • Gulp

    gulpa. 生成 package.jsonnpm init -yb. 项目安装 gulp 及 gulp插件cnp...

  • gulp使用入门

    API 文档所有压缩插件,可参考gulp官方或者node官方 1.安装node和gulp:node安装暂不介绍。g...

网友评论

      本文标题:gulp下安装postcss-px2rem插件

      本文链接:https://www.haomeiwen.com/subject/vqhjkttx.html