gulpfile压缩图片，压缩js ,压缩html,压缩js

gulpfile压缩图片，压缩js ,压缩html,压缩js

gulpfile.js代码

const gulp = require('gulp');
const connect = require('gulp-connect');
const px2viewport = require('postcss-px-to-viewport')
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const less = require('gulp-less');
const cssmin = require('gulp-clean-css');
const imagemin = require('gulp-imagemin');
const assetRev = require('gulp-asset-rev');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');

var fs = require('fs');

var env = 'test'; // 用于执行gulp任务时的判断
function set_env(type){
    env = type || 'dev';
    // 生成env.js文件，用于开发页面时，判断环境
    
    fs.writeFile("./src/js/env.js", 'function ENV (){ return "' + env + '"};', function(err){
        err && console.log(err);
    });
}


gulp.task('connect',function(){
  connect.server({
    host: '192.168.0.117',
    port: 3200, // 端口
    root: 'expressThree', // 入口目录名
    livereload: true // 是否自动更新
  })
})
// // 变异less文件：PC端去掉px2rem配置
// gulp.task('less', function () {
//   set_env(process.env.NODE_ENV)
//   var processors = [
//     px2viewport({
//       viewportWidth: 750, // 设计稿宽度
//       viewportUnit: 'vw', // 转换后单位
//       minPixelValue: 2 // 设置要替换的最小像素值
//     }),
//     autoprefixer({ // 自动补全
//       overrideBrowserslist: [
//         "iOS >= 8",
//         "Firefox >= 20",
//         "Android > 4.4"
//       ]
//     })
//   ]
//   return gulp.src('src/less/*.less')
//   .pipe(less())
//   // .pipe(assetRev())
//   .pipe(postcss(processors))
//   // .pipe(cssmin())
//   .pipe(gulp.dest('dist/css'))
//   .pipe(connect.reload());
// })

// 迁移src/css文件
gulp.task('cssmove', function () {
  return gulp.src('expressThree/css/*.css')
      .pipe(cssmin())
      .pipe(gulp.dest('expressThreedist/css'))
      .pipe(connect.reload());
});

/* 
 *压缩转移图片 
 */
 gulp.task('imagemin', function() {
  return gulp.src('src/images/**/*')
        .pipe(imagemin({
           optimizationLevel: 1,
         }))
         .pipe(gulp.dest('dist/images'))
         .pipe(connect.reload());
 });
// 重新载入html
gulp.task('html', function () {
  return gulp.src('expressThree/*.html')
   .pipe(htmlmin({ collapseWhitespace: true,minifyJS:true,minifyCSS:true,collapseInlineTagWhitespace:true}))
  // .pipe(assetRev())
  .pipe(gulp.dest('expressThreedist'))
  .pipe(connect.reload());
})
// 重新载入js
gulp.task('js', function () {
  return gulp.src('expressThree/js/*.js')
  .pipe(uglify())
  .pipe(gulp.dest('expressThreedist/js'))
  .pipe(connect.reload());
})

gulp.task('watch', function () {
  gulp.watch('src/expressTwo/*.html', gulp.series('html'))
  // gulp.watch('src/css/*.css', gulp.series('cssmove'))
  gulp.watch('src/js/expressTwo/*.js', gulp.series('js'))
  // gulp.watch('src/less/*.less', gulp.series('less'))
  // gulp.watch('src/images/**/*', gulp.series('imagemin'))
})

gulp.task('build', gulp.series('cssmove','html','js'))
gulp.task('default', gulp.parallel('watch', 'connect', 'build'))

package.json 代码

{
  "name": "mosowe-gulp",
  "version": "1.0.0",
  "description": "gulp templet",
  "main": "gulpfile.js",
  "dependencies": {
    "cross-env": "^7.0.2",
    "gulp-htmlmin": "^5.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^9.6.1",
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^4.0.2",
    "gulp-asset-rev": "0.0.15",
    "gulp-babel": "^7.0.1",
    "gulp-clean-css": "^4.2.0",
    "gulp-connect": "^5.7.0",
    "gulp-imagemin": "^6.0.0",
    "gulp-less": "^4.0.1",
    "gulp-postcss": "^8.0.0",
    "gulp-preprocess": "^3.0.3",
    "gulp-uglify": "^3.0.2",
    "postcss-px-to-viewport": "^1.1.1"
  },
  "scripts": {
    "build": "cross-env NODE_ENV=production gulp build",
    "serve": "cross-env NODE_ENV=test gulp",
    "test": "cross-env NODE_ENV=test gulp build",
    "trail": "cross-env NODE_ENV=trail gulp build"
  },
  "author": "",
  "license": "ISC"
}