gulp——文件监控watch（一）

最近在做一个比较老的项目，没有webpack的支持，只能用gulp来构建想要的开发环境。

px2rem

• 已经安装了gulp依赖，如果未安装：

npm install –save-dev gulp

• 安装 gulp-px2rem-plugin2 依赖

npm install gulp-px2rem-plugin –save-dev

• 安装 gulp-rename 依赖

npm install gulp-rename –save-dev

• 在根目录下新建gulpfile.js

const gulp = require('gulp');
const {watch} = require('gulp');
const rename = require('gulp-rename');
const px2rem = require('gulp-px2rem-plugin');

gulp.task("iframeCss", () => {
   return gulp.src('common.css')
     .pipe(px2rem({'width_design': 1024, 'valid_num':6, 'pieces': 10}))
     .pipe(rename("iframe_common.css"))
     .pipe(gulp.dest('css'));
});

gulp.task("commonCss", () => {
   return gulp.src('common.css')
     .pipe(px2rem({'width_design': 1200, 'valid_num':6, 'pieces': 10}))
     .pipe(rename("common.css"))
     .pipe(gulp.dest('css'));
});

gulp.task("watch", () => {
   watch('common.css', gulp.parallel('iframeCss', 'commonCss'));
});

gulp.task("default", gulp.parallel('commonCss', 'iframeCss', (callback) => {
   callback();
}));

• 启动监听

gulp watch