不使用框架开发SPA项目，当你只是想写一个简单的移动端页面应用
页面适配，你是否需要把设计稿中的px值转换成对应的rem值
切图开发，你是否需要手动刷新页面看实时效果
样式属性，你是否需要去做浏览器兼容
图标合并，你是否需要再依赖一个雪碧图合成工具
接口联调，你是否需要在本地解决跨域问题
生产部署，你是否需要静态资源压缩、资源路径替换成项目或者CDN路径或者ES6 babel转换
那么这个简单的脚手架可以帮你完成这些，让你更专注于开发
项目地址请戳这里：bic-h5-cli
脚手架结构
该项目是基于gulp实现的一个任务流脚手架，项目目录如下图所示：
安装完脚手架依赖，启动项目后，在本地开发过程中，我们在src/style_tmp/目录中进行样式开发，脚手架会将样式文件中的px值转换成rem值并且对部分样式进行浏览器兼容，再输出到src/style/目录中，页面重新加载，效果实时展示
.
├── README.md
├── bin
│ └── text.txt // 记录image/sprite目录中图标的名称，用于监控合成雪碧图
├── config // 配置目录
│ ├── index.js // 配置文件
│ └── util.js
├── dist // build打包，生产部署
│ ├── font
│ │ └── icon.css
│ ├── image
│ │ ├── sprite
│ │ │ ├── exclusive-error-icon.png
│ │ │ ├── exclusive-right-icon.png
│ │ │ └── exma-analysis-item.png
│ │ └── sprite.png
│ └── style
│ ├── lessDemo.debug.css
│ └── sassDemo.debug.css
├── gulpfile.js
├── package.json
└── src // 开发目录
├── font // 用于存放雪碧图样式和字体样式
│ └── icon.css
├── image // 图片目录
│ ├── bg.jpeg
│ ├── logo.png
│ ├── sprite // 需要合成雪碧图的图标存放目录
│ │ ├── exclusive-error-icon.png
│ │ ├── exclusive-right-icon.png
│ │ └── exma-analysis-item.png
│ └── sprite.png // 合成的雪碧图
├── js // js目录
│ └── index.js
├── style // 样式引用目录
│ ├── index.debug.css
│ ├── lessDemo.debug.css
│ ├── reset.debug.css
│ └── sassDemo.debug.css
├── style_tmp // 样式开发目录，支持less以及sass
│ ├── index.css
│ ├── lessDemo.less
│ ├── reset.css
│ └── sassDemo.scss
└── views // 页面目录
├── demo
│ └── index.html
└── index.html
脚手架配置
module.exports = {
port : 9091, // 本地服务端口
host : '', // 本地服务地址，默认是localhost
srcPath : path.join(__dirname, '../src'),
uglifyMap: { // 打包时，静态资源是否压缩
css: false,
js: false
},
resourcePath: { // 打包时，静态资源路径是否替换
css: 'https://c.58cdn.com.cn/fanglearning/app',
js: '',
image: 'https://img.58cdn.com.cn/fanglearning/app'
},
proxy: { // 代理配置
'/api': { // 请求域别名
target: 'http://10.48.210.13:11083', // 请求IP地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
}
实现
本地服务
使用gulp-connect来启本地的服务，但是gulp-connect只能启个静态页面服务，如果想要与其他的服务器进行通信，请求其他服务器的数据，那就还需要一层代理。这边我们用http-proxy-middleware来实现，具体配置可以点文件链接学习。
connect = require('gulp-connect')
proxy = require('http-proxy-middleware')
gulp.task('server', () => {
connect.server({
root: App.srcPath,
port: App.port,
host: App.host || '127.0.0.1',
livereload: true, //实时刷新,
middleware: function(connect, opt) {
let proxyList = [];
for (let key in App.proxy) {
let value = App.proxy[key];
proxyList.push(proxy(key, value))
}
return proxyList
}
})
});
适配样式
移动端样式，设计稿中的px值需要转换成可以根据页面根节点适配的rem值。gulp-px3rem插件可以将css中的px值根据配置转换成对应的rem值。
let px2remConfig = {
baseDpr: 2, // base device pixel ratio (default: 2)
threeVersion: false, // whether to generate @1x, @2x and @3x version (default: false)
remVersion: true, // whether to generate rem version (default: true)
remUnit: 20, // rem unit value (default: 75)
remPrecision: 6 // rem precision (default: 6)
},
px2rem = require('gulp-px3rem');
gulp.task('px2rem', () => {
return gulp.src(Util.path('style_tmp/**/*.css'))
.pipe(px2rem(px2remConfig))
.pipe(autoprefix('last 2 versions'))
.pipe(connect.reload())
.pipe(gulp.dest(Util.path('style')))
});
雪碧图生成
项目启动后，会监控image/sprite/目录中文件的变化，实时将该目录中文件合成雪碧图并生成对应的样式。这边采用的是gulp.spritesmith
gulp.task('spritesmith', function() {
gulp.src(Util.path('image/sprite/*.png'))
.pipe(spritesmith({
imgName: 'sprite.png', //保存合并后的名称
cssName: '../font/icon.css', //保存合并后css样式的地址
padding: 15, //合并时两个图片的间距
algorithm: 'top-down', //注释1
cssTemplate: function(data) { //输出样式模板
var arr = [];
data.sprites.forEach(function(sprite) {
arr.push(
`.icon-${sprite.name}
{
background-image: url('../image/sprite.png');
background-position: ${sprite.px.offset_x} ${sprite.px.offset_y};
width:${sprite.px.width};
height:${sprite.px.height};
}\n`
);
});
return arr.join("");
}
}))
.pipe(gulp.dest(Util.path('image')));
});
网友评论