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

作者: dzut
发布时间:2015-07-10 14:22:26

响应式自动化开发流程-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文件,内容如下:

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\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文件中写入下面代码:

 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\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命令的效果。

 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\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...

数据双向绑定

 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:\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,不再赘述。 

  完!

标签: Windows 自动化
来源:http://www.cnblogs.com/dzut/p/4256572.html

推荐: