vue+Iview+gulp 生成文檔說明

時間 2019-12-13

標籤 vue+iview+gulp vue iview gulp 生成文檔說明欄目 JavaScript 简体版

原文原文鏈接

　1.安裝npm gulp相關插件好比：gulp、gulp-concat、gulp-htmlmin、gulp-cssmin、gulp-cheerio、gulp-cleanjavascript

2. 編寫gulpfile.jscss

//獲取 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();
}));