響應式自動化開發流程-Windows 版

時間 2019-11-08

標籤響應自動化開發流程 windows 欄目測試自動化简体版

原文原文鏈接

響應式自動化開發流程-Windows 版

前言php

在WEB開發中，咱們一直在尋求更方便，快捷的方式，如今主要從以下幾個問題入手，學習一些入門級的自動化開發方案。css

一、 CSS壓縮；html

二、 JS壓縮；前端

三、 JS依賴包的管理；html5

四、各終端瀏覽器自動實時同步，解脫反覆手動刷新與清緩存工做，很是適合響應式開發；java

五、項目自動發佈。node

首先看下傳統的開發模式，從編碼、調試到發佈，要作若干反覆繁瑣的操做，長期以來，會浪費不少寶貴的時間，工做效率是很低的。jquery

　　不難看出，css與js的壓縮，須要安裝對應的工具，並且還有可能每次都要執行下對應的命令。每每開發目錄中還有不少輔助的文件或代碼，不但願推上線，因此在發佈時，還要費勁的去篩選拷貝最終的代碼到生產環境。linux

　　那麼有沒有一種方法，自動完成這些工做呢？曾經也任性的開發了一套自動化的工具，漠然回首，才發現已有不少高人發明了更先進的技術，與時俱進，也小試一把，幫助咱們提升工做效率。android

　　先不講空洞的概念，直接看下咱們要實現什麼樣的效果，能給咱們帶來什麼樣的好處。　　

　　（1）修改CSS，多瀏覽器同步實時刷新。

　　（2）修改後臺代碼，多瀏覽器同步實時刷新。

　　（3）多瀏覽器鏡像。

　　是否是很想親自嘗試一下？其實還遠不止這些功能，下面就詳細介紹如何搭建這樣一個環境。

一、NodeJS簡介與安裝

二、GULP的安裝與使用

三、BrowserSync同步調試

四、Bower簡介

五、AngularJS簡介

六、html5真機調試

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

　　下面簡單演示幾個最經常使用的功能

　　一、指令

　　二、數據雙向綁定

　　三、模板（相似artTemplate、jade等前端模板）

　　四、MVC（引入後端語言的MVC概念）

　　五、依賴注入（引入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   }]);