前端开发技术演进及实例演示 附前后端代码.docx

目录前端趋势：2前后端分离2演进过程2构建自动化：5测试自动化7部署自动化7附录1：简单demo7此文原创：工作后，机械转IT，IT经历由C+ 前端，踩坑无数，特此记录；前端现状：各方工具百花齐鸣，好是热闹。前端工程化：构建自动化 测试自动化部署自动化前端趋势：前后端分离演进过程相较于数年前的重后台，轻前台，开发方式为;以java为例，常见的jsp文件结构如下：后台代码：1.伪地址：webapp/urlwrite.xml2.java代码Srtuts配置文件 个人称之为同步技术方法；主要技术struts2 + jsp，前端基本为特效级别的js开发；现在快速开发过程：数据交互走接口ajax异步；Java代码：将数据转换为json，response给前端；前端js代码：OR (这有个伏笔)此时前端开始动态更改页面的dom结构; WOW XXX:任务来了，俺要工作了 下一步写完再更新构建自动化：a) Gulp 基于流,开发者能够很稳健的掌控构建的各个流程，最大化的实现构建的可控制性； 个人建议 每个 分站 或者 功能模块 为构建的任务单位，这样能够更好的控制构建的效果;i. 插件流 /browse/keyword/gulppluginii. 入门教程 /gulp简单demo ：（附录后贴这个代码）b) Fis3，百度自动构建工具.个人理解 将gulp的很多插件功能全部封装，实现了 任务文件书写的最小化i. 功能强大 完全黑盒;(勿喷)ii. 文档略坑 /fis3/docs/beginning/intro.html测试自动化c) 暂时不写暂时没时间-忙完再写部署自动化构建神器https:/jenkins.io/index.htmla. 全量发布 /littlechang/article/details/8642149b. 增量发布 /littlechang/article/details/8642149附录1：简单demovar gulp = require(gulp);/ 引入gulp组件（插件）var uglify = require(gulp-uglify);var rename = require(gulp-rename);var watch = require(gulp-watch);var jshint = require(gulp-jshint);var minifyCss = require(gulp-minify-css);var notify = require(gulp-notify);var concat = require(gulp-concat);var useref = require(gulp-useref);var filter = require(gulp-filter);var gulpif = require(gulp-if);var clean = require(gulp-clean);/index.html css、js合并压缩gulp.task(index, function () var assets = useref.assets(); return gulp.src(app/index.html) .pipe(assets) .pipe(gulpif(*.js, uglify() .pipe(gulpif(*.css, minifyCss() .pipe(assets.restore() .pipe(useref() .pipe(gulp.dest(www););/ 语法检查gulp.task(jshint, function () return gulp.src(app/js/*.js) .pipe(jshint() .pipe(jshint.reporter(default););/ 复制文件gulp.task(copy, function () gulp.src(app/fonts/*) / 目标地址 .pipe(gulp.dest(www/fonts/) gulp.src(app/templates/*) / 目标地址 .pipe(gulp.dest(www/templates/) gulp.src(app/img/*) / 目标地址 .pipe(gulp.dest(www/img/);/ 清空图片、样式、jsgulp.task(clean, function () return gulp.src(www/css/*, www/js/*, www/img/*, www/lib/*, www/templates