jia_en_de_yun/mobile_html/gulpfile.js

"use strict";

const { src, dest, watch } = require("gulp");
const postcss = require("gulp-postcss");
const browserSync = require("browser-sync").create();
const sass = require("gulp-sass");
const babel = require('gulp-babel');

var sourcemaps = require("gulp-sourcemaps"); //生成map文件

//html
const layout1 = require('layout1')	//layout布局
const frontMatter = require('./cr-front-matter.js');	//html模板处理
let fileinclude = require('gulp-file-include'); //html 文件引用 if for。。。
const htmlbeautify = require('gulp-html-beautify');		//美化html


//postcss插件
const clearfix = require('postcss-clearfix'); //clear: fix;
const color_rgba_fallback = require('postcss-color-rgba-fallback'); //降级兼容ie
const opacity = require('postcss-opacity');   //降级兼容ie
const autoprefixer = require('autoprefixer');   //降级兼容ie
const postcssShort = require('postcss-short'); //css简写
const colorFunction = require("postcss-color-function") //color 函数


const del = require('del');
const color = require('colors-cli')

// 定义路径
const path = {

    html: ["src/pages/**/*.html","src/passport/**/*.html"],
    outHtml: "html",

    scss: "src/scss/*.scss",
    css: "mobileAssets/css",

    js: "mobileAssets/js/*.js"
};

//监听scss

function watchScss() {
    const processors = [
        postcssShort,
        clearfix,
        color_rgba_fallback,
        opacity,
        colorFunction,
        autoprefixer
    ];

    return src(path.scss)
        .pipe(sourcemaps.init())
        //outputStyle:  expanded:扩大 compressed:压缩
        .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError))
        .pipe(postcss(processors))
        .pipe(sourcemaps.write("./maps"))
        .pipe(dest(path.css))
        .pipe(browserSync.stream());
}

//监听html
function watchHtml() {
    return src(path.html)
        .pipe(frontMatter({
            property: 'fm'
        }))
		.pipe(layout1.ejs('src/layout/layout.ejs'))
        .pipe(fileinclude({
            prefix: '@@',
            basepath: 'src/components/'
        }))
        .pipe(htmlbeautify())
        .pipe(dest(path.outHtml))
        .pipe(browserSync.stream());
}

//监听js
function watchJs() {
    return src(path.js)
        // .pipe(sourcemaps.init())
        // .pipe(babel({
        //     presets: ['@babel/preset-env']
        // }))
        // .pipe(sourcemaps.write("./maps"))
        // .pipe(dest('dist/js'))
        .pipe(browserSync.stream());
}
//整合
function service() {
    browserSync.init({
        server: "./"
    });
    watch([...path.html,'src/**/*.html','/src/layout/layout.ejs'], watchHtml);
    watch([path.scss,'src/scss/**/*.scss'], watchScss);
    watch(path.js, watchJs);

    // 监听layout
}



// 移动到wwwroot
let log = (str)=>console.log(color.green(str));

function file_move() {
    //删除原始文件
    log('删除原始文件...');
    del('../CZKJ.CMS.Web/wwwroot/mobileAssets/**', { force: true });
    log('开始移动文件...');
    //移动
    return src('./mobileAssets/**')
        .pipe(dest('../CZKJ.CMS.Web/wwwroot/mobileAssets'))
        .on('end', () => {
            // del('./dist');
            log('移动完成...');
        })
}



exports.service = service;
exports.move = file_move;
exports.default = service;