var gulp = require('gulp'),

    rev = require('gulp-rev-append'),

    fs = require('fs'),

    fse = require('fs-extra'),

    path = require('path'),

    util = require('util');

var htmlmin = require('gulp-htmlmin'); //压缩html

var uglify = require('gulp-uglify');  //获取uglify(用于压缩)

var filter = require('gulp-filter');

var minifycss = require('gulp-minify-css'); //压缩css

var webpack = require("webpack");

gulp.task('revHtml',function(){

    var options = {

        removeComments: true,//清除HTML注释

        collapseWhitespace: true,//压缩HTML

        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />

        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />

        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"

        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"

        minifyJS: true,//压缩页面JS

        //babel:true,

        minifyCSS: true//压缩页面CSS

    };

    return gulp.src('./web/*.html')

        .pipe(htmlmin(options))

        .pipe(gulp.dest('./dist'))

});

gulp.task('static', function() {

    fse.emptydirSync('./dist');

    // gulp.src('./web/*.html')

    //     .pipe(rev())

    //     .pipe(gulp.dest('./dist'));

    var map = {

        js: function(pipe) {

            pipe = pipe.pipe(filter("**/*.js"));

            pipe = pipe.pipe(uglify());

            return pipe;

        },

        css: function(pipe) {

            pipe = pipe.pipe(filter("**/*.css"));

            pipe = pipe.pipe(minifycss())

            return pipe;

        },

        png: function(pipe) {

            pipe = pipe.pipe(filter("**/*.png"));

            return pipe;

        },

        gif: function(pipe) {

            pipe = pipe.pipe(filter("**/*.gif"));

            return pipe;

        },

        jpg: function(pipe) {

            pipe = pipe.pipe(filter("**/*.jpg"));

            return pipe;

        },

        svg: function(pipe) {

            pipe = pipe.pipe(filter("**/*.svg"));

            return pipe;

        },

        ttf: function(pipe) {

            pipe = pipe.pipe(filter("**/*.ttf"));

            return pipe;

        },

        woff: function(pipe) {

            pipe = pipe.pipe(filter("**/*.woff"));

            return pipe;

        }

    }

    for(var item in map) {

        var pipe = gulp.src('./web/**');     //压缩的文件

        map[item](pipe).pipe(gulp.dest('./dist'));     //输出的文件夹

    }

});

gulp.task('staticwatch', function () {

    gulp.watch(['./web/**/*'],['static']);      //监听文件

})

gulp.task('default', function() {

    fse.emptydirSync('dist');

    gulp.start('revHtml');

    gulp.start('static');

    gulp.start('staticwatch');

});

var gulp = require('gulp');

var concat = require('gulp-concat');//合并

var uglify = require('gulp-uglify');//压缩js

var rev = require('gulp-rev');//为静态文件随机添加一串hash值, 解决cdn缓存问题

var revCollector = require('gulp-rev-collector');//替换路径

var htmlmin = require('gulp-htmlmin'); ////使用gulp-htmlmin压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作。

var del = require('del');//删除文件

//压缩js

//gulp.src('./js/*.js')               // * 匹配js文件夹下所有.js格式的文件

gulp.task('js',function(){

    return gulp.src('./js/*.js')

    .pipe(uglify())

    .pipe(rev())

    .pipe(gulp.dest('./build/js'))

    .pipe(rev.manifest('rev-js-manifest.json'))

    .pipe(gulp.dest('./build/js'));

});

//压缩css

var autoprefix = require('gulp-autoprefixer');//兼容处理

var minifyCss = require('gulp-minify-css');//压缩

gulp.task('style',function(){

    return gulp.src('./css/*.css')

        .pipe(autoprefix({

                browsers: ['last 2 versions'],

                cascade: false

            }))

        .pipe(minifyCss())

        .pipe(rev())

        .pipe(gulp.dest('./build/css'))

        .pipe(rev.manifest('rev-css-manifest.json'))

        .pipe(gulp.dest('./build/css'));

});

//img

gulp.task('images', function (){

    return gulp.src(['./images/*.jpg','./images/*.png','./images/*.gif'])

        .pipe(rev())//文件名加MD5后缀

        .pipe(gulp.dest('./build/images'))

        .pipe(rev.manifest('rev-images-manifest.json'))//生成一个rev-manifest.json

        .pipe(gulp.dest('./build/images'));//将 rev-manifest.json 保存到 rev 目录内

});

//html

gulp.task('revHtml',function(){

    var options = {

        removeComments: true,//清除HTML注释

        collapseWhitespace: true,//压缩HTML

        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />

        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />

        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"

        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"

        minifyJS: true,//压缩页面JS

        //babel:true,

        minifyCSS: true//压缩页面CSS

    };

    return gulp.src('./html/*.html')

        .pipe(htmlmin(options))

        .pipe(gulp.dest('./build/html'))

});

//使用rev替换成md5文件名，这里包括html和css的资源文件也一起

//gulp.src('./js/**/*.js')            // ** 匹配js文件夹的0个或多个子文件夹

//使用rev替换成md5文件名，这里包括html和css的资源文件也一起

gulp.task('rev', function() {

    //html，针对js,css,img

    return gulp.src(['./build/**/*.json', './build/html/*.html'])

        .pipe(revCollector({replaceReved:true }))

        .pipe(gulp.dest('./build/html'));

});

gulp.task('revimg', function() {

    //css，主要是针对img替换

    return gulp.src(['./build/**/rev-images-manifest.json', './build/css/*.css'])

        .pipe(revCollector({replaceReved:true }))

        .pipe(gulp.dest('./build/css'));

});

gulp.task('revjs', function() {

    //css，主要是针对img替换

    return gulp.src(['./build/**/rev-images-manifest.json', './build/js/*.js'])

        .pipe(revCollector({replaceReved:true }))

        .pipe(gulp.dest('./build/js'));

});

//删除Build文件

gulp.task('clean:Build', function () {

   return del([

        './build/**/',

    ]);

});

//执行多个任务gulp4的用法 gulp.series()串行，gulp.parallel()并行

gulp.task('default', gulp.series('clean:Build', gulp.parallel('js','images','style','revHtml'),'rev','revimg','revjs',function(){

}))