前言这篇文章的主要目的是告诉你构建工具可以做什么。你不必深入研究这个东西。最基本的是要有一个概念。什么是前端建设？我们在浏览一些大型网站的时候，会发现有的css被压缩了（去掉空格和注释），js被混淆压缩了。一些引用的文件链接会添加奇怪的字符串（文件md5），例如：这样做的好处是什么？压缩可以减小文件的体积，便于在网络中传输，从而加快网页的响应速度。给文件加上md5戳的主要目的是解决文件更新和浏览器缓存的冲突。这部分请参考在大公司如何开发部署前端代码？什么是构建工具？前端部署在刀耕火种的工人时代（手工）之后迎来了工业时代（自动化工具）。随着node的出现，基于此的代表性构建工具有grunt、gulp、webpack。这些工具主要帮助我们完成上述工作。对于我们项目的现状来说，没有必要对这些工具做过多的深入研究，几个基本的功能就可以达到不错的效果。用了gulp之后，用了好几个构建工具，感觉还是gulp最好。以前用过grunt，被它复杂的配置文件吓到。webpack是最新最火的构建工具，但是这个工具更侧重于模块化和打包，不太适合我们现在。后来在百度前端用的是FIS。我以为这个构造工具有一个傻瓜式的配置。大公司生产，质量有保证。但是用了之后发现这个FIS更适合做纯前端。最后，使用gulp后，发现基本可以满足我们目前项目的需求。我们需要安装node和gulp，这里偷懒，安装教程太多了，网上搜了一大堆，实战可以参考这个gulp安装1.分析当前前端资源前端目录我们项目的结构simplebootx/--Portal/--News/index.html--Public/--css/--Archaeol/academic.cssstyle.css--images--js--wenbobaikeprovince.jsdigit.jssimpleboot/head_bt3.htmlscripts.html这是我们项目的基础目录。在使用的过程中，之前有一个问题困扰着我，就是构建工具基本上都是针对纯前端的，而我们的前端其实就是后端框架的模板文件，文件路径是个很麻烦的问题。这也是我放弃百度FIS的原因。经过实践，我发现gulp是一个比较灵活的工具，但是开始配置比较麻烦。2.我们需要的功能是css，js压缩，文件md5戳。需要安装的gulp插件在package.json中。具体安装过程参考准备步骤{"name":"test","version":"1.0.0","description":"Thisistostudygulpproject!","homepage":"","repository":"","author":"","license":"ISC","devDependencies":{"del":"^2.2.2",//删除文件"gulp":"^3.9.1",//gulp"gulp-clean-css":"^2.0.12",//css压缩"gulp-filter":"^4.0.0","gulp-htmlmin":"^2.0.0",//html压缩，去除html注释，压缩内联css等"gulp-less":"^3.1.0",//lesscompile"gulp-rev":"^7.1.2",//md5"gulp-rev-collector":"^1.0.5",//md5文件关联"gulp-uglify":"^2.0.0",//js混淆"gulp-useref":"^3.1.0","乙烯基路径":"^2.1.0"}}3.Gulpfile.js文件编写/*前面的步骤是定义一些路径变量*///dist是生成版本的目标文件夹，也就是要部署到线上的文件夹vardist="./dist/";//src目录是我们的源代码varsrc="./simplebootx/";varstatic="Public/";varpaths={tpl:"Portal/**/*.html",css:"css/**/*.css",images:"images/**.*",js:"js/**/*.js",lib:{boostrap:"simpleboot/**/*.*"}};/*导入插件使用*/vargulp=require('gulp');varcleanCSS=require('gulp-clean-css');varrev=require('gulp-rev');varrevCollector=require('gulp-rev-collector');vardel=require('del');varvinylPaths=require('vinyl-paths');varuglify=require('gulp-uglify');varhtmlmin=require('gulp-htmlmin');vardel=require('del');vars=src+static,d=dist+static;//不编译复制文件到生产环境gulp.task("copy",函数(cb){gulp.src(src+"*.html").pipe(gulp.dest(dist));gulp.src(s+paths.images).pipe(gulp.dest(d+"images"));gulp.src(s+paths.lib.boostrap).pipe(gulp.dest(d+"simpleboot/"));});//压缩cssgulp.task("compressCss",function(){returngulp.src(s+paths.css).pipe(cleanCSS({compatibility:'ie8'})).pipe(gulp.dest(d+"css"));});//compressjsgulp.task('compressJs',function(){returngulp.src(s+paths.js).pipe(uglify()).pipe(gulp.dest(d+"js"));});//压缩htmlgulp.task('compressHtml',function(){varoptions={removeComments:true,//清除HTML注释removeScriptTypeAttributes:true,//删除`
