browsersync-gulp-demo
Switch branches/tags
Nothing to show
Clone or download
zuojiquan
zuojiquan 移动DEMO
Latest commit 802631b Nov 23, 2017
Permalink
Failed to load latest commit information.
src 移动DEMO Nov 23, 2017
.gitignore project init Nov 21, 2017
README.md 增加移动demo Nov 23, 2017
bower.json project init Nov 21, 2017
gulpfile.js 移动DEMO Nov 23, 2017
package.json 移动DEMO Nov 23, 2017
webpack.config.js project init Nov 21, 2017

README.md

配置说明

  • 该配置是基于browsersync + gulp + webpack + jade + scss(less) + handlebars等前端工程化配置方案
  • 适合使用jQuery、zepto等框架开发的页面
  • 更重要的兼容PC和移动端
  • 注意:移动端采用了淘宝方案,在书写样式的时候直接写px,使用构建命令后会自动转化为rem!!!不再需要心算,计算器计算REM啦!!!

Gulp+webpack构建配置

  • 服务器
  • 使用了browser-sync;详情可访问 http://www.browsersync.cn
  • HTML构建
  • 使用了gulp-file-include来编译.html文件
  • CSS构建
  • 使用了gulp-sass来编译.scss文件
  • JS构建
  • 使用了webpack编译.js

启动服务

  • git clone git@github.com:minguman/browsersync-gulp-demo.git
  • 进入到browsersync-gulp-demo目录下
  • npm(cnpm) install 安装依赖
  • gulp 启动服务后会自动打开http://localhost:3000/demo/,如果没有请直接在地址栏里输入该地址

Gulp任务

  • gulp 启动服务
  • gulp build 根据gulpfile.js里的配置,对整个应用进行构建(包含.html,.css,.js等文件进行编译)
  • gulp clean 清楚根目录下的 dist 目录
  • gulp webpack 对.js进行构建
  • gulp images 对.png,.jpg,.gif等进行构建
  • gulp css 对.css,.scss进行构建
  • gulp fileinclude 对.html进行构建

注意事项

  • 如果不是用于移动端,请注释gulp.task('css'...)任务下的以下代码,该代码用于转化PX为REM
 //.pipe(pxtorem2({
 //   remUnit: 75, //设置REM转化基数(设计稿的实际宽度/10)
 //   filterProperties: [], //不需要做转化的属性名称, ['width', 'padding'] 
 //   remPrecision: 3 //设置转化最小值(px),如果px小于3便不在做转化
 // }))