在gulp中使用vue多页面开发

页面html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="renderer" content="webkit" />
    <title>首页——留学国家</title>
    <meta name="keywords" content="keywords" />
    <link rel="stylesheet" href="./js/lib/flexible/flexible.css" />
    <script src="./js/lib/flexible/flexible.js"></script>
    <meta name="description" content="description" />
    <!-- <link rel="stylesheet" href="./css/sprite.css" /> -->
    <link rel="stylesheet" href="http://webms1.xhd.cn/r/cms/static/swiper/4.x/swiper.min.css">
    <link rel="stylesheet" href="./css/common.debug.css" />
    <link rel="stylesheet" href="./css/index.debug.css" />
    <!-- <link rel="stylesheet" href="./images/icon/svg-symbols.css">
    <script src="./images/icon/svg-symbols.js"></script> -->
</head>

<body class="">
    <div id="app">
        @@include('header.html',{"type":"a"})
        @@include('navigator.html')
        
        <div class="message">
            {{ message}}
            <ul>
                <li v-for="item in fruit">
                    <span>{{item.price}}</span>
                    <span>{{item.name}}</span>
                    <span>{{item.weight}}</span>
                </li>
            </ul>
        </div>       
        
        @@include('list.html')
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="http://webms1.xhd.cn/r/cms/static/swiper/4.x/swiper.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/test.js"></script>
<script>
    var mySwiper = new Swiper('.hotUniversity', {
        slidesPerView: 2.5,
        spaceBetween: 20
    })
    var mySwiper2 = new Swiper('.hotjigou', {
        slidesPerView: 2.5,
        spaceBetween: 20
    })
</script>
</html>

common.js我定义了两种调用接口的方式

function dealParam(data){
    let _data = Object.keys(data)
  return encodeURI(_data.map(name => `${name}=${data[name]}`).join('&'));
}
let http=function(url,param,type){
        let data=null
        let config={
            method: type,
            url: url
          }
        if(type==='post'||type==='POST'){
            data=dealParam(param)
            config.data=data
        }else{
            config.params=param
        }
        return axios(config)
          .then(function (res) {
              return res?
              Promise.resolve(res) :
              Promise.reject(res)
        })
}


let ajax1=axios.create({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
})
function ajax(type, url,  data = {}) {
    if (type === 'get') {
        data = {
            params: data
        }
    }else{
        data=dealParam(data)
    }
    return ajax1[type](url , data)
        .then(res => {
            return res?
                Promise.resolve(res) :
                Promise.reject(res)
        })
}
let commonajax={
    get: (url,  data) => {
        return ajax('get', url,  data)
    },
    post: (url, data) => {
        return ajax('post', url,  data)
    }
}

vue实例挂载并调用接口方式test.js

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        fruit: [
            { price: 2, name: '苹果', weight: 1.5 },
            { price: 2, name: '香蕉', weight: 1.5 },
            { price: 2, name: '橘子', weight: 1.5 },
            { price: 2, name: '樱桃', weight: 1.5 }
        ]
    },
    created() {
        let param = {
            orderBy: 22,
            siteId: 3,
            pageNo: 1,
            pageSize: 10,
            q: '雅思'
        }
        let param2={
            channelIds: 18285,
            first: 0,
            count: 3,
            orderBy: 4,
            format: 1
        }
        // commonajax.get('http://wh.xhd.cn/api/content/list.jspx', param2)
        http('http://wh.xhd.cn/api/content/list.jspx', param2)
            .then(res => {
                console.log(res)
            })
    //    commonajax.post('http://wh.xhd.cn/pcCourse/classTree.jspx', param)
        http('http://wh.xhd.cn/pcCourse/classTree.jspx', param,'post')
            .then(res => {
                console.log(res, 222222)
            })
    }
})

gulp配置

const basePath = require('./gulpfile.base');
const { src, dest, task, watch, series, parallel } = require('gulp');
const del = require('del');
// const rename = require("gulp-rename");
const sourcemaps = require('gulp-sourcemaps');
const fileInclude = require('gulp-file-include');
// const rev = require('gulp-rev');
// const revCollector = require('gulp-rev-collector');

// const eslint = require('gulp-eslint');
const babel = require('gulp-babel');
// const uglify = require('gulp-uglify');

const sass = require('gulp-sass');
sass.compiler = require('node-sass');
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer');
const cleancss = require('gulp-clean-css'); // 压缩css
var px2rem = require('gulp-px3rem')
// const cssnano = require('cssnano');

const cache = require('gulp-cache');
const imagemin = require('gulp-imagemin');
const spritesmith = require('gulp.spritesmith');
const svgSymbols = require('gulp-svg-symbols');
const svgSymbols2js = require('gulp-svg-symbols2js');

const connect = require('gulp-connect');
const proxy = require('http-proxy-middleware');

// Clean dist
task('Clean', async () => {
    await del([basePath.dest]);
});

/* ======== 开发环境配置 ======== */
// CopyHtml
task('CopyHtml', async () => {
    return await src(basePath.html.src)
        .pipe(fileInclude({
            prefix: '@@',
            basepath: basePath.includeBasePath,
            indent: true
        }))
        .pipe(dest(basePath.html.dest))
        .pipe(connect.reload())
})

// CopyLibrary
task('CopyLibrary', async () => {
    return await src(basePath.lib.src)
        .pipe(dest(basePath.lib.dest))
        .pipe(connect.reload())
})

// CompileJS
task('CompileJS', async () => {
    return await src(basePath.js.src, { nodir: true })
        // .pipe(eslint())
        // .pipe(eslint.format())
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(sourcemaps.write('./map'))
        .pipe(dest(basePath.js.dest))
        .pipe(connect.reload())
})

// Sass
task('Sass', async () => {
    return await src(basePath.sass.src)
        
        .pipe(sourcemaps.init())
        
        .pipe(sass({
            outputStyle: 'expanded'
        }).on('error', sass.logError))
        .pipe(postcss([autoprefixer()]))
        .pipe(px2rem({remUnit: 75}))
        .pipe(cleancss())
        .pipe(sourcemaps.write('./map'))
        .pipe(dest(basePath.sass.dest))
        .pipe(connect.reload())
})
// Images
task('Images', async () => {
    return await src(basePath.images.src, { nodir: true })
        .pipe(cache(imagemin([
            imagemin.gifsicle({ interlaced: true }),
            imagemin.jpegtran({ progressive: true }),
            imagemin.optipng({ optimizationLevel: 5 }),
            imagemin.svgo({
                plugins: [
                    { removeViewBox: true },
                    { cleanupIDs: false }
                ]
            })
        ])))
        .pipe(dest(basePath.images.dest))
        .pipe(connect.reload())
})

// Sprite
task('Sprite', async () => {
    return await src(basePath.sprites.src)
        .pipe(spritesmith({
            imgName: 'sprite.png',
            imgPath: '../images/sprite.png',
            cssName: '../css/sprite.css',
            padding: 10,
            algorithm: 'top-down', // top-down,left-right,diagonal,alt-diagonal,binary-tree
            cssTemplate: (data) => {
                let arr = [];
                data.sprites.map(sprite => {
                    arr.push(
                        `.icon-${sprite.name} {
    width: ${sprite.px.width};
    height: ${sprite.px.height};
    background: url(${sprite.image}) ${sprite.px.offset_x} ${sprite.px.offset_y} no-repeat;
    background-size: ${sprite.px.total_width} ${sprite.px.total_height};       
}\n`)
                })
                return arr.join('')
            }
        }))
        .pipe(dest(basePath.sprites.dest))
        .pipe(connect.reload())
})

// Svgsprite
task('Svgsprite', async () => {
    return await src(basePath.svgsprites.src)
        .pipe(svgSymbols({
            id: 'icon_svg_%f',
            className: '.icon_svg_%f',
            templates: [
                'default-svg',
                'default-css',
                'default-demo'
            ]
        }))
        .pipe(svgSymbols2js())
        .pipe(dest(basePath.svgsprites.dest))
})

// Server
task('Server', async () => {
    connect.server({
        root: basePath.dest,
        port: 8886,
        host:'0.0.0.0',
        livereload: true,
        // middleware: function (connect, opts) {
        //     return [
        //         proxy('/api', {
        //             target: 'http://www.xhd.cn',
        //             changeOrigin: true
        //         })
        //     ]
        // }
    })
})

// 处理文件
task('Resources', series('CopyHtml', parallel('CompileJS', 'Sass', 'Images', 'Sprite', 'Svgsprite', 'CopyLibrary')));

// 监听文件变化
task('Watch', () => {
    watch(basePath.include, series('CopyHtml'));
    watch(basePath.html.src, series('CopyHtml'));
    watch(basePath.lib.src, series('CopyLibrary'));
    watch(basePath.js.src, series('CompileJS'));
    watch(basePath.sass.src, series('Sass'));
    watch(basePath.images.src, series('Images'));
    watch(basePath.sprites.src, series('Sprite'));
    watch(basePath.svgsprites.src, series('Svgsprite'));
})

// 开发环境打包
task('dev', series('Clean', 'Resources', 'Server', 'Watch'));

gulpfile.base.js

const basePath = {
    src: './src',
    dest: './dist',
    includeBasePath: './src/include',
    include: './src/include/*.html',
    html: {
        src: './src/*.html',
        dest: './dist'
    },
    js: {
        src: ['./src/js/**/*.js', '!./src/js/lib/**/*.js'],
        dest: './dist/js',
        revDest: './dist/rev/js'
    },
    lib: {
        src: './src/js/lib/**/*',
        dest: './dist/js/lib'
    },
    sass: {
        src: './src/sass/**/*.scss',
        dest: './dist/css',
        revDest: './dist/rev/css'
    },
    images: {
        src: ['./src/images/**/*', '!./src/images/sprites/*', '!./src/images/svg/*'],
        dest: './dist/images'
    },
    sprites: {
        src: './src/images/sprites/*.png',
        retinaSrc: './src/images/sprites/*@2x.png',
        dest: './dist/images'
    },
    svgsprites: {
        src: './src/images/svg/*.svg',
        dest: './dist/images/icon'
    }
}

module.exports = basePath;

在gulp中使用vue多页面开发

猜你喜欢