gulp 的配置 gulpfile.js

var gulp = require('gulp');
// 压缩html代码
const htmlClean = require('gulp-htmlclean');
// 图片类： 压缩PNG, JPEG, GIF and SVG
 const imageMin = require('gulp-imagemin');
// uglify 不支持压缩 es6 ， 需要先使用babel降级才行 */
const uglifyJS = require('gulp-uglify')
//去除掉 注释， console 和 debugger
const removeComments = require('gulp-strip-debug')
//less 转 css
const sass = require('gulp-sass');
//css3 兼容各类浏览器脚本
const postCss = require('gulp-postcss');
const autoPrefixer = require('autoprefixer');
//css代码压缩
const cleanCss = require('gulp-clean-css');
// 合并html
var fileinclude = require("gulp-file-include");
//创建服务器环境插件 支持热更新
const connect = require("gulp-connect");
replace = require('gulp-replace'); //定义一个tpxToRem任务（自定义任务名称）
var environment = process.env.NODE_ENV || "development";
var px2rem = require('gulp-px2rem-plugin');
//根据自己开发的实际需求自行设置， src放开发文件， dist是打包压缩后的导出目录
const folder = {
  src: "./src/**",
  dist: "./dist/"
};

gulp.task('html', function () {
  const step = gulp.src(folder.src + "/*.html", { sourcemaps: true })
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(connect.reload())

  if (environment == 'production') {
    step.pipe(htmlClean())
  }
  step.pipe(gulp.dest(folder.dist))

  return new Promise(function (resolve) {
    resolve()
  })
})

gulp.task('img', function () {
  gulp.src(folder.src + "/images/*", { sourcemaps: true })
    .pipe(imageMin())
    .pipe(gulp.dest(folder.dist))

  return new Promise(function (resolve) {
    resolve();
  });
})


gulp.task('css', function () {
  var step = gulp.src([folder.src + "/css/*"], { sourcemaps: true })
    .pipe(connect.reload())
    .pipe(sass())
    .pipe(postCss([autoPrefixer()]))
    .pipe(px2rem())
    .pipe(px2rem({'width_design':375,'valid_num':4,'pieces':10,'ignore_px':[1,2],'ignore_selector':['.class1']}));
  if (environment == 'production') {
    step.pipe(cleanCss())
  }
  step.pipe(gulp.dest(folder.dist))

  return new Promise(function(resolve) {
    resolve();
  });
})

gulp.task('js', function () {
  var step = gulp.src(folder.src + "/js/*", { sourcemaps: true })
    .pipe(connect.reload())
  if (environment == 'production') {
    step.pipe(removeComments())
      .pipe(uglifyJS())
  }
  step.pipe(gulp.dest(folder.dist))

  return new Promise(function(resolve) {
    resolve();
  });
})

gulp.task('img', function () {
  gulp.src(folder.src + "/images/*", { sourcemaps: true })
    .pipe(imageMin())
    .pipe(gulp.dest(folder.dist))

  return new Promise(function (resolve) {
    resolve();
  });
})

gulp.task('server', function () {
  //设置默认服务器接口， livereload: true 是否监视文件变化
  connect.server({
    port: 3091,
    livereload: true
  })

  return new Promise(function(resolve) {
    resolve();
  });
})

//自动刷新页面
gulp.task('watch', () => {
  gulp.watch(folder.src + "/*.html", gulp.series("html"));
  gulp.watch([folder.src + "/css/*", "!./src/assets/**"], gulp.series("css"));
  // gulp.watch([folder.src + "/css/*", "!./src/assets/**"], gulp.series("pxToRem"));
  gulp.watch(folder.src + "/js/*", gulp.series("js"));

  return new Promise(function (resolve) {
    resolve();
  });
})

gulp.task(
  "default",
  gulp.series("html", "css", "js", "server", "watch", "img")
);