前端代码说明v1.1.0.pdfVIP

前端代码说明v1.1.0 前端代码说明v1.1.0 1. ⽬录结构说明 结构 - - assets - - - - fonts - - - - images - - - - javascript - - - - stylesheets - - dev - - - - stylesheets - - dist - - - - css - - - - fonts - - - - img - - - - js - - gulpfile.js - - README.md 说明 assets 项⽬资源⽬录， dev 开发⽬录， dist 编译输出⽬录， gulpfile.js ⾃动化⼯具API 2. gulp的使⽤ 1.安装node环境(⾃⾏goole即可) 2.全局安装gulp 1 $ npm install gulp -g 3.进⼊到需要gulp管理的项⽬路径, 如 /gulp 再安装⼀遍 1 $ npm install gulp --save-dev 4.安装gulp插件 1 $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload sass的编译 ( gulp-ruby-sass ) ⾃动添加css前缀（gulp-autoprefixer ） 压缩css（ gulp-minify-css ） js代码校验（ gulp-jshint ） 合并js⽂件（ gulp-concat ） 压缩js代码（ gulp-uglify ） 压缩图⽚（ gulp-imagemin ） ⾃动刷新页⾯（gulp-livereload ） 图⽚缓存，只有图⽚替换了才压缩（gulp-cache ） 更改提醒（ gulp-notify ） 清除⽂件（ del ） 5.运⾏task任务 1 $ gulp 监听⽂档实现实时编译 1 $ gulp watch 6.gulp的API请查看gulpfile.js⽂件 3. scss⽂件规范以及说明 1.各个⼩模块以下划线开头全⼩写命名，多单词以 - 符号分隔，总模块正常，以该模块⽂件夹命名，在其中导⼊需要的⼩模块(详细规则请 查看 font-awesome 的scss源码，更多内容google脑补)，例： font-awesome - - _animated.scss - - _bordered-pulled.scss - - _core.scss - - _fixed-width.scss - - _icons.scss - - _larger.scss - - _list.scss - - _mixins.scss - - _path.scss - - _rotated-flipped.scss - - _stacked.scss - - _variables.scss - - font-awesome.scss 例： _path.scss 路径配置⽂件， _mixins.scss 预编译⽂件， _variables.scss 变量定义⽂件， font-awesome.scss 模块导⼊⽂件 4. 脚本使⽤说明 基本组件 1. error.js ⽤途：低版本浏览器访问限制 ⽤法：在 head 标签中最先引⼊下列代码 1 !--[if lt IE 9] 2 script src=dist/js/error.min.js/script 3 ![endif]-- 2. mian.js ⽤途：javascript⼊⼝⽂件负责渲染数据处理交互 ⽤法：引⼊即可，涉及模块较多后续完善模块说明 3. date.js ⽤途：解析处理⽇期数据，⽀持多种⽇期格式 ⽤法：调⽤ Date ⽅法 1 Date.today() //