在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/vue@2.6.0"></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;
