gulp

安装命令行工具

npm install --global gulp-cli

需要init项目结构

安装gulp

npm install --save-dev gulp

创建gulpfile.js文件

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

这里的代码为官网默认代码

压缩html
需要导入

1. var revCollector = require('gulp-rev-collector');//- 路径替换，js文件生成签名后对html中的引用进行调整
2. var htmlmin = require("gulp-htmlmin");

function htmlTask(){
  var options = {
    removeComments: true,  //清除HTML注释
    collapseWhitespace: true,  //压缩HTML
    collapseBooleanAttributes: true,  //省略布尔属性的值 <input checked="true"/> ==> <input checked />
    removeEmptyAttributes: true,  //删除所有空格作属性值 <input id="" /> ==> <input />
    removeScriptTypeAttributes: true,  //删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true,  //删除<style>和<link>的type="text/css"
    minifyJS: true,  //压缩页面JS
    minifyCSS: true  //压缩页面CSS
};

  src(['./rev/**/*.json','./**/*.html',"!./node_modules/**/*.html","!./temp/**","!/dist/**"])   //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
  //- 执行文件内css、js名的替换
  .pipe(revCollector({
          replaceReved: true,//允许替换, 已经被替换过的文件
      }))   
        .pipe(htmlmin(options))                                
        .pipe(dest('dist/'));//- 替换后的文件输出的目录
}

css压缩
需要导入

1. var rev = require('gulp-rev');//- 对文件名加MD5后缀
2. var cssmin = require("gulp-cssmin");

function cssTask(){
  src(['./**/*.css','!./node_modules/**'])
  .pipe(cssmin())
  .pipe(rev()) 
  .pipe(dest('dist/'))
  .pipe(rev.manifest())//- 生成一个rev-manifest.json
  .pipe(dest('./rev/css'));//- 将 rev-manifest.json 保存到 rev 目录内
}

js压缩
导入

1. var uglify = require('gulp-uglify');

function jsTask(){
  src(['./**/*.js',"!gulpfile.js","!node_modules/**/*.js"])
  .pipe(removeLogging())//移除console语句
  //代码混淆
  //1. 直接混淆方法内的代码
  .pipe(uglify())
  //2. 混淆全部代码，包括函数名
  // .pipe(uglify({ mangle: { 
  //                   toplevel: true //混淆变量名
  //                 }
  //               ,compress:true//是否完全压缩
  //             }))
  //添加文件后缀md5
  .pipe(rev()) 
  //保存文件
  .pipe(dest('dist/'))
  .pipe(rev.manifest())//- 生成一个rev-manifest.json
  .pipe(dest('./rev/js'));//- 将 rev-manifest.json 保存到 rev 目录内
}

最后在defaultTask中以此调用

function defaultTask(cb) {
  clear();
  jsTask();
  cssTask();
  htmlTask();
  // testHtml();
  // return series(clear,jsTask,cssTask,htmlTask);
  cb();
}

控制台中运行

gulp

$\color{red}{点击展开完整代码}$

``` const { src, dest, series, task } = require('gulp'); const gulp = require('gulp'); var uglify = require('gulp-uglify'); var cssmin = require("gulp-cssmin"); var htmlmin = require("gulp-htmlmin"); var removeLogging = require("gulp-remove-logging"); var rev = require('gulp-rev');//- 对文件名加MD5后缀 var revCollector = require('gulp-rev-collector');//- 路径替换 var clean=require('gulp-clean');

function clear(){
console.log("clean project....");
src(["dist","rev","temp","test"],{allowEmpty:true})
.pipe(clean());
console.log("clean project success");
}

function testHtml(){
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 ==>
removeEmptyAttributes: true, //删除所有空格作属性值 ==>
removeScriptTypeAttributes: true, //删除