gulp增加版本号

gulp4.0自动化构建

前言：随便写了一下，这个项目很单纯，脚手架啥的一个没,只有用简单的多页面输出，自动化编译打包压缩混淆等一些列流程。

已完成功能

1. 公用foot和head引用
2. js（es6转es5）打包压缩混淆
3. css打包压缩混淆
4. 版本号增加

基本gulp4.02
因为是半路接手，随便处理的，gulp写法大部分还是3.0的写法。

配置：

gulpfile文件

const gulp = require('gulp');
const htmlImport = require('gulp-html-import'); //html引入
const rename = require('gulp-rename'); //替换路径
const uglify = require('gulp-uglify'); // 压缩js
const cleanCSS = require('gulp-clean-css'); // 压缩css
const imagemin = require('gulp-imagemin'); // 压缩图片
const htmlmin = require('gulp-htmlmin'); //压缩html
const autoprefixer = require('gulp-autoprefixer'); //css游览器兼容
const del = require("del"); //每次构建gulp之前，清除目标文件dist
const jshint = require("gulp-jshint"); //js检查
const rev = require('gulp-rev-dxb') //生成映射路径
const revCollector = require('gulp-rev-collector-dxb') //替换版本号路径插件
const babel = require('gulp-babel'); //ES6转ES5
const connect = require('gulp-connect'); //引入gulp-connect模块 浏览器刷新
/**
 * 编译html代码
 */

var srcs = {
    'html': ['./page/*.html', './page/**/*.html', ],
    "css": ['./page/css/*.css', './page/css/**/*.css'],
    "revjs": ['./page/js/*.*', './page/js/**/*.*', '!./page/js/layer/*.*', '!./page/js/layer/**/*.*', '!./page/js/map/*.*', '!./page/js/map/**/*.*', '!./page/js/common/*.*'],
    "js": ['./page/js/**/*.*', './page/js/**/**/*.*', '!./page/js/*.*', '!./page/js/echarts/*.*'],
    "fixed": ['./page/js/layer/*.*', './page/js/layer/**/*.*', './page/js/map/*.*', '!./page/js/map/**/*.*'],
    "img": ['./page/images/*.*', './page/images/**/*.*']
}


gulp.task('html', () => {
    var options = {
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeComments: true, //清除HTML注释
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true, //压缩js
        minifyCSS: true //压缩css
    };
    return gulp.src(srcs.html)
        .pipe(htmlImport('./page/components/'))
        .pipe(rename({
            dirname: ''
        }))
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/page'))
        .pipe(connect.reload());
});


gulp.task('jsbeing', function () {
    return gulp.src(srcs.js)
        .pipe(gulp.dest('dist/js'))
});

gulp.task('revJS', function () {
    return gulp.src(srcs.revjs)
        .pipe(jshint()) //检查代码
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(rev()) //js文件生成版本号,
        .pipe(gulp.dest('dist/js')) //将js文件输出到dist/js目录下
        .pipe(rev.manifest({
            path: "../JS.json",
            merge: true
        })) //并将所有带有版本号的文件放入json中
        .pipe(gulp.dest('dist/js'))
        .pipe(connect.reload());
});


gulp.task('cssbeing', function () {
    return gulp.src(srcs.css)
        .pipe(autoprefixer({
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ],
            grid: true
        }))
        // 2. 压缩文件
        .pipe(cleanCSS())
        .pipe(rev()) //将所有匹配到的文件名全部生成相应的版本号
        .pipe(gulp.dest('dist/css')) //将css文件输出到dist目录
        .pipe(rev.manifest({
            path: "../CSS.json",
            merge: true
        })) //并将所有带有版本号的文件放入json中
        // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/css'))
        .pipe(connect.reload());
});


// 图片异步处理
gulp.task('imgbeing', async function () {
    gulp.src(srcs.img)
        // .pipe(await imagemin())    //压缩图片，建议使用熊猫压缩
        .pipe(gulp.dest('dist/images'))
});

gulp.task('rev', function () {
    return gulp.src(['dist/*.json', 'dist/page/*.html'])
        .pipe(revCollector({
            replaceReved: true, //允许替换, 已经被替换过的文件
            dirReplacements: {
                'css': 'css',
                'js': 'js',
                'json': 'json'
            }
        }))
        .pipe(gulp.dest('dist/'))
});



gulp.task('clean:dist', function () {
    return del(['dist/**','!dist/distM/**'])
});


gulp.task('watchs', function () { //监听变化执行任务
    //当匹配任务变化才执行相应任务
    gulp.watch(srcs.html, gulp.series('html','rev'));
    gulp.watch(srcs.revjs, gulp.series('revJS'));
    gulp.watch(srcs.css, gulp.series('cssbeing'));
    gulp.watch(srcs.img, gulp.series('imgbeing'));
    connect.server({
        root: 'dist', //根目录
        port: 9898,
        livereload: true, //自动更新
    });
})




gulp.task('init', gulp.series('clean:dist', gulp.parallel('imgbeing', 'jsbeing', 'revJS', 'cssbeing', 'html')));

gulp.task('build', gulp.series("clean:dist",
    gulp.series('init',
        gulp.parallel('rev')
    )
));

gulp.task('serve', gulp.series('build', 'watchs'));

1.图片压缩在无框架情况下不建议放在task里面处理，建议先通过其他路径压缩。gulp-task不对图片做特殊处理
2.clean我用了一下感觉有坑，所以换成了del
3.版本号处理做了优化，亲测好用。
4.公用组件处理是之前的老方法，建议看看gulp-file-include
5.图片未使用版本号，不是很建议
6.bable配置可以更优化

package.json配置：

项目路径：

因为是已存在项目，所以有些处理怪怪的，建议取其精华，取其精华，去其糟粕