使用gulp实现传统的多页面自动搭建，一个命令行完成混淆压缩

的项目，摄像头设置页面要求整个站点大小只能在100k，也就是frameworks比如vue，jquery库等。最好不要用，我们会用js的原生语言写，而且每次写完都要把整个站点压缩混淆再上传。考虑到浏览器文件缓存，最好在文件名中携带哈希版本号。哪一个更适合包装这件作品？使用在线网站压缩？每次都要把那么多文件的代码一个一个粘贴，然后再把结果复制回去。需求一变，又要重新来过，太麻烦了。使用网络包？webpack确实是当下最火的打包工具，但是在传统的多页面中使用webpack配置并不是很合适。它擅长模块化，要写很多配置文件，而我们这里只想用最简单的Gulp是最好的选择。Gulp基于Node.js构建。借助Node.jsflow的强大功能，首先打开命令行工具node-v，看是否返回版本号。如果没有，请先安装节点。然后安装gulp命令行工具npminstall-ggulp-cli切换到项目目录cdmyproject生成package.json文件在项目目录下创建package.json文件npminit命令会引导你设置项目名称，版本、描述信息等安装Gulp，作为开发依赖npminstall--save-devgulp检查gulp是否安装成功，如果成功则返回一个版本号gulp--version。接下来在根目录下创建一个gulpfile.js文件，这是gulp的配置文件，gulp有一个很重要的概念，叫做task。可以根据不同的功能，将每个任务单独写在一个函数中。您可以指定任务的顺序，最后将它们组装在一起。具体可以参考官网文档https://www.gulpjs.com.cn/docs/getting-started/creating-tasks/还有一个重点就是安装插件。不同的插件实现不同的功能。例如，gulp-htmlmin用于压缩html。gulp-uglify对js进行压缩和混淆，类似于webpack中的loadernpminstall-Dgulp-uglifygulp-htmlmingulp-minify-cssgulp-revgulp-rev-collectorgulp-clean为了能够转换es6代码源代码转换成各种浏览器兼容的代码也需要安装gulp-babel，@babel/core、@babel/preset-envnpminstall-Dgulp-babel@babel/core@babel/preset-envgulpfile的配置内容。jsconst{src,dest,series,watch}=require('gulp');const丑化=require('gulp-uglify');consthtmlmin=require('gulp-htmlmin')constminifyCSS=require('gulp-minify-css');constbabel=require("gulp-babel")constrev=require('gulp-rev');//给文件名加上MD5后缀constrevCollector=require('gulp-rev-collector');//路径替换constclean=require('gulp-clean');constentry="src/"//待处理的源代码文件夹constdist='dist/';//处理过的文件保存的目录//清除文件夹中之前的内容(){varoptions={removeComments:true,//清除HTML注释collapseWhitespace:true,//压缩HTMLcollapseBooleanAttributes:true,//省略布尔属性值==>removeEmptyAttributes:true,//移除所有空格作为属性值minifyJS:true,//压缩页面JSminifyCSS:true//CSS页面压缩};returnsrc(entry+'*.html').pipe(htmlmin(options)).pipe(dest(dist));}//css压缩，源代码文件夹下的css文件文件夹下的所有css文件都被压缩,文件名是用hash随机值生成的新文件保存在dist的css目录下functionminifyCss(){returnsrc(entry+'css/*.css').pipe(minifyCSS())//压缩css.pipe(rev())//文件name添加MD5后缀.pipe(dest(dist+'css/'));//输出到css目录.pipe(rev.manifest('rev-css-manifest.json'))////生成一个rev-css-manifest.json.pipe(dest('rev'));//将rev-css-manifest.json保存到rev目录}//js压缩，将源文件夹src中js文件夹下的所有js文件压缩并混淆，生成一个新文件，文件名中有一个hash随机值并保存在dist的js目录下functionminifyJs(){returnsrc(entry+'js/*.js').pipe(babel({presets:['@babel/preset-env']})).pipe(uglify())//将js压缩成一行.pipe(rev())//文件名加上MD5后缀.pipe(dest(dist+'js/'))//输出到js目录.pipe(rev.manifest('rev-js-manifest.json'))////生成一个rev-js-manifest.json.pipe(dest('rev'));//将rev-js-manifest.json保存到rev目录}//打包图片函数movePic(){returnsrc(entry+'img/*').pipe(rev()).pipe(dest(dist+'img/')).pipe(rev.manifest('rev-img-manifest.json'))//生成一个rev-img-manifest.json.pipe(dest('rev'));//将rev-img-manifest.json保存到rev目录下；}//使用rev-collect将html中导入的资源路径替换为md5文件名函数srcReplace(){//html,forjs,css,img返回src(['rev/*.json',dist+'*.html']).pipe(revCollector({replaceReved:true})).pipe(dest(dist));};exports.default=series(cleanBefore,minifyHtml,minifyCss,minifyJs,movePic,srcReplace);//组合任务最后在命令行执行gulpxxxx(exports任务名，比如导出时使用exports.mybuild，xxxx为mybuild)，如果使用exports.default直接将任务导出到gulp，你执行后会直接在dist目录下看到压缩文件