Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

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便不在做转化
 // }))

About

browsersync-gulp-demo

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.