响应式自动化开发流程-Windows 版
前言
在WEB开发中，我们一直在寻求更方便，快捷的方式，现在主要从如下几个问题入手，学习一些入门级的自动化开发方案。
1、 CSS压缩；
2、 JS压缩；
3、 JS依赖包的管理；
4、 各终端浏览器自动实时同步，解脱反复手动刷新与清缓存工作，非常适合响应式开发；
5、 项目自动发布。
首先看下传统的开发模式，从编码、调试到发布，要做若干反复繁琐的操作，长期以来，会浪费很多宝贵的时间，工作效率是很低的。
不难看出，css与js的压缩，需要安装对应的工具，而且还有可能每次都要执行下对应的命令。往往开发目录中还有很多辅助的文件或代码，不希望推上线，所以在发布时，还要费劲的去筛选拷贝最终的代码到生产环境。
那么有没有一种方法，自动完成这些工作呢？曾经也任性的开发了一套自动化的工具，漠然回首，才发现已有很多高人发明了更先进的技术，与时俱进，也小试一把，帮助我们提高工作效率。
先不讲空洞的概念，直接看下我们要实现什么样的效果，能给我们带来什么样的好处。
（1）修改CSS，多浏览器同步实时刷新。
（2）修改后台代码，多浏览器同步实时刷新。
（3）多浏览器镜像。
是不是很想亲自尝试一下？其实还远不止这些功能，下面就详细介绍如何搭建这样一个环境。
目录
1、NodeJS简介与安装
2、GULP的安装与使用
3、BrowserSync同步调试
4、Bower简介
5、AngularJS简介
6、html5真机调试
7、Laravel安装（windows环境）
NodeJS简介与安装
百度解释：Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台， 用来方便地搭建快速的 易于扩展的网络应用· Node.js 借助事件驱动， 非阻塞I/O 模型变得轻量和高效， 非常适合 运行在分布式设备 的 数据密集型 的实时应用。
个人理解：NodeJS就是一个JS解析器，通过其提供的JS语法的API，可以构建一系列应用程序，就好比java与JDK，开发出的应用可以在JVM中运行，或者用php.exe命令执行*.php文件的关系。
下载->安装：Windows直接根据提示，完成安装，linux需要下载源码编译安装。（http://www.nodejs.org/download/）
验证是否安装成功：启动命令行，输入node -v，如果出现版本号，则安装成功，否则需要检查下环境变量，将nodejs目录（默认C:Program Files odejs）加入path环境变量中。
同时，还自带了一个npm工具，npm是Node.js的模块依赖管理工具，相当于linux上的yum和apt-get。同样检查是否安装成功，后面会用到。
Nodejs安装完成，现在就可以简单看下NodeJS能做些什么。
在任意目录中新建一个demo.js文件，内容如下：
1 var http = require("http"); 2 http.createServer(function(request, response) { 3 response.writeHead(200, {"Content-Type": "text/html"}); 4 response.write("Hello World"); 5 response.end(); 6 }).listen(8080); 7 console.log("nodejs start listen 8080 port!");
然后用命令行进入该目录，执行node demo.js，即看到如下效果：
不难发现用简单的几行js代码就创建了一个http服务器，类似apache、tomcat的功能。现在就应该对NodeJS有了个初步认识。
GULP的安装与使用
定义：官方的解释为基于文件流的构建系统，就是对文件进行一系列的二次加工（如代码的压缩等，英文含义为一大口，狼吞虎咽，形象地暗示还能做很多事情）。gulp是一个命令，实质上就是Nodejs写的一个小工具。
安装前准备：在apache根目录中新建一个test空目录（D:wwwroot est），用cmd进入这个目录，并执行如下命令：
npm install -g gulp
-g参数表示全局安装，默认安装目录为C:UsersAdministratorAppDataRoaming pm。如图所示表示安装成功。
分析下gulp的本质：在安装目录中，就能看到这两个文件，功能就是用node执行一个nodejs代码。
上面%~dp0代表批处理所在的目录，也就是C:UsersAdministratorAppDataRoaming pm，继续找到上面的gulp.js文件。
原来gulp就是用nodejs写的一个工具，来实现文件流的管理。
继续安装相关工具，先输入下面命令，后面再解释为什么要这样写，不用硬记。
npm install --save-dev gulp gulp-uglify gulp-minify-css gulp-concat gulp-uglify gulp-rename gulp-less gulp-sass
其中--save-dev表示安装在当前目录（D:wwwroot est），安装顺利完成就能看到自动生成了这些文件夹和对应代码。
这些gulp开头的目录就是它的工具集，下面就用它们来完成我们的自动化工作。
准备工作基本完成，现在开始配置，让一个简单的自动化操作运转起来！
回到D:wwwroot est目录，新建2个目录，src用于存放项目所有源码，target用于存放最终发布的代码，再建一个gulpfile.js文件（相当于linux上的Makefile，固定名字）。然后向gulpfile.js文件中写入下面代码：
1 var gulp = require('gulp'); 2 var less = require('gulp-less'); 3 var minifycss = require('gulp-minify-css'); 4 var concat = require('gulp-concat'); 5 var uglify = require('gulp-uglify'); 6 var rename = require('gulp-rename'); 7 var tinylr = require('tiny-lr'); 8 var server = tinylr(); 9 var port = 1234; 10 11 gulp.task('default', function() { 12 13 }); 14 15 gulp.task('css', function() { 16 return gulp.src('src/*.css') //压缩的文件 17 .pipe(gulp.dest('target/css')) //输出文件夹 18 .pipe(minifycss()); //执行压缩 19 }); 20 21 gulp.task('js', function() { 22 return gulp.src('src/js/*.js') 23 .pipe(concat('main.js')) //合并所有js到main.js 24 .pipe(gulp.dest('target/js')) //输出main.js到文件夹 25 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 26 .pipe(uglify()) //压缩 27 .pipe(gulp.dest('target/js')); //输出 28 }); 29 30 // 监听任务 运行语句 gulp watch 31 gulp.task('watch',function(){ 32 server.listen(port, function(err){ 33 if (err) { 34 return console.log(err); 35 } 36 37 // 监听css 38 gulp.watch('./src/scss/*.scss', function(){ 39 gulp.run('css'); 40 }); 41 42 // 监听js 43 gulp.watch('./src/js/*.js', function(){ 44 gulp.run('js'); 45 }); 46 47 }); 48 49 });
代码一开始就是一大堆变量的申明，其中require("module")就是nodejs加载模块的函数，module为模块名，其路径可以是相对，也可以是绝对路径。由此得出，前面的npm install其实就是安装这里需要的模块。
体验成果：执行该命令gulp watch，表示启动监听这个任务规则，其中"watch"类似Makefile中的目标规则，因此，也可单独执行gulp css表示把css压缩到target目录，如果不带参数，则默认执行"default"规则。激动人心的时刻即将到来！
这样，gulp就已经在自动监听我们的相关行为，并可自动完成一系列事情了。
体验：在目录D:wwwroot estsrcjs中新建test.js，随便写一段代码，保存，gulp就能实时监听到，在D:wwwroot est argetjs目录生成一份压缩过的main.min.js文件。
通过修改配置文件，还能监听所有文件的变化，然后执行相关的操作。
BrowserSync同步调试
随着移动终端的普及，html5的开发已不仅仅局限于单一设备，尤其是响应式的应用，多设备兼容调试，如果再用传统的方式，可能会显得力不从心，于是前人为我们寻找了一种一劳永逸的模式。有了上面的基础，就可以实现前言中动画所展示的效果了。
首先是安装。中途可能报错，可以暂时不管。
npm install -g browser-sync
部署：在D:wwwrootgulp_testsrc目录中建一个index.html文件，然后cmd命令在该目录（D:wwwrootgulp_testsrc）执行下面命令。
browser-sync start --server --files "css/*.css"
这样就自动启动一个http服务器，端口默认3000，现在就可以调试静态代码了。在浏览器中输入http://localhost:3000即可访问刚新建的index.html文件，跟在apache中一样的效果。只要修改css文件，效果就会实时同步到浏览器中，省去手动反复刷新的繁琐过程。不仅如此，还支持多个浏览器，多台移动设备（如android手机、iphone、pad等）的同步，并且在其中一个浏览器中操作，所有动作与输入输出也会被同步到所有其他设备（见前言动画），所以尽管一边开发一边观察下效果就好了。
如果电脑已部署apache环境，同时还想调试后台语言（如php等），则需要用代理模式启动监听服务。
browser-sync start --proxy "bs.test.com" --files "css/*.css"
其中bs.test.com已绑定host到本机ip。然后同样访问http://localhost:3000/（其他局域网需要通过ip访问）即可看到：
此时看到的实际上是apache的站点了，因为browser-sync做了反向代理（跟nginx和apache的反向代理一样）。这样就可以把实时同步的功能整合到自己的php环境中了。
但是每次也要执行这个命令来启动监听服务，似乎也很麻烦，下面看下怎样加到前面提到的gulp watch中，让一个命令搞定所有自动化。回到D:wwwroot est目录，编辑gulpfile.js文件，加入黄色背景的代码，就能实现上面单独执行broswer-sync命令的效果。
1 var gulp = require('gulp'); 2 var less = require('gulp-less'); 3 var minifycss = require('gulp-minify-css'); 4 var concat = require('gulp-concat'); 5 var uglify = require('gulp-uglify'); 6 var rename = require('gulp-rename'); 7 var tinylr = require('tiny-lr'); 8 var server = tinylr(); 9 var port = 1234; 10 11 // browser-sync 12 var browserSync = require('browser-sync'); 13 14 gulp.task('default', function() { 15 16 }); 17 18 gulp.task('css', function() { 19 return gulp.src('src/*.css') //压缩的文件 20 .pipe(gulp.dest('target/css')) //输出文件夹 21 .pipe(minifycss()); //执行压缩 22 }); 23 24 gulp.task('js', function() { 25 return gulp.src('src/js/*.js') 26 .pipe(concat('main.js')) //合并所有js到main.js 27 .pipe(gulp.dest('target/js')) //输出main.js到文件夹 28 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 29 .pipe(uglify()) //压缩 30 .pipe(gulp.dest('target/js')); //输出 31 }); 32 33 // 监听任务 运行语句 gulp watch 34 gulp.task('watch',function(){ 35 server.listen(port, function(err){ 36 if (err) { 37 return console.log(err); 38 } 39 40 // 监听css 41 gulp.watch('./src/scss/*.scss', function(){ 42 gulp.run('css'); 43 }); 44 45 // 监听js 46 gulp.watch('./src/js/*.js', function(){ 47 gulp.run('js'); 48 }); 49 50 }); 51 52 // 实时同步到浏览器 53 browserSync.init(['target/css/*', 'target/js/*', 'target/*.*'], { 54 /* 静态服务 55 server: { 56 baseDir: "target" 57 } 58 */ 59 60 // 代理模式 61 proxy: "bs.test.com" 62 }); 63 64 });
然后在该目录中执行gulp watch，自动化响应式调试环境就搭好了，尽情体验它为我们带来的方便吧！
Bower简介
bower是js依赖管理工具，能自动帮我们下载适合版本的js库，如jquery、bootstrap等。
安装：通过npm安装。
npm install -g bower
使用：进入D:wwwroot estsrc目录，以安装jquery与bootstrap为例，依次输入命令。
bower install jquery bower install bootstrap
成功后就能在D:wwwroot estsrc目录中自动生成bower_components目录，里面又有jquery和bootstrap2个目录，这就是bower帮我们下载的源码，就可以直接在自己的工程中使用。如果想升级，执行bower update，想卸载，执行bower uninstall jquery或bower uninstall bootstrap即可。更命令可参考官方文档。
AngularJS简介
AngularJS是一个js框架，它能提供模板、数据绑定和UI组件以及单元测试，为开发带来很大的方便，同时由于大部分工作可以交给前端处理，这样减轻了服务器端的压力。当然，任何事物都有利有弊，如果用AngularJS开发的话，由于大部分html元素都是js输出，同时它会绑定大量监听事件，导致性能下降。而且不利于SEO优化，因此，要根据实际情况选用。下面简单了解下，会用即可。
安装：进入D:wwwroot estsrc通过bower安装，在项目中就可以直接引用bower_componentsangularangular.min.js这个文件。
bower install angularjs
下面简单演示几个最常用的功能
1、指令
2、数据双向绑定
3、模板（类似artTemplate、jade等前端模板）
4、MVC（引入后端语言的MVC概念）
5、依赖注入（引入java中的概念）
指令
AngularJS特有的DOM属性，简单理解为ng-前缀的属性，如ng-model、ng-bind、ng-init...
数据双向绑定
1 <!--注意地方：可以不写，但一定要有ng-app属性表示作用域--> 2 <div ng-app=""> 3 <script src="bower_components/angularjs/angular.min.js"></script> 4 <select ng-model="sex"> 5 <option value="male">男</option> 6 <option value="female">女</option> 7 </select> 8 <p ng-bind="sex"></p> 9 10 <p>姓名：<input type="text" ng-model="name"></p> 11 <p ng-bind="name"></p> 12 </div>
操作表单控件时，对应的值立即呈现到了页面上，该功能用于表单验证之类的功能很方便。更多用法参考官方文档。
模板
index.html
1 <script src="bower_components/angularjs/angular.min.js"></script> 2 3 <div ng-app="" ng-init="points=[1,15,19,2,40]"> 4 <!--数组--> 5 <p>points[3] = {{ points[2] }}</p> 6 7 <!--循环--> 8 <li ng-repeat="x in [1,2,3]"> 9 {{ x }} 10 </li> 11 </div>
这里只展示简单的用法，有个初步的印象，更多的请查阅相关文档。
MVC
index.html
1 <a href="#news">新闻中心</a> 2 3 <!--ng-app表示MVC作用域--> 4 <div ng-app="myapp"> 5 <div ng-view><!--这里是显示模板的地方--></div> 6 </div> 7 8 <script src="bower_components/angularjs/angular.min.js"></script> 9 <script src="bower_components/angular-route/angular-route.min.js"></script> 10 <script> 11 var app = angular.module('myapp', ['ngRoute']); 12 13 // 模板与控制器映射 14 app.config(['$routeProvider',function ($routeProvider) { 15 $routeProvider 16 .when('/news', { 17 templateUrl: 'list.html', 18 controller: 'NewsControl' 19 }) 20 .when('/news/:id', { 21 templateUrl: 'detail.html', 22 controller: 'NewsListControl' 23 }) 24 .otherwise({ 25 //redirectTo: '/list' 默认跳转到 26 }); 27 }]); 28 29 // 控制器 30 app.controller('NewsControl',function($scope) { 31 console.log('新闻列表'); 32 }); 33 34 app.controller('NewsListControl',function($scope, $routeParams) { 35 //$scope为模板对象，$routeParams为接收的参数对象{"id": "10"} 36 $scope.news_id = $routeParams.id; 37 }); 38 </script>
list.html
1 <ul> 2 <li ng-repeat="id in [1, 2, 3 ]"> 3 <a href="#/news/{{ id }}"> 新闻{{ id }}</a> 4 </li> 5 </ul>
detail.html
1 新闻{{news_id}}的详细内容。
注意上面黄色背景的地方不能遗漏。MVC中的路由已单独模块的方式加载，使用前需要bower install angular-route。运行下效果如下，注意地址栏#号后面的变化，就是对应路由调用的对应控制器。
依赖注入
依赖注入在AngularJS中很普遍。一般用在控制器和工场方法中，通常写法如下。详细参见官方文档http://www.angularjs.cn/A00z。
1 //控制器 2 someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) { 3 $scope.aMethod = function() { 4 } 5 }]); 6 7 //工厂方法 8 angular.module('myModule', []). 9 config(['depProvider', function(depProvider){ 10 }]). 11 factory('serviceId', ['depService', function(depService) { 12 13 }]). 14 directive('directiveName', ['depService', function(depService) { 15 16 }]). 17 filter('filterName', ['depService', function(depService) { 18 19 }]). 20 run(['depService', function(depService) { 21 22 }]);
html5真机调试
以前在开发移动站点时，难免要在真机上调试。一直比较头疼的问题是不能审查页面元素、不能看到cookie、不能跟踪js等一系列问题。但随着需求的增强，google已解决了这个问题。
准备：chrome浏览器PC端最新版，USB数据线，android手机，能上google的网络环境（重要，否则会无限风火轮）。
步骤：手机与PC相连，开启USB调试模式，安装好驱动，先在手机上打开chrome浏览器，再在PC上打开chrome，输入chrome://inspect/#device。
点inspect即可真机调试，如果PC上一直出不出源码，就是因为被墙了，自行解决。有个这个功能后，开发与测试都很方便，所有按F12的功能跟PC版一样。
资源加载时间线
cookie
控制台
Laravel安装（windows环境）
Laravel框架是用composer（php包管理工具）管理代码的，所以安装前需要安装composer（当然也可以在官方网站上下载Laravel完整代码包）。
Composer安装：到http://www.phpcomposer.com/下载windows版的安装包，执行。
设置php的路径。
添加php与composer的路径到系统变量的path中。
php.ini中需要打开php_openssl.dll扩展。
composer安装完成。
下载laravel基础包，解压到web目录（G:wwwrootgulp-projsrclaravel-master）
已有一部分基础代码，但是不完整，还不能运行。然后在当前目录执行composer install下载框架需要的其他文件（包），耐心等待完成安装。完成后会发现目录中多了个vendor目录和composer.lock文件。然后在浏览器访问public对应的地址（生产代码目录）即可看到欢迎画面。
尝试开发：特别提醒，项目目录中有一个artisan文件，它是用php写的一个项目管理工具，可以用它快速的创建控制器、数据填充、数据库导入或迁移等。使用方法也很简单，如：
php artisan generate:model article
意思是创建一个名为article的模型，实际是自动生成这个文件app/models/Article.php，更多操作可参考http://lvwenhan.com/laravel/398.html，不再赘述。
完！