Gulp入门使用

将css文件中px单位转为rem单位

1. 环境安装&入门使用

1.1 安装node环境

node --version

1.2 安装 gulp 命令行工具

npm install --global gulp-cli

1.3 创建项目目录并进入

npx mkdirp my-project
cd my-project

1.4 在项目目录下创建 package.json 文件

npm init

1.5 安装 gulp，作为开发时依赖项

npm install --save-dev gulp

1.6 创建 gulpfile 文件

利用任何文本编辑器在项目大的根目录下创建一个名为 gulpfile.js 的文件，并在文件中输入以下内容：

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

1.7 测试

在项目根目录下执行 gulp 命令：

gulp

如需运行多个任务（task），可以执行 gulp。

1.8 输出结果

默认任务（task）将执行，因为任务为空，因此没有实际动作。

2.css单位转换px->rem

2.1 安装插件

npm i gulp-postcss  postcss-px2rem  --save-dev

2.2 gulpfile.js文件中创建任务

任务会将src下所有css文件中px单位转为rem单位输出到dest目录

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var px2rem = require('postcss-px2rem');

gulp.task('default', function() {
    var processors = [px2rem({remUnit: 75})];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

2.3 示例