huochairen-gulp-flow/lib/index.js

// const resData = require('./public/testData.js');
let { resolve } = require('path');
const { src, dest, parallel, series, watch } = require('gulp');

const gulpLoadPlugins = require('gulp-load-plugins'); //
//gulp-sass scss转换为css
//gulp-clean-css css压缩
//gulp-babel js编译
//gulp-uglify js压缩
//gulp-rename 取别名
//gulp-swig html 模板替换
//gulp-imagemin 图片压缩
const del = require('del'); //del 删除文件
const browserSync = require('browser-sync');

const bs = browserSync.create();
const gulpLoad = gulpLoadPlugins();

let cwdPath = process.cwd();
let dataConfig = resolve(cwdPath, 'paga-config.js');
let resData = {
    //默认配置
    pathConfig: {
        src: 'src',
        serverPac: 'serverPac',
        dist: 'dist',
        public: 'public',

        path: {
            style: '/**/*.scss',
            script: '/**/*.js',
            page: '/**/*.html',
            images: '/**/images/*',
            fonts: '/**/fonts/*',
        },
    },
};
try {
    let newResData = require(dataConfig);
    resData = Object.assign({}, resData, newResData.default);
} catch (error) {
    console.log('未找到数据配置文件，使用默认配置');
}
const style = () => {
    return (
        src(`${resData.pathConfig.src + resData.pathConfig.path.style}`, {
            base: resData.pathConfig.src,
        }) //读文件
            .pipe(gulpLoad.sass({ outputStyle: 'expanded' })) // 处理文件,后面的expanded是展开文件的意思
            .pipe(gulpLoad.cleanCss())
            // .pipe(gulpLoad.rename({ extname: '.min.css' }))
            .pipe(dest(resData.pathConfig.serverPac))
    ); // 写文件
};

const script = () => {
    return (
        src(`${resData.pathConfig.src + resData.pathConfig.path.script}`, {
            base: resData.pathConfig.src,
        })
            .pipe(gulpLoad.babel({ presets: [require('@babel/preset-env')] }))
            .pipe(gulpLoad.uglify())
            // .pipe(gulpLoad.rename({ extname: '.min.js' }))
            .pipe(dest(resData.pathConfig.serverPac))
    );
};
// 使浏览器识别node里变量的配置，如require
const browserifyDel = done => {
    glob(`${resData.pathConfig.src + resData.pathConfig.path.script}`, function (err, files) {
        if (err) done(err);
        let tasks = files.map(function (entry) {
            return browserify({ entries: [entry] })
                .transform('babelify', {
                    presets: ['@babel/preset-env'],
                    sourceMaps: true,
                    global: true,
                    ignore: [/\/node_modules\/(?!your module folder\/)/],
                })
                .bundle()
                .pipe(source(entry))
                .pipe(dest(resData.pathConfig.serverPac));
        });
        es.merge(tasks).on('end', done);
    });
};

const page = () => {
    return src(`${resData.pathConfig.src + resData.pathConfig.path.page}`, {
        base: resData.pathConfig.src,
    })
        .pipe(
            gulpLoad.swig({
                data: resData,
                // 清除缓存
                defaults: {
                    cache: false,
                },
            })
        )
        .pipe(dest(resData.pathConfig.serverPac));
};

const imgSet = () => {
    return src(`${resData.pathConfig.src + resData.pathConfig.path.images}`)
        .pipe(gulpLoad.imagemin())
        .pipe(dest(resData.pathConfig.dist));
};
const fontImg = () => {
    return src(`${resData.pathConfig.src + resData.pathConfig.path.fonts}`, {
        base: resData.pathConfig.src,
    })
        .pipe(gulpLoad.imagemin())
        .pipe(dest(resData.pathConfig.dist));
};

const otherfile = () => {
    return src(`${resData.pathConfig.public}/**`, { base: resData.pathConfig.public }).pipe(
        dest(resData.pathConfig.dist)
    );
};

const delFile = () => {
    return del([resData.pathConfig.dist, resData.pathConfig.serverPac]);
};

const server = () => {
    const needWatch = [
        {
            name: resData.pathConfig.path.style,
            perform: style,
            cwdPath: resData.pathConfig.src,
        },
        {
            name: resData.pathConfig.path.script,
            perform: script,
            cwdPath: resData.pathConfig.src,
        },
        {
            name: resData.pathConfig.path.page,
            perform: page,
            cwdPath: resData.pathConfig.src,
        },
    ];
    const needRefresh = [
        {
            name: resData.pathConfig.path.images,
            cwdPath: resData.pathConfig.src,
        },
        {
            name: resData.pathConfig.path.fonts,
            cwdPath: resData.pathConfig.src,
        },
        {
            name: '**',
            cwdPath: resData.public,
        },
    ];
    needWatch.forEach(item => {
        watch(`${item.cwdPath + item.name}`, item.perform);
    });
    needRefresh.forEach(item => watch(`${item.cwdPath + item.name}`, bs.reload({ stream: true })));

    bs.init({
        notify: false, //去掉页面右上角项目启动的提示
        open: true,
        files: `${resData.pathConfig.serverPac}/**`, // 浏览器热更新监听的文件
        port: '2040',
        reloadDelay: 1000,
        server: {
            baseDir: [
                resData.pathConfig.serverPac,
                resData.pathConfig.src,
                resData.pathConfig.public,
            ], // 项目启动路径:放入数组会先从第一个开始找文件，没有再依次去后面元素找
            // 配置路由，用于修改项目中没找到的文件路径
            routes: {
                '/node_modules': 'node_modules',
            },
        },
    });
};

// 文件处理及压缩
const proDist = () => {
    return src(`${resData.pathConfig.serverPac + resData.pathConfig.path.page}`)
        .pipe(gulpLoad.useref({ searchPath: [resData.pathConfig.serverPac, '.'] }))
        .pipe(gulpLoad.if(/\.js$/, gulpLoad.uglify()))
        .pipe(gulpLoad.if(/\.css$/, gulpLoad.cleanCss()))
        .pipe(
            gulpLoad.if(
                /\.html$/,
                gulpLoad.htmlmin({
                    collapseWhitespace: true,
                    minifyCSS: true,
                    minifyJS: true,
                })
            )
        )
        .pipe(dest(resData.pathConfig.dist));
};

const groupTasks = parallel([style, script, page]);

const allFile = parallel([otherfile, imgSet, fontImg, series([groupTasks, proDist])]);

const compliteDist = series([delFile, allFile]);

const development = series([delFile, groupTasks, server]);
const production = series(compliteDist);

module.exports = {
    development,
    production,
    delFile,
    imgSet,
};