Gulp配置📦示例

官方示例

民间自定义配置示例

/* eslint-disable no-console */
const path = require('path');
const gulp = require('gulp');
const less = require('gulp-less');
const rename = require('gulp-rename');
const cleanCss = require('gulp-clean-css');
const babel = require('gulp-babel');
const gulpif = require('gulp-if');
const isProduction = process.env.NODE_ENV === 'production';
const dist = isProduction
  ? path.join(__dirname, '../es')
  : path.join(__dirname, '../demo/es');
const src = path.join(__dirname, '../src');
const extTypes = ['ts', 'less', 'json', 'axml', 'sjs'];
gulp.task('less', () =>
  gulp
    .src(`${src}/**/*.less`) // 读取src目录下所有的less文件
    .pipe(
      less({
        modifyVars: {
          '@pixelSize': '1rpx',
        },
      }) // 采用less的默认方式处理less产出css
    )
    .on('error', e => console.error(e)) // 监听执行task过程中产生的错误
    .pipe(gulpif(isProduction, cleanCss())) // 压缩css
    .pipe(
      rename({
        extname: '.acss',
      }) // 重命名
    )
    .pipe(gulp.dest(dist)) //输出到dist文件夹下
);
gulp.task('ts', () =>
  gulp
    .src(`${src}/**/*.ts`) // 读取src目录下所有的ts文件
    .pipe(babel()) //将ts文件转译为es6的js文件
    .on('error', (err) => {
      console.log(err);
    })
    .pipe(gulp.dest(dist))
);
gulp.task('json', () => gulp.src(`${src}/**/*.json`).pipe(gulp.dest(dist)));
gulp.task('axml', () => gulp.src(`${src}/**/*.axml`).pipe(gulp.dest(dist)));
gulp.task('sjs', () => gulp.src(`${src}/**/*.sjs`).pipe(gulp.dest(dist)));
const build = gulp.series(...extTypes);
build();
if (!isProduction) {
  extTypes.forEach((type) => {
    const watcher = gulp.watch(`${src}/**/*${type}`, gulp.series(type)); // 监听src目录下'ts', 'less', 'json', 'axml', 'sjs'等文件的change
    watcher.on('change', (event) => {
      console.log(`File ${event} was change`); // 打印日志
    });
    watcher.on('add', (event) => {
      console.log(`File ${event} was add`);
    });
    watcher.on('unlink', (event) => {
      console.log(`File ${event} was remove`);
    });
  });
}