响应式自动化开发流程-Windows 版

响应式自动化开发流程-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\nodejs）加入path环境变量中。

　　同时，还自带了一个npm工具，npm是Node.js的模块依赖管理工具，相当于linux上的yum和apt-get。同样检查是否安装成功，后面会用到。

　　Nodejs安装完成，现在就可以简单看下NodeJS能做些什么。

　　在任意目录中新建一个demo.js文件，内容如下：

var http = require("http"); 
http.createServer(function(request, response) { 
    response.writeHead(200, {"Content-Type": "text/html"}); 
    response.write("Hello World"); 
    response.end();
}).listen(8080); 
console.log("nodejs start listen 8080 port!");

　　然后用命令行进入该目录，执行node demo.js，即看到如下效果：

　　不难发现用简单的几行js代码就创建了一个http服务器，类似apache、tomcat的功能。现在就应该对NodeJS有了个初步认识。

 GULP的安装与使用

　　定义：官方的解释为基于文件流的构建系统，就是对文件进行一系列的二次加工（如代码的压缩等，英文含义为一大口，狼吞虎咽，形象地暗示还能做很多事情）。gulp是一个命令，实质上就是Nodejs写的一个小工具。

　　安装前准备：在apache根目录中新建一个test空目录（D:\wwwroot\test），用cmd进入这个目录，并执行如下命令：

npm install -g gulp

　　-g参数表示全局安装，默认安装目录为C:\Users\Administrator\AppData\Roaming\npm。如图所示表示安装成功。

　　分析下gulp的本质：在安装目录中，就能看到这两个文件，功能就是用node执行一个nodejs代码。

　　上面%~dp0代表批处理所在的目录，也就是C:\Users\Administrator\AppData\Roaming\npm，继续找到上面的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\test），安装顺利完成就能看到自动生成了这些文件夹和对应代码。

　　这些gulp开头的目录就是它的工具集，下面就用它们来完成我们的自动化工作。

 　  准备工作基本完成，现在开始配置，让一个简单的自动化操作运转起来！

　　回到D:\wwwroot\test目录，新建2个目录，src用于存放项目所有源码，target用于存放最终发布的代码，再建一个gulpfile.js文件（相当于linux上的Makefile，固定名字）。然后向gulpfile.js文件中写入下面代码：

var gulp = require('gulp');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var tinylr = require('tiny-lr');
var server = tinylr();
var port = 1234;

gulp.task('default', function() {
    
});

gulp.task('css', function() {
    return gulp.src('src/*.css')      //压缩的文件
        .pipe(gulp.dest('target/css'))   //输出文件夹
        .pipe(minifycss());   //执行压缩
});

gulp.task('js', function() {
    return gulp.src('src/js/*.js')
        .pipe(concat('main.js'))    //合并所有js到main.js
        .pipe(gulp.dest('target/js'))    //输出main.js到文件夹
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(uglify())    //压缩
        .pipe(gulp.dest('target/js'));  //输出
});

// 监听任务 运行语句 gulp watch
gulp.task('watch',function(){
    server.listen(port, function(err){
        if (err) {
            return console.log(err);
        }

        // 监听css
        gulp.watch('./src/scss/*.scss', function(){
            gulp.run('css');
        });

        // 监听js
        gulp.watch('./src/js/*.js', function(){
            gulp.run('js');
        });
        
    });
    
});

　　代码一开始就是一大堆变量的申明，其中require("module")就是nodejs加载模块的函数，module为模块名，其路径可以是相对，也可以是绝对路径。由此得出，前面的npm install其实就是安装这里需要的模块。

　　体验成果：执行该命令gulp watch，表示启动监听这个任务规则，其中"watch"类似Makefile中的目标规则，因此，也可单独执行gulp css表示把css压缩到target目录，如果不带参数，则默认执行"default"规则。激动人心的时刻即将到来！

　　这样，gulp就已经在自动监听我们的相关行为，并可自动完成一系列事情了。

　　体验：在目录D:\wwwroot\test\src\js中新建test.js，随便写一段代码，保存，gulp就能实时监听到，在D:\wwwroot\test\target\js目录生成一份压缩过的main.min.js文件。

　　通过修改配置文件，还能监听所有文件的变化，然后执行相关的操作。

 

 BrowserSync同步调试

　　随着移动终端的普及，html5的开发已不仅仅局限于单一设备，尤其是响应式的应用，多设备兼容调试，如果再用传统的方式，可能会显得力不从心，于是前人为我们寻找了一种一劳永逸的模式。有了上面的基础，就可以实现前言中动画所展示的效果了。

　　首先是安装。中途可能报错，可以暂时不管。

npm install -g browser-sync

　　部署：在D:\wwwroot\gulp_test\src目录中建一个index.html文件，然后cmd命令在该目录（D:\wwwroot\gulp_test\src）执行下面命令。

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\test目录，编辑gulpfile.js文件，加入黄色背景的代码，就能实现上面单独执行broswer-sync命令的效果。

var gulp = require('gulp');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var tinylr = require('tiny-lr');
var server = tinylr();
var port = 1234;

// browser-sync
var browserSync = require('browser-sync');

gulp.task('default', function() {
    
});

gulp.task('css', function() {
    return gulp.src('src/*.css')      //压缩的文件
        .pipe(gulp.dest('target/css'))   //输出文件夹
        .pipe(minifycss());   //执行压缩
});

gulp.task('js', function() {
    return gulp.src('src/js/*.js')
        .pipe(concat('main.js'))    //合并所有js到main.js
        .pipe(gulp.dest('target/js'))    //输出main.js到文件夹
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(uglify())    //压缩
        .pipe(gulp.dest('target/js'));  //输出
});

// 监听任务 运行语句 gulp watch
gulp.task('watch',function(){
    server.listen(port, function(err){
        if (err) {
            return console.log(err);
        }

        // 监听css
        gulp.watch('./src/scss/*.scss', function(){
            gulp.run('css');
        });

        // 监听js
        gulp.watch('./src/js/*.js', function(){
            gulp.run('js');
        });
        
    });
    
    // 实时同步到浏览器
    browserSync.init(['target/css/*', 'target/js/*', 'target/*.*'], {
        /* 静态服务
        server: {
            baseDir: "target"
        }
        */
        
        // 代理模式
        proxy: "bs.test.com"
    });
    
});

　　　然后在该目录中执行gulp watch，自动化响应式调试环境就搭好了，尽情体验它为我们带来的方便吧！

 

Bower简介

　　bower是js依赖管理工具，能自动帮我们下载适合版本的js库，如jquery、bootstrap等。

　　安装：通过npm安装。

npm install -g bower

　　使用：进入D:\wwwroot\test\src目录，以安装jquery与bootstrap为例，依次输入命令。

bower install jquery
bower install bootstrap

 

 　　成功后就能在D:\wwwroot\test\src目录中自动生成bower_components目录，里面又有jquery和bootstrap2个目录，这就是bower帮我们下载的源码，就可以直接在自己的工程中使用。如果想升级，执行bower update，想卸载，执行bower uninstall jquery或bower uninstall bootstrap即可。更命令可参考官方文档。

 AngularJS简介

 　　AngularJS是一个js框架，它能提供模板、数据绑定和UI组件以及单元测试，为开发带来很大的方便，同时由于大部分工作可以交给前端处理，这样减轻了服务器端的压力。当然，任何事物都有利有弊，如果用AngularJS开发的话，由于大部分html元素都是js输出，同时它会绑定大量监听事件，导致性能下降。而且不利于SEO优化，因此，要根据实际情况选用。下面简单了解下，会用即可。

　　安装：进入D:\wwwroot\test\src通过bower安装，在项目中就可以直接引用bower_components\angular\angular.min.js这个文件。

bower install angularjs

　　下面简单演示几个最常用的功能

　　1、指令

　　2、数据双向绑定

　　3、模板（类似artTemplate、jade等前端模板）

　　4、MVC（引入后端语言的MVC概念）

　　5、依赖注入（引入java中的概念）

指令

　　AngularJS特有的DOM属性，简单理解为ng-前缀的属性，如ng-model、ng-bind、ng-init...

数据双向绑定

<!--注意地方：可以不写，但一定要有ng-app属性表示作用域-->
<div ng-app="">
    <script src="bower_components/angularjs/angular.min.js"></script>
    <select ng-model="sex">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <p ng-bind="sex"></p>
    
    <p>姓名：<input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

　　操作表单控件时，对应的值立即呈现到了页面上，该功能用于表单验证之类的功能很方便。更多用法参考官方文档。

 模板

　　index.html

<script src="bower_components/angularjs/angular.min.js"></script>

<div ng-app="" ng-init="points=[1,15,19,2,40]">
    <!--数组-->
    <p>points[3] = {{ points[2] }}</p>
    
    <!--循环-->
    <li ng-repeat="x in [1,2,3]">
        {{ x }}
    </li>
</div>

　　这里只展示简单的用法，有个初步的印象，更多的请查阅相关文档。

 MVC

　　index.html

<a href="#news">新闻中心</a>

<!--ng-app表示MVC作用域-->
<div ng-app="myapp">
    <div ng-view><!--这里是显示模板的地方--></div>
</div>

<script src="bower_components/angularjs/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script>
var app = angular.module('myapp', ['ngRoute']);

// 模板与控制器映射
app.config(['$routeProvider',function ($routeProvider) {
    $routeProvider
        .when('/news', {
            templateUrl: 'list.html',
            controller: 'NewsControl'
        })
        .when('/news/:id', {
            templateUrl: 'detail.html',
            controller: 'NewsListControl'
        })
        .otherwise({
            //redirectTo: '/list' 默认跳转到
        });
}]);

// 控制器
app.controller('NewsControl',function($scope) {
    console.log('新闻列表');
});

app.controller('NewsListControl',function($scope, $routeParams) {
    //$scope为模板对象，$routeParams为接收的参数对象{"id": "10"}
    $scope.news_id = $routeParams.id;
});
</script>

　　list.html

<ul>
    <li ng-repeat="id in [1, 2, 3 ]">
        <a href="#/news/{{ id }}"> 新闻{{ id }}</a>
    </li>
</ul>

　　detail.html

1 新闻{{news_id}}的详细内容。

　　注意上面黄色背景的地方不能遗漏。MVC中的路由已单独模块的方式加载，使用前需要bower install angular-route。运行下效果如下，注意地址栏#号后面的变化，就是对应路由调用的对应控制器。

 

依赖注入

　　依赖注入在AngularJS中很普遍。一般用在控制器和工场方法中，通常写法如下。详细参见官方文档http://www.angularjs.cn/A00z。

//控制器
someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
  $scope.aMethod = function() {
  }
}]);

//工厂方法
angular.module('myModule', []).
  config(['depProvider', function(depProvider){
  }]).
  factory('serviceId', ['depService', function(depService) {
  
  }]).
  directive('directiveName', ['depService', function(depService) {
   
  }]).
  filter('filterName', ['depService', function(depService) {
    
  }]).
  run(['depService', function(depService) {
    
  }]);

　　

 

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:\wwwroot\gulp-proj\src\laravel-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，不再赘述。 

　　完！