vue+Iview+gulp 生成文档说明
1.安装npm gulp相关插件 比如:gulp、gulp-concat、gulp-htmlmin、gulp-cssmin、gulp-cheerio、gulp-clean
2. 编写gulpfile.js
//获取 gulp
var gulp = require('gulp');
//压缩 JS
var uglify = require('gulp-uglify');
//合并文件
var concat = require('gulp-concat');
//压缩html
var htmlmin = require('gulp-htmlmin');
//压缩css
var cssmin = require('gulp-cssmin');
//合并文件到html
var cheerio = require('gulp-cheerio'); var domSrc = require('gulp-dom-src');
//清空文件夹
var clean = require('gulp-clean');
//混淆js
var javascriptObfuscator =require('gulp-javascript-obfuscator') gulp.task('clean',function(){
return gulp.src('./dist',{read:false})
.pipe(clean());
});
//压缩 js 文件
gulp.task('jscompress', function() {
return gulp.src(['src/js/*.js','!src/js/**/{iview.min,vue.min,zh-cn.min}.js'])
.pipe(javascriptObfuscator(
//{compact:true,
//sourceMap: true}
))
// .pipe(uglify({
// mangle: {reserved:['require' ,'exports' ,'module' ,'$']},//类型:Boolean 默认:true 是否修改变量名
// compress: true //类型:Boolean 默认:true 是否完全压缩
// }))
.pipe(concat('index.min.js'))//输入到index.min.js中
.pipe(gulp.dest('dist/js'));
}); //压缩 css 文件
gulp.task('csscompress', function() {
return gulp.src(['src/css/*.css','!src/css/*/{iview.min}.css'])
.pipe(cssmin({
advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
//compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]
keepBreaks: false,//类型:Boolean 默认:false [是否保留换行]
keepSpecialComments: '*'
//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
}))
.pipe(concat('index.min.css'))//输入到index.min.css
.pipe(gulp.dest('dist/css'));
});
//压缩html
gulp.task('thtml',function(done){
var options = {
collapseWhitespace:true,
collapseBooleanAttributes:true,
removeComments:true,
removeEmptyAttributes:true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true,
minifyJS:true,
minifyCSS:true
};
gulp.src('src/index.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/'));
done();
}); //替换html页面引用
gulp.task('replaceindex', function() {
return gulp.src('dist/index.html')
.pipe(cheerio(function ($) {
$('script').remove();
$('link').remove();
$('body').append('<script src="/js/vue.min.js"></script>');
$('head').append('<link rel="stylesheet" href="/css/iview.min.css">');
$('body').append('<script src="/js/iview.min.js"></script>');
$('head').append('<link rel="stylesheet" href="/css/index.min.css">');
$('body').append('<script src="/js/index.min.js"></script>'); }))
.pipe(gulp.dest('dist/'));
});
//copy 不需要的压缩文件
gulp.task('copy',function(done){
gulp.src('src/js/*.min.js')
.pipe(gulp.dest('dist/js'));
gulp.src('src/css/*.min.css')
.pipe(gulp.dest('dist/css'));
done();
}); gulp.task('build',gulp.series(gulp.parallel('jscompress','csscompress','thtml','copy'),'replaceindex',function(done){
done();
}));
3.执行gulp build 命令
4.预览页面 (通过IIS访问) http://192.168.1.106:8017/index.html
5.相关代码
vue+Iview+gulp 生成文档说明的更多相关文章
- 使用 Swagger 自动生成 ASP.NET Core Web API 的文档、在线帮助测试文档(ASP.NET Core Web API 自动生成文档)
对于开发人员来说,构建一个消费应用程序时去了解各种各样的 API 是一个巨大的挑战.在你的 Web API 项目中使用 Swagger 的 .NET Core 封装 Swashbuckle 可以帮助你 ...
- 使用Ldoc给Lua生成文档
Ldoc介绍 LDoc是一个Lua的文档生成工具,过去,比较常用的Lua生成文档的工具是LuaDoc,可惜作者自从2008年之后就再也没有发布过新的版本了,说明作者基本上已经放弃维护了.而LDoc则是 ...
- 使用PhpDocumentor生成文档
一,网站根目录执行 $ composer require --dev phpdocumentor/phpdocumentor 二,进入vendor/bin/目录执行 $phpdoc -d D:\ser ...
- doxygen的使用(一)配置并生成文档
原创文章,欢迎阅读,禁止转载. doxygen是个好用的文档生成工具,他的强大功能有很多介绍,我就不说了.自带的chm帮助手册很全面,包括功能.注释规范.怎么配置.工具用法等.doxygen的用法共3 ...
- 配置WCF同时支持WSDL和REST,swaggerwcf生成文档
配置WCF同时支持WSDL和REST,SwaggerWCF生成文档 VS创建一个WCF工程,通过NuGet添加SwaggerWcf 创建完成后通过 程序包管理控制台 pm>Install-Pac ...
- ASP.NET Core 1.0 中使用 Swagger 生成文档
github:https://github.com/domaindrivendev/Ahoy 之前文章有介绍在ASP.NET WebAPI 中使用Swagger生成文档,ASP.NET Core 1. ...
- 为Unity项目生成文档(二)
Unity项目生成文档 接着上篇文章:为Unity项目生成文档(一) .Net项目可在VS配置XML 我们可以在VS中通过配置来生成xml文件,但是unity的project,就算同样配置了xml文档 ...
- doc2vec 利用gensim 生成文档向量
利用gensim 直接生成文档向量 def gen_d2v_corpus(self, lines): with open("./data/ques2_result.txt", &q ...
- 使用eclipse生成文档(javadoc)
使用eclipse生成文档(javadoc)主要有三种方法:1,在项目列表中按右键,选择Export(导出),然后在Export(导出)对话框中选择java下的javadoc,提交到下一步.在Java ...
随机推荐
- redis List相关命令
- 使用自己的Python函数处理Protobuf中的字符串编码
我目前所在的项目是一个老项目,里面的字符串编码有点乱,数据库中有些是GB2312,有些是UTF8:代码中有些是GBK,有些是UTF8,代码中转来转去,经常是不太清楚当前这个字符串是什么编码,由于是老项 ...
- ConcurrenHashMap介绍1.8 中为什么要用红黑树
java8不是用红黑树来管理hashmap,而是在hash值相同的情况下(且重复数量大于8),用红黑树来管理数据. 红黑树相当于排序数据.可以自动的使用二分法进行定位.性能较高. 在Concurren ...
- mui框架页面每次加载操作
最近在优化自己用mui开发的app,主要还是针对交互这块儿,这里简单给大家说一下问题点场景,就是我是通过动态添加底部tabBar的方法创建了一个底部可以切换的操作区域,代码如下: mui.init() ...
- c++ exit() 函数
函数用法 编辑 函数名: exit() 所在头文件:stdlib.h(如果是”VC6.0“的话头文件为:windows.h) 功 能: 关闭所有文件,终止正在执行的进程. exit(0)表示正常退出, ...
- vue-组件之间的通信:
组件之间的通信:一个组件被调用,那么里面的数据就需要从前者调用,因为在开发中组件时重复调用的,在页面中会反复使用,但是里面的数据是不一样的,谁调用这个组件谁就传递数据给这个组件,所以就要暴露一些接口, ...
- [转]gulp打包工具总结
与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级 ...
- (转)实现这两个接口ModelDriven<T>,Preparable有什么用?
转:http://www.cnblogs.com/guanghuiqq/archive/2012/08/24/2654300.html 实现了ModelDriven就必须实现getModel这个方法, ...
- P1613 跑路(倍增)
P1613 跑路(倍增) 题目描述 小A的工作不仅繁琐,更有苛刻的规定,要求小A每天早上在6:00之前到达公司,否则这个月工资清零.可是小A偏偏又有赖床的坏毛病.于是为了保住自己的工资,小A买了一个十 ...
- 开发中运行mysql脚本,发现提示mysql提示Column count doesn't match value count at row 1错误
开发中运行mysql脚本,发现提示mysql提示Column count doesn't match value count at row 1错误, 调试后发现是由于写的SQL语句里列的数目和后面的值 ...