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.相关代码

源码下载

原文地址:https://www.cnblogs.com/linsu/p/10730447.html

时间: 2024-10-08 00:17:49

vue+Iview+gulp 生成文档说明的相关文章

doc2vec 利用gensim 生成文档向量

利用gensim 直接生成文档向量 def gen_d2v_corpus(self, lines): with open("./data/ques2_result.txt", "wb") as fw: for line in lines: fw.write(" ".join(jieba.lcut(line)) + "\n") sents = doc2vec.TaggedLineDocument("./data/que

phpdoctor 安装,配置,生成文档

window 下安装phpdoctor 1 安装php,设置环境变量path ,把php 的安装路径加上,比如php 安装在d:/php5/ 2下载phpdoctor,可以去官网下载 http://peej.github.com/phpdoctor/,把下载的压缩包解压到任何地方 3配置phpdoctor,phpdoctor 最基本的配置 //源码路径,比如您的源码路径d:work/phptest,如下设置 source_path=“d:work/phptest” //生成的html 文档保存路

利用 Gitbook 生成文档中心站点

利用 Gitbook 生成文档中心站点 经过一个多月,Bugtags 最近上线了自己的文档站点(docs.bugtags.com),在这里你可以找到 Bugtags 集成.使用相关的绝大部分问题. 在这之前我们使用的是第三方提供的帮助中心产品服务,在他们网站后台上面编辑文档内容,建立自己的文档体系的:但是用久了发现还是用很多不爽的地方,起码是不符合我们的习惯: 比如:该产品文档是使用富文本形式编辑和存储在数据库的:而我们自己都非常喜欢于用 Markdown 格式编写文档:而数据库保存也注定无法使

PhpDocumentor 生成文档

最近项目需要phpdoc生成文档,首先安装PhpDocumentor,利用pear安装: 切换用户: su root 安装PhpDocumentor: pear install PhpDocumentor 生成文档: Phpdoc –h 会得到一个phpDocumentor的详细参数列表.先看看最重要的几个吧. -d 这个目录代表着需要生成文档的原始php文件目录(注意是目录) -t 这个目录代表着生成的文档存放目录 -o 这个参数代表着生成的文档格式,例如html格式,参数就是 phpdoc

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

github:https://github.com/domaindrivendev/Ahoy 之前文章有介绍在ASP.NET WebAPI 中使用Swagger生成文档,ASP.NET Core 1.0中同样也支持. 依赖包 "dependencies": { "Swashbuckle.SwaggerGen": "6.0.0-rc1-final", "Swashbuckle.SwaggerUi": "6.0.0-rc

多模块Maven项目如何使用javadoc插件生成文档

需求 最近要对一个项目结构如下的Maven项目生成JavaDoc文档. Project |-- pom.xml |-- Module1 |   `-- pom.xml |-- Module2 |   `-- pom.xml |-- Module3 |-- pom.xml 这个就需要用到本文将要提出的一个Maven插件:javadoc. 基本使用 插件的基本配置很简单: <plugin> <groupId>org.apache.maven.plugins</groupId>

使用eclipse生成文档(javadoc)主要有三种方法:

使用eclipse生成文档(javadoc)主要有三种方法: 1,在项目列表中按右键,选择Export(导出),然后在Export(导出)对话框中选择java下的javadoc,提交到下一步. 在Javadoc Generation对话框中有两个地方要注意的: javadoc command:应该选择jdk的bin/javadoc.exe destination:为生成文档的保存路径,可自由选择. 按finish(完成)提交即可开始生成文档. 2,用菜单选择:File->Export(文件->

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

配置WCF同时支持WSDL和REST,SwaggerWCF生成文档 VS创建一个WCF工程,通过NuGet添加SwaggerWcf 创建完成后通过 程序包管理控制台 pm>Install-Package SwaggerWcf 也可在 工具 -> NuGet包管理器 -> 管理解决方案的NuGet程序包 安装. 配置 首先对项目添加Global.asax文件,改动如下: protected void Application_Start(object sender, EventArgs e)

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

对于开发人员来说,构建一个消费应用程序时去了解各种各样的 API 是一个巨大的挑战.在你的 Web API 项目中使用 Swagger 的 .NET Core 封装 Swashbuckle 可以帮助你创建良好的文档和帮助页面. Swashbuckle 可以通过修改 Startup.cs 作为一组 NuGet 包方便的加入项目.Swashbuckle 是一个开源项目,为使用 ASP.NET Core MVC 构建的 Web APIs 生成 Swagger 文档.Swagger 是一个机器可读的 R