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 生成文档说明的更多相关文章

  1. 使用 Swagger 自动生成 ASP.NET Core Web API 的文档、在线帮助测试文档(ASP.NET Core Web API 自动生成文档)

    对于开发人员来说,构建一个消费应用程序时去了解各种各样的 API 是一个巨大的挑战.在你的 Web API 项目中使用 Swagger 的 .NET Core 封装 Swashbuckle 可以帮助你 ...

  2. 使用Ldoc给Lua生成文档

    Ldoc介绍 LDoc是一个Lua的文档生成工具,过去,比较常用的Lua生成文档的工具是LuaDoc,可惜作者自从2008年之后就再也没有发布过新的版本了,说明作者基本上已经放弃维护了.而LDoc则是 ...

  3. 使用PhpDocumentor生成文档

    一,网站根目录执行 $ composer require --dev phpdocumentor/phpdocumentor 二,进入vendor/bin/目录执行 $phpdoc -d D:\ser ...

  4. doxygen的使用(一)配置并生成文档

    原创文章,欢迎阅读,禁止转载. doxygen是个好用的文档生成工具,他的强大功能有很多介绍,我就不说了.自带的chm帮助手册很全面,包括功能.注释规范.怎么配置.工具用法等.doxygen的用法共3 ...

  5. 配置WCF同时支持WSDL和REST,swaggerwcf生成文档

    配置WCF同时支持WSDL和REST,SwaggerWCF生成文档 VS创建一个WCF工程,通过NuGet添加SwaggerWcf 创建完成后通过 程序包管理控制台 pm>Install-Pac ...

  6. ASP.NET Core 1.0 中使用 Swagger 生成文档

    github:https://github.com/domaindrivendev/Ahoy 之前文章有介绍在ASP.NET WebAPI 中使用Swagger生成文档,ASP.NET Core 1. ...

  7. 为Unity项目生成文档(二)

    Unity项目生成文档 接着上篇文章:为Unity项目生成文档(一) .Net项目可在VS配置XML 我们可以在VS中通过配置来生成xml文件,但是unity的project,就算同样配置了xml文档 ...

  8. doc2vec 利用gensim 生成文档向量

    利用gensim 直接生成文档向量 def gen_d2v_corpus(self, lines): with open("./data/ques2_result.txt", &q ...

  9. 使用eclipse生成文档(javadoc)

    使用eclipse生成文档(javadoc)主要有三种方法:1,在项目列表中按右键,选择Export(导出),然后在Export(导出)对话框中选择java下的javadoc,提交到下一步.在Java ...

随机推荐

  1. react-router踩坑

    1.当用BrowserRouter时,<Link/>组件必须放在BrowserRouter里,如果是存在于某个组件里的Link,则该组件也必须放在Router里,不然会出现url改变页面为 ...

  2. Laravel Class 'Doctrine\DBAL\Driver\PDOMySql\Driver' not found

    Laravel: 5.5.* 在迁移中有重命名操作的时候,运行 php artisan migrate 会提示 Class 'Doctrine\DBAL\Driver\PDOMySql\Driver' ...

  3. ThreadLocal知识点

    ThreadLocal是什么 ThreadLocal 表面上看他是和多线程,线程同步有关的一个工具类,但其实他与线程同步机制无关.线程同步机制是多个线程共享同一个变量,而ThreadLocal是为每个 ...

  4. 自行制作yum源仓库

    背景 客户服务器为内网机器,centos7系统,且无法与外网连接.需要部署对应的LANMP环境及其它软件 解决思路 1.在阿里云服务器,利用阿里云的yum源仓库,下载对应软件及关联软件. 2.在客户机 ...

  5. PHP ftp_site() 函数

    定义和用法 The ftp_site() 函数向 FTP 服务器发送 SITE 命令. SITE 命令没有标准化,在不同的服务器上不尽相同.对于处理文件权限或组关系方面的事情,SITE 命令很有用. ...

  6. Java中获取前一天和后一天时间

    今天在开发项目的时候遇到一个问题就是怎么获取当前时间的前一天和后一天,这个实现的逻辑并不复杂,自己要写的话的也不是难事,但是貌似感觉没必要自己写这样的方法,想想Java中的Calendar类应该有这样 ...

  7. plugin python was not installed: Cannot download ''

    problem: plugin python was not installed: Cannot download ''........ 1. the first method of resoluti ...

  8. 2019 牛客多校第一场 D Parity of Tuples

    题目链接:https://ac.nowcoder.com/acm/contest/881/D 看此博客之前请先参阅吕凯飞的论文<集合幂级数的性质与应用及其快速算法>,论文中很多符号会被本文 ...

  9. PAT_A1053#Path of Equal Weight

    Source: PAT A1053 Path of Equal Weight (30 分) Description: Given a non-empty tree with root R, and w ...

  10. PAT_A1099#Build A Binary Search Tree

    Source: PAT A1099 Build A Binary Search Tree (30 分) Description: A Binary Search Tree (BST) is recur ...