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

发表评论

电子邮件地址不会被公开。 必填项已用*标注