前端开发技术演进及实例演示附前后端代码..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:任务来了，俺要工作了 下一步写完再更新构建自动化：Gulp —— 基于流,开发者能够很稳健的掌控构建的各个流程，最大化的实现构建的可控制性； 个人建议 每个 分站 或者 功能模块 为构建的任务单位，这样能够更好的控制构建的效果;——插件流 /browse/keyword/gulpplugin入门教程 /gulp/gulp简单demo ：（附录后贴这个代码）Fis3，百度自动构建工具.个人理解 将gulp的很多插件功能全部封装，实现了 任务文件书写的最小化功能强大 完全黑盒;(勿喷)文档略坑 /fis3/docs/beginning/intro.html/fis3/docs/beginning/intro.html测试自动化暂时不写暂时没时间----忙完再写部署自动化构建神器https://jenkins.io/index.html全量发布%20http://littlechang/article/details/8642149 /littlechang/article/details/8642149增量发布 /littlechang/article/details/8642149/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([w