gulp自动部署

gulp版本

F:h5webpackstudy_webpackframework7>gulp --version
CLI version: 2.3.0
Local version: 4.0.2

gulp自动化

// const gulp = require('gulp');
// const less = require('gulp-less');
//
// gulp.task('build:less', function (cb) {
//     let err = null;
//
//     // gulp.src方法返回值是 node Stream 的一个实例
//     // node Stream文件流会有一个pipe方法，pipe方法返回值是 node Stream 的一个实例
//     // .pipe().pipe().pipe()链式调用
//     gulp.src('./src/mobile_ui.less')
//         .pipe(less())
//         .pipe(gulp.dest('./dist'));
//
//     cb(err);
// });

const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();
const connect = require('gulp-connect');
const pug = require('gulp-pug');
const data = require('gulp-data');
const open = require('open');
const del = require('del');

import pugData from './src/pug/data'

//删除dist下的所有文件
gulp.task('delete',function(cb){
    return del(['dist/*','!dist/images'],cb);
});

gulp.task('js', function (cb) {
    return gulp.src('./src/js/**/*.js')
        .pipe(plugins.concat('bundle.js')) // 合并操作
        .pipe(gulp.dest('./dist/res/js')) // 合并后输出到本地
        .pipe(plugins.uglify()) // 压缩操作
        .pipe(plugins.rename({suffix: '.min'})) // 重命名
        .pipe(gulp.dest('./dist/res/js'))
        .pipe(connect.reload()) // 实时刷新
        ;
});

gulp.task('less', function (cb) {
    return gulp.src('./src/less/**/*.less')
        .pipe(plugins.less())
        .pipe(gulp.dest('./dist/res/style'))
        .pipe(connect.reload()) // 实时刷新
        ;
});

gulp.task('css', function (cb) {
    return gulp.src('./src/css/**/*.css')
        .pipe(plugins.concat('bundle.css')) // 合并css
        .pipe(plugins.rename({suffix: '.min'})) // 重命名
        .pipe(plugins.cleanCss({compatibility: 'ie8'})) // 压缩兼容ie8
        .pipe(gulp.dest('./dist/res/css'))
        .pipe(connect.reload()) // 实时刷新
        ;
});

gulp.task('html', function (cb) {
    const options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    return gulp.src('./src/html/**/*.html')
        .pipe(plugins.htmlmin(options)) // 去除空白，压缩
        .pipe(gulp.dest('./dist/public/html'))
        .pipe(connect.reload()) // 实时刷新
        ;
});

gulp.task('pug', function (cb) {
    const options = {
        pretty: true
    };
    return gulp.src('./src/pug/**/*.pug')
        .pipe(data(pugData))
        // .pipe(data(function (file, handle) {
        //     console.log(file);
        //     return [{name:'dsadsa'}, {name:'jjjj'}];
        // }))
        .pipe(pug(options)) // 美化
        .pipe(gulp.dest('./dist/public/template'))
        .pipe(connect.reload()) // 实时刷新
        ;
});

gulp.task('watch', function () {
    // 确认监听的目标以及绑定相应任务
    gulp.watch('./src/js/**/*.js', gulp.series('js'));
    gulp.watch('./src/html/**/*.html', gulp.series('html'));
    gulp.watch('./src/less/**/*.less', gulp.series('less'));
    gulp.watch('./src/css/**/*.css', gulp.series('css'));
    gulp.watch('./src/pug/**/*.pug', gulp.series('pug'));
});

// 注册默认任务，如果需要让任务（task）按顺序执行，请使用 series() 方法
gulp.task('server', function () {
    // 配置服务器的选项
    connect.server({
        root: 'dist/',
        livereload: true, // 实时刷新
        port: 5500,
        // 本机localhost:9097是可以访问的，但局域网下的其他机器访问不了
        // 或host: '0.0.0.0'就可以实现局域网访问
        host: '::'
    });

    // open自动打开指定链接
    open('http://localhost:5500');
});

// 编译less->css
gulp.task('lessc', gulp.series('less', 'css'));

// 注册默认任务，
// 如果需要让任务（task）按顺序同步执行，请使用 series() 方法，会阻塞，存在不执行后续任务的可能
// 如果需要让任务（task）异步执行，请使用 parallel() 方法，不会阻塞，所有任务都会执行
gulp.task('default', gulp.parallel( 'server', 'watch', gulp.series('delete', gulp.parallel('js', gulp.series('less', 'css'), 'html', 'pug')) ));

替换，参考https://www.cnblogs.com/jiaoshou/p/12184941.html

const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();
const connect = require('gulp-connect');
const pug = require('gulp-pug');
const data = require('gulp-data');
const open = require('open');
const del = require('del');
var replace = require('gulp-replace');

//删除dist下的所有文件
gulp.task('delete',function(cb){
    return del(['dist/*','!dist/images'],cb);
});

gulp.task('replaceTask',function(){
    // const reg = /http://ybf-shopnew.oss-cn-beijing.aliyuncs.com/h5/js/fontSize.js?version=1.0/gi;

    // const regJs = /http://ybf-shopnew.oss-cn-beijing.aliyuncs.com/h5/js/(.+)"/gi;
    // const regCss = /http://ybf-shopnew.oss-cn-beijing.aliyuncs.com/h5/css/(.+)"/gi;

    const regDomain = 'http://ybf-shopnew.oss-cn-beijing.aliyuncs.com';
    const regDomain2 = 'https://imgybf.qqybf.com';
    const replaceDomain = 'http://ybf-shopnew.oss-cn-beijing.aliyuncs.com';
    const replaceDomain2 = 'https://imgybf.qqybf.com';

    const regJs = new RegExp(regDomain + '/h5/js/(.+).js(.*)"', 'gi');
    const regCss = new RegExp(regDomain + '/h5/css/(.+).css(.*)"', 'gi');

    const regJs2 = new RegExp(regDomain2 + '/h5/js/(.+).js(.*)"', 'gi');
    const regCss2 = new RegExp(regDomain2 + '/h5/css/(.+).css(.*)"', 'gi');

    const version = +(new Date);

    return gulp.src('html/**/*.html')
        // .pipe(replace(reg,'http://ybf-shopnew.oss-cn-beijing.aliyuncs.com/h5/js/fontSize.js?version='+(+new Date)))
        .pipe(replace(regJs, function(match, p1, p2, offset, string) {
            // See https://mdn.io/string.replace#Specifying_a_function_as_a_parameter
            // console.log('Found ' + match + ' with param ' + p1 + ' at ' + offset + ' inside of ' + string);
            // console.log(p1, p2);
            return `${replaceDomain2}/h5/js/${p1}.js?v=${version}"`;
        }))
        .pipe(replace(regCss, function(match, p1, p2, offset, string) {
            return `${replaceDomain2}/h5/css/${p1}.css?v=${version}"`;
        }))
        .pipe(replace(regJs2, function(match, p1, p2, offset, string) {
            return `${replaceDomain2}/h5/js/${p1}.js?v=${version}"`;
        }))
        .pipe(replace(regCss2, function(match, p1, p2, offset, string) {
            return `${replaceDomain2}/h5/css/${p1}.css?v=${version}"`;
        }))
        .pipe(gulp.dest('./dist'));
});

gulp.task('default', gulp.parallel( 'replaceTask'));