在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
虽然网上有很多的 gulp 构建文章，但是很多都已经随着 gulp 插件的更新无法运行了。因此，我写了这个比较简单的构建方案。
如果还不熟悉gulp的插件，可以阅读上一篇文章：
这个方案主要是为了实现js/css的压缩合并、自动添加版本号和压缩html。
压缩优化css
gulp-uglify
gulp-html-minify
gulp-rev-all
生成版本号
主要通过上面插件实现功能，其他插件配合使用。
// gulpfile.js
var gulp = require('gulp'),
htmlmini = require('gulp-html-minify'),
useref = require('gulp-useref'),
uglify = require('gulp-uglify'),
csso = require('gulp-csso'),
filter = require('gulp-filter'),
RevAll = require('gulp-rev-all'),
del = require('del');
gulp.task('default',['del'], function () {
var jsFilter = filter('**/*.js',{restore:true}),
cssFilter = filter('**/*.css',{restore:true}),
htmlFilter = filter(['**/*.html'],{restore:true});
gulp.src('/*.html')
.pipe(useref())
// 解析html中的构建块
.pipe(jsFilter)
// 过滤所有js
.pipe(uglify())
.pipe(jsFilter.restore)
.pipe(cssFilter)
// 过滤所有css
.pipe(csso())
// 压缩优化css
.pipe(cssFilter.restore)
.pipe(RevAll.revision({
// 生成版本号
dontRenameFile: ['.html'],
// 不给 html 文件添加版本号
dontUpdateReference: ['.html']
// 不给文件里链接的html加版本号
.pipe(htmlFilter)
// 过滤所有html
.pipe(htmlmini())
// 压缩html
.pipe(htmlFilter.restore)
.pipe(gulp.dest('/dist'))
gulp.task('del',function () {
del('/dist');
// 构建前先删除dist文件里的旧版本
在html中，我们需要先定义好构建块。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&gulp自动化构建解决方案&/title&
&!-- build:css static/css/index.css --&
// 定义了构建后引用的css路径
&link rel="stylesheet" href="static/css/common.css"/&
&link rel="stylesheet" href="static/css/index.css"/&
&!-- endbuild --&
&!-- build:js static/js/index.js --&
// 定义了构建后引用的js路径
&script src="static/js/jquery.js"&&/script&
&script src="static/js/common.js"&&/script&
&script src="static/js/index.js"&&/script&
&!-- endbuild --&
执行构建完成后，会生成 dist 文件夹，目录为：
|-index.96cf44da.css
|-index.42ce3282.js
|-index.html
构建完的index.html，我们忽略压缩的html，完成了压缩合并添加版本号等功能。
// dist/index.html
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&gulp自动化构建解决方案&/title&
&link rel="stylesheet" href="static/css/index.96cf44da.css"/&
&script src="static/js/index.42ce3282.js"&&/script&
更多文章可以访问我的博客：
3 收藏&&|&&6
你可能感兴趣的文章
4 收藏，621
8 收藏，997
4 收藏，460
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
gulpfile.js的配置里 ，使用'/dist'这个路径怕是会在根目录生成文件，被提示permission denied, mkdir，了。改为'dist'一切正常。
gulpfile.js的配置里 ，使用'/dist'这个路径怕是会在根目录生成文件，被提示permission denied, mkdir，了。改为'dist'一切正常。
以及src的index.html一直以为填写的是构建吼的css/js路径...结果一直被提示文件不存在，后来改成引用src的文件就正常了。
以及src的index.html一直以为填写的是构建吼的css/js路径...结果一直被提示文件不存在，后来改成引用src的文件就正常了。
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。利用gulp实现css,js等静态文件自动刷新版本号 - 简书
利用gulp实现css,js等静态文件自动刷新版本号
随着移动端的h5项目不断流行起来，特别是微信中的二次开发。但是令我们特别头疼的是在调试的时候，将项目更新内容上传到服务器之后，很多静态文件在移动端并不能被刷新，而是采用缓存，这就极大影响了功能更新以及用户体验。所以，对这些静态文件进行每次版本标注就显得很有必要了。
所以，进入正题：rt,本文主要是实现给web工程中所有的静态文件添加版本号，可以实现保存即自动更新版本。
,windows下载是一个msi的安装文件，安装之后带有npm模块。Mac建议下载pkg包，也是直接安装的，安装之后同样带有node环境和npm模块。
终端或cmd运行
出现版本号即表示安装成功。
利用npm安装。
$ npm install --global gulp
$ npm install --save-dev gulp
命令的意思是全局安装。然而一般这样安装好了之后还会出现问题，就是找不到gulp命令，需要配置一下环境，贴一篇博文自行配制一下。
同样，执行命令
出现版本信息即可以使用了。
安装gulp插件
建议在项目目录下安装（不安装全局），即喝gulpfile.js同级目录下运行命令。
npm install gulp-connect
npm install run-sequence
npm install gulp-rev
npm install gulp-rev-collector
npm install gulp-util
应该就是这些，如果不够会有提示找不到命令，按照提示安装相应的插件即可～
项目结构图
项目结构图
node_modules里面即是安装的gulp的插件。
对gulpfile.js进行编写
//引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定义css、js源文件路径
var cssSrc = 'webapp/**/*.css',
jsSrc = 'webapp/**/*.js';
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src(jsSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
//Jsp替换css、js文件版本
gulp.task('revJsp', function () {
return gulp.src(['rev/**/*.json', 'webapp/**/*.jsp'])
.pipe(revCollector())
.pipe(gulp.dest('webapp'));
//task合并顺序执行
gulp.task('dev', function (done) {
condition =
runSequence(
['revCss'],
['revJs'],
['revJsp'],
//改变相应文件之后自动进行更新版本号
gulp.task('watch', function () {
gulp.watch([
'webapp/**/*.jsp'
], ['dev']);
gulp.task('default', ['watch']);
修改相关插件
更改gulp-rev和gulp-rev-collector
打开node_modules\gulp-rev\index.js第144行
manifest[originalFile] = revisionedF
更新为: manifest[originalFile] = originalFile + '?v=' + file.revH
打开nodemodules\gulp-rev\nodemodules\rev-path\index.js
10行 return filename + '-' + hash +
更新为: return filename +
打开node_modules\gulp-rev-collector\index.js
31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==
path.basename(key) ) {
更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
//每次覆盖版本信息
打开node_modules\gulp-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
更新为: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),
在此文件目录下运行
即可执行default task，即修改webapp下的静态文件之后被修改文件的版本号会得到更新，如果是第一次运行可以先运行一次 gulp dev将所有静态文件加上版本号。
目前就职于杭州 ，欢迎技术交流。
在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐，当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里，使用 HTML...
前言 本文默认你已经安装好node环境，并且熟悉node命令，和window cd命令。 gulp简介 基于nodejs流的自动化构建工具，可以快速构建项目并减少频繁的I/0操作。你可以利用gulp插件完成各种自动化任务：测试、检查、合并、压缩、格式化、浏览器自动刷新、部署...
gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，...
原文标题：Gulp for Beginners作者： Zell Liew翻译：治电小白菜原文地址：https://css-tricks.com/gulp-for-beginners/原文代码：https://github.com/zellwk/gulp-starter-cs...
遇到的问题 服务器端静态资源更新，客户端有缓存，未能获取到最新的静态资源，导致前端效果未达到预期。 期望 服务器端静态资源更新后，客户端访问时能够获取到最新的静态资源。客户端尽量发送少的请求，服务器端未发生变化时，客户端依然读取本地缓存。尽量少的人工操作。 解决方案 借助基...
一、安装hadoop集群，这里准备两台hadoop服务器，hd01，hd02 二、安装MySQL数据库 三、下载hive安装包2.1.1 http://mirrors.tuna.tsinghua.edu.cn/apache/hive/hive-2.1.1/apache-hi...
男人看了会撩妹 女人看了防渣男 如何打造一个完美的吻？性学专家Vanessa del Rae现身说法！ 什么会干扰接吻？ 调查结果显示，第一位的是口臭(94％) ，其次是接吻双方嘴的大小差得太多(75％) 。扎人的胡须(72％)和干裂粗糙的嘴唇(46％)也上榜了。亲爱的眼镜...
人只有在不再年轻的时候才能明白年轻真好。只有失去一些东西的时候才知道有多重要。但是为时以晚，你永远无法挽回那些逝去的日子。有时候真希望可以有其他次元的世界，让那个次元的我没有遗憾，可以去弥补我上一秒做的错误决定。 现在看着那些青春尚在的孩子总有羡慕，即使我也只有二十一二岁，...
翻看大家的周作业，目前票数最高的是辉飞，我也选择她，不是跟风而是她的文章主题明确，内容能引起共鸣，当然还有图文并貌。 《亲爱的，别以自己的标准来衡量世界》这篇文章给我的印象较深刻，因为自己也有过同样的经历，不要用自己的道德标准去评判一切，尊重与包容是一生的必修课。
凉风细 青叶地 草色近看 遥见天如碧 晴空谁更堆云雪 送目天际 欲上却无翼 心暗旷 神正怡 我自销魂 洋洋消百虑 乐也忧也皆百年 良辰美景 岂可不快意1、通常使用ajax访问url添加
JS，ajax请求地址后加随机参数，比如XXXX?t= + new Date().getTime()。
或者 在url后面加一个随机数。
前端开发静态文件自动添加版本号解决方案
源代码下载地址http://www.zuidaima.com/share/7248.htm...
css和js带参数（形如.css?v=与.js?v= 或 .css?version=与.js?version= ）
使用参数有两种可能：
第一、脚本并不存在，而是服务端动态生成的，因此带...
前端开发中不可避免的会遇到缓存问题，那么如何使给这些静态自动给添加版本号使修改后的内容立即生效呢？下面讲下我找到的两种方法:
一、通过获取文件最后修改时间
原理：通过服务器端语言读取文件最...
昨天去winy那里咨询他网站里css和js后面版本号的问题，我之所以想加这个功能是因为每次在A电脑修改的样式或者js到了B电脑上就看不到效果，还得ctrl+f5才能看到，我承认我缓存了网站的样式和js...
使用参数有两种可能用途：
-- 脚本并不存在， 而是服务端提供的， 带上版本号， 以示区别。...
首先，介绍几个常用的 HTTP 响应的状态码：
200 - 服务器已成功处理了请求，并返回所请求的内容。
304 - 自从上次请求后，请求的内容未修改过，浏览器直接从本地缓存中取得，服务器则不会返...
近日遇到有客户反应，页面打开显示不正常，不能完全的显示出页面。细问之下才得知，原来是有一个js文件修改了一个方法，但是上线后由于浏览器缓存的原因，还是加载的旧js文件，导致页面显示不正常了。给客户解释...
?v= 版本号 详解" title="引入css或js文件后面加参数 ?v= 版本号 详解">
使用参数有两种可能，
第一、脚本并不存在，而是服务端动态生成...
修改js和css文件
通过对js,css文件内容进行hash运算，生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)
替换html中的js,css文件名...
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)gulp自动化压缩合并、加版本号解决方案10 months ago在html中，我们需要先定义好构建块。&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&gulp自动化构建解决方案&/title&
&!-- build:css static/css/index.css --&
// 定义了构建后引用的css路径
&link rel="stylesheet" href="static/css/common.css"/&
&link rel="stylesheet" href="static/css/index.css"/&
&!-- endbuild --&
&!-- build:js static/js/index.js --&
// 定义了构建后引用的js路径
&script src="static/js/jquery.js"&&/script&
&script src="static/js/common.js"&&/script&
&script src="static/js/index.js"&&/script&
&!-- endbuild --&
执行构建完成后，会生成 dist 文件夹，目录为：|-dist
|-index.96cf44da.css
|-index.42ce3282.js
|-index.html
构建完的index.html，我们忽略压缩的html，完成了压缩合并添加版本号等功能。// dist/index.html
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&gulp自动化构建解决方案&/title&
&link rel="stylesheet" href="static/css/index.96cf44da.css"/&
&script src="static/js/index.42ce3282.js"&&/script&
更多文章可以访问我的博客：赞赏还没有人赞赏，快来当第一个赞赏的人吧！11收藏分享举报文章被以下专栏收录文章首发于：http://blog.gdfengshuo.com高效的中文IT技术平台{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&文章首发于：http:\u002F\u002Fblog.gdfengshuo.com&,&urlToken&:&linshuai&,&id&:28689,&imagePath&:&v2-04337acc7d612c5aa9382.jpg&,&slug&:&linshuai&,&applyReason&:&0&,&name&:&爱前端&,&title&:&爱前端&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Flinshuai&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:927,&avatar&:{&id&:&v2-04337acc7d612c5aa9382&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-04337acc7d612c5aa9382_l.jpg&,&articlesCount&:21},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-e2ad696965bdba054be43c_r.jpg&,&lastUpdated&:,&imagePath&:&v2-e2ad696965bdba054be43c.png&,&permission&:&ARTICLE_PUBLIC&,&topics&:[21,11152],&summary&:&虽然网上有很多的 gulp 构建文章，但是很多都已经随着 gulp 插件的更新无法运行了。因此，我写了这个比较简单的构建方案。如果还不熟悉 gulp 的插件，可以阅读上一篇文章：\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003E精通gulp常用插件\u003C\u002Fa\u003E 这个方案主要是为了实现js\u002Fcss的压缩合并、自动添加版本号和压缩h…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T10:11:28+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2457611,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&gulp自动化压缩合并、加版本号解决方案&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:28689,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-e2ad696965bdba054be43c_r.jpg&,&author&:{&bio&:&博客：http:\u002F\u002Fblog.gdfengshuo.com&,&isFollowing&:false,&hash&:&1203fdef524d5b57f4c1dc3e722a5fd1&,&uid&:314200,&isOrg&:false,&slug&:&linshuai-15&,&isFollowed&:false,&description&:&专注前端开发，总结经验，分享在我的博客。&,&name&:&林鑫&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Flinshuai-15&,&avatar&:{&id&:&v2-85afdb0cfd554fe&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:573459},{&sourceColumn&:{&lastUpdated&:,&description&:&一个专注互联网相关技术的专栏&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&高效的中文IT技术平台&,&urlToken&:&dreawer&,&id&:21254,&imagePath&:&v2-def9c21d9ca33ad157f4208.jpg&,&slug&:&dreawer&,&applyReason&:&0&,&name&:&极乐科技&,&title&:&极乐科技&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fdreawer&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:26821,&avatar&:{&id&:&v2-def9c21d9ca33ad157f4208&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-def9c21d9ca33ad157f4208_l.jpg&,&articlesCount&:698},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-e2ad696965bdba054be43c_r.jpg&,&lastUpdated&:,&imagePath&:&v2-e2ad696965bdba054be43c.png&,&permission&:&ARTICLE_PUBLIC&,&topics&:[21,11152],&summary&:&虽然网上有很多的 gulp 构建文章，但是很多都已经随着 gulp 插件的更新无法运行了。因此，我写了这个比较简单的构建方案。如果还不熟悉 gulp 的插件，可以阅读上一篇文章：\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003E精通gulp常用插件\u003C\u002Fa\u003E 这个方案主要是为了实现js\u002Fcss的压缩合并、自动添加版本号和压缩h…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T10:11:28+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2457611,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&gulp自动化压缩合并、加版本号解决方案&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:28689,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-e2ad696965bdba054be43c_r.jpg&,&author&:{&bio&:&博客：http:\u002F\u002Fblog.gdfengshuo.com&,&isFollowing&:false,&hash&:&1203fdef524d5b57f4c1dc3e722a5fd1&,&uid&:314200,&isOrg&:false,&slug&:&linshuai-15&,&isFollowed&:false,&description&:&专注前端开发，总结经验，分享在我的博客。&,&name&:&林鑫&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Flinshuai-15&,&avatar&:{&id&:&v2-85afdb0cfd554fe&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:573522}],&title&:&gulp自动化压缩合并、加版本号解决方案&,&author&:&linshuai-15&,&content&:&\u003Cp\u003E虽然网上有很多的 gulp 构建文章，但是很多都已经随着 gulp 插件的更新无法运行了。因此，我写了这个比较简单的构建方案。\u003C\u002Fp\u003E\u003Cp\u003E如果还不熟悉 gulp 的插件，可以阅读上一篇文章：\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003E精通gulp常用插件\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这个方案主要是为了实现js\u002Fcss的压缩合并、自动添加版本号和压缩html。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003Egulp-csso
压缩优化css\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003Egulp-uglify
压缩js\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003Egulp-html-minify
压缩html\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003Egulp-rev-all
生成版本号\u003Cbr\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E主要通过上面插件实现功能，其他插件配合使用。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&c1\&\u003E\u002F\u002F gulpfile.js\u003C\u002Fspan\u003E\n\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Egulp\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Erequire\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'gulp'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E),\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ehtmlmini\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Erequire\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'gulp-html-minify'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E),\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Euseref\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Erequire\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'gulp-useref'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E),\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Euglify\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Erequire\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'gulp-uglify'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E),\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ecsso\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Erequire\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'gulp-csso'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E),\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Efilter\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Erequire\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'gulp-filter'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E),\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003ERevAll\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Erequire\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'gulp-rev-all'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E),\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Edel\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Erequire\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'del'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&nx\&\u003Egulp\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etask\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'default'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,[\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'del'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E],\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EjsFilter\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efilter\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'**\u002F*.js'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Erestore\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&kc\&\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}),\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EcssFilter\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efilter\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'**\u002F*.css'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Erestore\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&kc\&\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}),\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EhtmlFilter\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efilter\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E([\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'**\u002F*.html'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E],{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Erestore\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&kc\&\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Egulp\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Esrc\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'\u002F*.html'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epipe\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Euseref\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E())\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 解析html中的构建块\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epipe\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EjsFilter\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 过滤所有js\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epipe\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Euglify\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E())\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 压缩js\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epipe\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EjsFilter\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Erestore\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epipe\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EcssFilter\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 过滤所有css\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epipe\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ecsso\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E())\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 压缩优化css\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epipe\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EcssFilter\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Erestore\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epipe\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003ERevAll\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Erevision\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 生成版本号\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EdontRenameFile\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'.html'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E],\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 不给 html 文件添加版本号\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EdontUpdateReference\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'.html'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 不给文件里链接的html加版本号\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}))\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epipe\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EhtmlFilter\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 过滤所有html\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epipe\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ehtmlmini\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E())\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 压缩html\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epipe\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EhtmlFilter\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Erestore\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epipe\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Egulp\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Edest\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'\u002Fdist'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E))\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E})\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&nx\&\u003Egulp\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etask\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'del'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Edel\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'\u002Fdist'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 构建前先删除dist文件里的旧版本\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E})\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E在html中，我们需要先定义好构建块。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&cp\&\u003E&!DOCTYPE html&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ehtml\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Elang\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&en\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ehead\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Emeta\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Echarset\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&UTF-8\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etitle\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003Egulp自动化构建解决方案\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etitle\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!-- build:css static\u002Fcss\u002Findex.css --&\u003C\u002Fspan\u003E
\u002F\u002F 定义了构建后引用的css路径\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Elink\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Erel\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&stylesheet\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ehref\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&static\u002Fcss\u002Fcommon.css\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E\u002F&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Elink\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Erel\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&stylesheet\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ehref\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&static\u002Fcss\u002Findex.css\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E\u002F&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!-- endbuild --&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ehead\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ebody\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!-- build:js static\u002Fjs\u002Findex.js --&\u003C\u002Fspan\u003E
\u002F\u002F 定义了构建后引用的js路径\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Esrc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&static\u002Fjs\u002Fjquery.js\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Esrc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&static\u002Fjs\u002Fcommon.js\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Esrc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&static\u002Fjs\u002Findex.js\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!-- endbuild --&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ebody\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ehtml\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E执行构建完成后，会生成 dist 文件夹，目录为：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E|-dist\n|
|-static\n|
|-index.96cf44da.css\n|
|-index.42ce3282.js\n|
|-index.html\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003E构建完的index.html，我们忽略压缩的html，完成了压缩合并添加版本号等功能。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u002F\u002F dist\u002Findex.html\n\u003Cspan class=\&cp\&\u003E&!DOCTYPE html&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ehtml\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Elang\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&en\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ehead\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Emeta\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Echarset\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&UTF-8\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etitle\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003Egulp自动化构建解决方案\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etitle\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Elink\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Erel\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&stylesheet\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ehref\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&static\u002Fcss\u002Findex.96cf44da.css\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E\u002F&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ehead\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ebody\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
......\n\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Esrc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&static\u002Fjs\u002Findex.42ce3282.js\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ebody\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ehtml\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Ch3\u003E更多文章可以访问我的博客：\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Flin-xin\u002Fblog\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Elin-xin\u002Fblog\u003C\u002Fa\u003E\u003C\u002Fh3\u003E&,&updated&:new Date(&T02:11:28.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:1,&collapsedCount&:0,&likeCount&:11,&state&:&published&,&isLiked&:false,&slug&:&&,&lastestTipjarors&:[],&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-e2ad696965bdba054be43c_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&gulp&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发工具&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端性能优化&}],&adminClosedComment&:false,&titleImageSize&:{&width&:901,&height&:234},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&linshuai&,&name&:&爱前端&},&tipjarState&:&activated&,&tipjarTagLine&:&真诚赞赏，手留余香&,&sourceUrl&:&&,&pageCommentsCount&:1,&tipjarorCount&:0,&annotationAction&:[],&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T10:11:28+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&前端&,&isFollowing&:false,&hash&:&f97ce57b37db9&,&uid&:876500,&isOrg&:false,&slug&:&xu-ri-dong-sheng-5-21&,&isFollowed&:false,&description&:&&,&name&:&旭日东升&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fxu-ri-dong-sheng-5-21&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&前端开发工程师&,&isFollowing&:false,&hash&:&ab76e1cd6a3&,&uid&:355300,&isOrg&:false,&slug&:&huang-wei-jie-75&,&isFollowed&:false,&description&:&努力成就未来。&,&name&:&jacy huang&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fhuang-wei-jie-75&,&avatar&:{&id&:&9cdb19d44c4b536e263dceb&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&Web前端小菜鸟&,&isFollowing&:false,&hash&:&6aea826bdeacc&,&uid&:20,&isOrg&:false,&slug&:&yang-xin-87-63&,&isFollowed&:false,&description&:&世上无对错，皆是你主观认为而已&,&name&:&杨昕&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fyang-xin-87-63&,&avatar&:{&id&:&c4c90331f01eebeea7fa91&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:null,&isFollowing&:false,&hash&:&701f671ccb4d0b2a22bee6d&,&uid&:516900,&isOrg&:false,&slug&:&fang-xiao-dan-66&,&isFollowed&:false,&description&:&&,&name&:&方小蛋&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Ffang-xiao-dan-66&,&avatar&:{&id&:&f591b0e12c26eecb7235&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&努力ing...&,&isFollowing&:false,&hash&:&cc99f98cdc48eba012ff&,&uid&:877800,&isOrg&:false,&slug&:&kang-ming-90-24&,&isFollowed&:false,&description&:&前端小白一枚&,&name&:&亢铭&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fkang-ming-90-24&,&avatar&:{&id&:&v2-b8cfa313161eef85149ac&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&虽然网上有很多的 gulp 构建文章，但是很多都已经随着 gulp 插件的更新无法运行了。因此，我写了这个比较简单的构建方案。如果还不熟悉 gulp 的插件，可以阅读上一篇文章：\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003E精通gulp常用插件\u003C\u002Fa\u003E 这个方案主要是为了实现js\u002Fcss的压缩合并、自动添加版本号和压缩h…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic2.zhimg.com\u002F50\u002Fv2-f7841bffba55bd18b96b3_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&Vue.js&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&网站模板&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&ElementUI&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&博客：http:\u002F\u002Fblog.gdfengshuo.com&,&isFollowing&:false,&hash&:&1203fdef524d5b57f4c1dc3e722a5fd1&,&uid&:314200,&isOrg&:false,&slug&:&linshuai-15&,&isFollowed&:false,&description&:&专注前端开发，总结经验，分享在我的博客。&,&name&:&林鑫&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Flinshuai-15&,&avatar&:{&id&:&v2-85afdb0cfd554fe&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&content&:&\u003Cp\u003E基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。\u003C\u002Fp\u003E\u003Cblockquote\u003Egithub地址：\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Flin-xin\u002Fmanage-system\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Elin-xin\u002Fmanage-system\u003C\u002Fa\u003E\u003Cbr\u003Edemo地址：\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fblog.gdfengshuo.com\u002Fexample\u002Fwork\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Emanage-system\u003C\u002Fa\u003E\u003C\u002Fblockquote\u003E\u003Ch2\u003E前言\u003C\u002Fh2\u003E\u003Cp\u003E之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。\u003C\u002Fp\u003E\u003Cp\u003E该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。\u003C\u002Fp\u003E\u003Ch2\u003E功能\u003C\u002Fh2\u003E\u003Cul\u003E\u003Cli\u003E[x] Element UI\u003C\u002Fli\u003E\u003Cli\u003E[x] 登录\u002F注销\u003C\u002Fli\u003E\u003Cli\u003E[x] 表格\u003C\u002Fli\u003E\u003Cli\u003E[x] 表单\u003C\u002Fli\u003E\u003Cli\u003E[x] 图表\u003C\u002Fli\u003E\u003Cli\u003E[x] 富文本编辑器\u003C\u002Fli\u003E\u003Cli\u003E[x] markdown编辑器\u003C\u002Fli\u003E\u003Cli\u003E[x] 图片拖拽\u002F裁剪上传\u003C\u002Fli\u003E\u003Cli\u003E[x] 支持切换主题色\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E模板安装步骤\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit clone https:\u002F\u002Fgithub.com\u002Flin-xin\u002Fmanage-system.git
\u002F\u002F 把模板下载到本地\ncd manage-system
\u002F\u002F 进入模板目录\nnpm install
\u002F\u002F 安装项目依赖，等待安装完成之后\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E本地开发\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u002F\u002F 开启服务器，浏览器访问 http:\u002F\u002Flocalhost:8080\nnpm run dev\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E构建生产\u003C\u002Fh2\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u002F\u002F 执行构建命令，生成的dist文件夹放在服务器下即可访问\nnpm run build\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E组件使用说明与演示\u003C\u002Fh2\u003E\u003Ch2\u003Eelement-ui\u003C\u002Fh2\u003E\u003Cp\u003E一套基于vue.js2.0的桌面组件库。访问地址：\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Felement.eleme.io\u002F%23\u002Fzh-CN\u002Fcomponent\u002Flayout\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eelement\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Ch2\u003Evue-datasource\u003C\u002Fh2\u003E\u003Cp\u003E一个用于动态创建表格的vue.js服务端组件。访问地址：\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fcoderdiaz\u002Fvue-datasource\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Evue-datasource\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etemplate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Edatasource\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Elanguage\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&en\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003E:table-data\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&information.data\&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&na\&\u003E:columns\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&columns\&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&na\&\u003E:pagination\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&information.pagination\&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&na\&\u003E:actions\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&actions\&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&na\&\u003Ev-on:change\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&changePage\&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&na\&\u003Ev-on:searching\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&onSearch\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Edatasource\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etemplate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kr\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EDatasource\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'vue-datasource'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 导入quillEditor组件\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kr\&\u003Eexport\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Edefault\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Edata\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(){\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Einformation\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Epagination\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{...},\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 页码配置\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Edata\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[...]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ecolumns\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[...],\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 列名配置\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eactions\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[...]\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 功能配置\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ecomponents\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EDatasource\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 声明组件Datasource\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Emethods\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EchangePage\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Evalues\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{...},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EonSearch\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EsearchQuery\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{...}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003EVue-Quill-Editor\u003C\u002Fh2\u003E\u003Cp\u003E基于Quill、适用于Vue2的富文本编辑器。访问地址：\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fsurmon-china\u002Fvue-quill-editor\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Evue-quill-editor\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etemplate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Equill-editor\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eref\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&myTextEditor\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ev-model\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&content\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003E:config\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&editorOption\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Equill-editor\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etemplate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kr\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EquillEditor\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'vue-quill-editor'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 导入quillEditor组件\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kr\&\u003Eexport\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Edefault\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Edata\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(){\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Econtent\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E''\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 编辑器的内容\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EeditorOption\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 编辑器的配置\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F something config\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ecomponents\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EquillEditor\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 声明组件quillEditor\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003EVue-SimpleMDE\u003C\u002Fh2\u003E\u003Cp\u003EVue.js的Markdown Editor组件。访问地址：\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002FF-loat\u002Fvue-simplemde\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EVue-SimpleMDE\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etemplate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Emarkdown-editor\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ev-model\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&content\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003E:configs\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&configs\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eref\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&markdownEditor\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Emarkdown-editor\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etemplate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kr\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EmarkdownEditor\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'vue-simplemde'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 导入markdownEditor组件\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kr\&\u003Eexport\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Edefault\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Edata\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(){\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Econtent\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E''\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F markdown编辑器内容\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Econfigs\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F markdown编辑器配置参数\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Estatus\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kc\&\u003Efalse\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 禁用底部状态栏\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EinitialValue\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'Hello BBK'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 设置初始值\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003ErenderingConfig\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EcodeSyntaxHighlighting\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kc\&\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 开启代码高亮\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EhighlightingTheme\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'atom-one-light'\u003C\u002Fspan\u003E \u003Cspan class=\&c1\&\u003E\u002F\u002F 自定义代码高亮主题\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ecomponents\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EmarkdownEditor\u003C\u002Fspan\u003E
\u003Cspan class=\&c1\&\u003E\u002F\u002F 声明组件markdownEditor\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003EVue-Core-Image-Upload\u003C\u002Fh2\u003E\u003Cp\u003E一款轻量级的vue上传插件，支持裁剪。访问地址：\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002FVanthink-UED\u002Fvue-core-image-upload\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EVue-Core-Image-Upload\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etemplate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eimg\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003E:src\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&src\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E
\u002F\u002F 用于显示上传的图片\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Evue-core-image-upload\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003E:class\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&['pure-button','pure-button-primary','js-btn-crop']\&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&na\&\u003E:crop\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&true\&\u003C\u002Fspan\u003E
\u003Cspan class=\&err\&\u003E\