1、目錄前端趨勢：2前后端分離2演進過程2構建自動化：5測試自動化7部署自動化7附錄1：簡單demo7此文原創(chuàng)：工作后，機械轉IT，IT經(jīng)歷由C+ > 前端，踩坑無數(shù)，特此記錄；前端現(xiàn)狀：各方工具百花齊鳴，好是熱鬧。前端工程化：構建自動化 測試自動化部署自動化前端趨勢：前后端分離演進過程相較于數(shù)年前的重后臺，輕前臺，開發(fā)方式為;以java為例，常見的jsp文件結構如下：后臺代碼：1.偽地址：webapp/urlwrite.xml2.java代碼Srtuts配置文件 個人稱之為同步技術方法；主要技術struts2 + jsp，前端基本為特效級別的js開發(fā)；現(xiàn)在快速開發(fā)過程：數(shù)據(jù)交互走接口aja

2、x異步；Java代碼：將數(shù)據(jù)轉換為json，response給前端；前端js代碼：OR (這有個伏筆)此時前端開始動態(tài)更改頁面的dom結構; WOW XXX:任務來了，俺要工作了 下一步寫完再更新構建自動化：a) Gulp 基于流,開發(fā)者能夠很穩(wěn)健的掌控構建的各個流程，最大化的實現(xiàn)構建的可控制性； 個人建議 每個 分站 或者 功能模塊 為構建的任務單位，這樣能夠更好的控制構建的效果;i. 插件流 ii. 入門教程 簡單demo ：（附錄后貼這個代碼）b) Fis3，百度自動構建工具.個人理解 將gulp的很多插件功能全部封裝，實現(xiàn)了 任務文件書寫的最小化i. 功能強大 完全黑盒;(勿噴)ii.

3、 文檔略坑 測試自動化c) 暫時不寫暫時沒時間-忙完再寫部署自動化構建神器https:/jenkins.io/index.htmla. 全量發(fā)布 b. 增量發(fā)布 附錄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

4、-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

5、('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.d

6、est('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('a

7、pp/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/*', read: false) .pipe(clean(force: true);