layui-admin 使用gulp打包压缩，拿来即用

首先layui-admin的目录结构是这样的：src 和 start两个文件夹

一、下载和安装node： V10.22.1, 下载地址: 点击下载：https://nodejs.org/dist/v10.22.1/node-v10.22.1-x64.msi ,全部下一步。

二、安装镜像：打开终端，输入：npm install -g cnpm --registry=https://registry.npm.taobao.org
三、在根目录（start、src同级）新建 package.json 文件，内容如下：

{
  "name": "layui-gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.1",
    "html-minifier": "^4.0.0"
  },
  "devDependencies": {}
}

四、在根目录 新建gulpfile.js文件，内容如下：

let gulp = require('gulp');
let uglify = require('gulp-uglify');        // js压缩
let minify = require('gulp-minify-css');    // css压缩
let del = require('del');                   // 删除文件
let minifier = require('html-minifier');    // html压缩
let imagemin = require('gulp-imagemin');    // 图片压缩

// 任务列表
let taskList = {
    // 压缩 html 文件
    minHtml: () => {
        gulp.src(['./src/**/*.html'])
            .on('data', function (file) {
                const buferFile = Buffer.from(minifier.minify(file.contents.toString(), {
                    includeAutoGeneratedTags: true, // 插入由HTML解析器生成的标记
                    removeAttributeQuotes: true,    // 在可能的情况下删除引号。
                    removeComments: true,           // 带HTML注释
                    removeRedundantAttributes: true,    // 当值匹配默认值时删除属性。
                    removeScriptTypeAttributes: true,   // 从脚本标签中删除type="text/javascript"。其他类型的属性值是完整的。
                    removeStyleLinkTypeAttributes: true,    // 从style和link标签中删除type="text/css"。其他类型的属性值是完整的。
                    sortClassName: true,    // 按频率分类样式类。
                    useShortDoctype: true,  // 用short (HTML5) doctype替换doctype
                    collapseWhitespace: true,   // 在显示之间不要留下任何空格:内联;崩溃时的元素
                    minifyJS: true,     // 在脚本元素和事件属性中缩小JavaScript
                    minifyCSS: true,    // 缩小CSS样式元素和样式属性
                }))
                return file.contents = buferFile
            })
            .pipe(gulp.dest('./dist'));
    },
    // 压缩 JS 文件
    minJs: () => {
        gulp.src(['./src/**/*.js', '!./src/lib/**/*.min.js']).pipe(uglify({
            output: {
                ascii_only: true // escape Unicode characters in strings and regexps
            }
        })).pipe(gulp.dest('./dist'));
    },
    // 压缩 css 文件
    minCss: () => {
        gulp.src(['./src/**/*.css']).pipe(minify({
            compatibility: 'ie7'
        })).pipe(gulp.dest('./dist'));
    },

    // 压缩图片资源
    minImg: () => {
        gulp.src(['./src/**/*.{png,jpg,gif,svg}']).pipe(imagemin({
                progressive: true, // 无损压缩JPG图片
                svgoPlugins: [{removeViewBox: false}], // 不移除svg的 viewbox 属性
            })).pipe(gulp.dest('./dist'));
    },

    // 复制组件可能所需的其他资源
    copyFile: () => {
        gulp.src(['./src/**/*.{mp3,json,eot,ttf,woff}']).pipe(gulp.dest('./dist'));
    }
};

//清理
gulp.task('clear', function (cb) {
    return del(['./dist/*'], cb);
});

//完整任务 gulp
gulp.task('default', ['clear'], function () {
    for (let key in taskList) {
        taskList[key]();
        console.log(key);
    }
});

五、在根目录位置的终端里（尽量不用idea自带的, 会看不到运行的进度。建议用cmd或powershell终端）输入: cnpm install
六、等待安装完，成功后会在根目录生成 node_modules 文件夹。接着输入：gulp
七、运行完成，将start文件夹下 index.html文件，src改成 dist， 浏览器中打开该html文件，页面正常显示，即成功。