簡單的前端開發環境搭建，舉例Grunt Bower、Requirejs 和Angular

目前網上關於搭建一個前端環境的方法很多，我這裏總結合並，並根據自己的實際搭建情況簡單介紹一下。

搭建一個簡單的前端開放環境，由於各個公司各個業務的不同，選取的框架都不一樣，環境搭建要依據實際情況來操作。

最近恰好公司開發新項目，後端選擇使用Scala，我們都知道，一般會選擇sbt對scala代碼進行編譯、測試、打包等。但它明顯不擅長處理有關前端的任務，前端一些常見的任務，如js庫的下載和管理、css文件的轉換、js文件合併壓縮、js測試的執行等，很難在sbt中找到好用的插件，所以這裏我打算搭建一個前端的開發環境。

先介紹一下這次搭建的幾個主角：

Grunt – Js任務管理工具。相當於scala中的sbt。

Bower – Js庫依賴管理工具。比如：當你需要jquery時，不需要手動下載，只需要執行bower install jquery

RequireJs – Js庫加載管理，及模塊化支持。可以按需及並行加載js庫，可以把我們的代碼以模塊化的方式組織。

AngularJs – Js前端框架，支持依賴注入，雙向綁定等我認爲很重要的功能。

這幾套東西目前用的比較廣泛，配套資源完善，較爲成熟，可行性較大。

對了，這裏提一下，我這裏的操作都是緊接這我上次搭建好的grunt環境繼續進行的，你可以先進行grunt環境的搭建：

參考這裏：http://blog.csdn.net/lensgcx/article/details/53996589

好了，現在我們按部就班開始搭建前端環境。

一、安裝nodejs

下載地址：https://nodejs.org/en/

在下載nodejs時候，應注意：1.最新版本的儘量別用，2.奇數版本號的版本被認爲是不穩定的開發版，不過從官網上下載下來的應該都是偶數的穩定版。

本例子，nodejs的版本爲：node-v4.4.5-x64

安裝時，點擊下一步到底即可。

安裝完成後，在制臺中輸入“node -v”來查看nodejs的版本，也順便試驗nodejs是否安裝成功。

npm -v

二、搭建一個項目

按照下圖建立一個文件項目

三.安裝msysgit

在安裝bower之前，我們需要安裝msysgit（windows系統下）。

爲什麼要安裝git？因爲bower管理的包的源碼都是託管在github網站上，我用的是win7.1，所以這裏要安裝git for windows，

下載地址：https://git-for-windows.github.io/

下載好之後，安裝，下一步到底，注意下圖選擇中間選項，然後把它安裝好。

四.安裝bower

bower 跟 npm 在某種意義上相似，它是用來管理常用的js庫的依賴的，比如jquery, underscore, angularjs等。

我們可以通過npm安裝它，把它裝爲全局工具，輸入：

npm install bower -g

五：爲bower生成配置文件bower.json

這裏我們簡單一點配置，bower也有它自己的配置文件bower.json，我們不需要手動創建。在控制檯對應路徑輸入：

bower init

然後一路回車到底，然後確定

 "name": "template",
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
}

六：下載requirejs、jquery、angularjs、underscore

這裏我們先通過控制器進入項目文件下，然後輸入：

bower install angularjs --save-dev

bower install angularjs --save-dev

bower install jquery underscore --save-dev

將會自動下載jquery，require等，放到angularjs相應的文件，到項目根目錄下的bower_components目錄。打開bower.json，你會發現裏已經添加：

"dependencies": {
  "angularjs": "~1.2.20",
  "jquery": "~2.1.1",
  "requirejs": "~2.1.14"
}

這裏注意：

安裝過程中可能報錯，我們可先在控制檯輸入：

git config --global url."https://".insteadOf git://

然後在重新安裝一下

七、安裝grunt-bower-task

bower只負責把依賴下載到本地的bower_components目錄，然後我們會發現，下載下來的一個文件裏面有很多的我們不需要的，如何把我們需要的相關內容提煉出來，放到我們項目實際指定的目錄下，比如template/js/lib目錄下，這裏我們就要用到這個插件。

npm install grunt-bower-task --save-dev

打開Gruntfile.js，在裏面添加：

bower: {
   install: {
      options: {
         targetDir: './src/js/lib',/*拷貝bower默認安裝包(自動過濾不必要的文件夾)到你指定的文件夾中*/
         layout: 'byType',  /*有兩種形式:byType 和 byComponent，兩者的區別就是生成的目錄結構不一致，
                        當然也可以自定義函數*/
         install: true,/*是否需要執行安裝(基於bower.json)*/
         verbose: false,
         cleanTargetDir: false,//在安裝bower依賴管理之前是否清除targetDir
         cleanBowerDir: false,//在拷貝需要文件到指定的目錄的時候是否需要清除bower默認安裝文件夾(bower_components)
         bowerOptions: {}
      }
   }
},

這裏附上一張有關參數的解釋表：

參數	類型	默認值	解釋
targetDir	String	./lib	拷貝bower默認安裝包(自動過濾不必要的文件夾)到你指定的文件夾中
install	Boolean	true	例如：當你執行grunt bowercopy的時候，是否需要執行安裝(基於bower.json)
cleanTargetDir	Boolean	false	在安裝bower依賴管理之前是否清除targetDir
cleanBowerDir	Boolean	false	在拷貝需要文件到指定的目錄的時候是否需要清除bower默認安裝文件夾(bower_components)
copy	Boolean	true	拷貝bower安裝包到指定的目錄
cleanup	Boolean	undefined	如何設置爲true或者是false的時候就會自動設置cleanTargetDir和cleanBowerDir是否清除
layout	Boolean 或 Function	byType	有兩種形式:byType 和 byComponent，兩者的區別就是生成的目錄結構不一致，當然也可以自定義函數
verbose	Boolean	false	官網解釋是可以拷貝輸出類庫的測試,測試一下感覺沒有什麼變化
bowerOptions	Object	{}	設置一些默認的項 { forceLatest: true\|false, production: true\|false, }

在Gruntfile.js下方位置添加：

grunt.loadNpmTasks('grunt-bower-task');

八、簡單介紹配置RequireJs

RequireJs可用來管理頁面中使用的js庫之間的依賴關係，可以按需、並行、延遲加載js庫。同時它可以讓我們以模塊化的形式組織js代碼。前面我們第三方的依賴，通過grunt-bower-task拷貝到了template/js/lib目錄下。我們自己寫的js，將會放置在template/js目錄下。我們需要手動創建一個config.js文件，用來配置和初始化requirejs。

1、建立hello.js文件

我的hello.js文件是放在template/js下的，在裏面寫入：

/**
 * Created by 西蘭花的春天 on 2017/1/6.
 */
define([], function() {
   return {
      hello: function() {
         console.log("hello, requirejs,my name is ‘西蘭花的春天’);
         console.log(bye);
      }
   }
});

2、建立bye.js文件

我的bye.js文件是放在template/js下的，在裏面寫入：

/**
 * Created by 西蘭花的春天 on 2017/1/6.
 */
var  bye = "see you again.";

3、建立index.html文件

在裏面寫入如下內容：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>hello</title>
   <script src="src/js/lib/requirejs/require.js"
         data-main="src/js/config.js"></script>
</head>
<body>
   <div style="margin: 50px">
      <div>你好，我叫西蘭花的春天</div>
   </div>
</body>
</html>

頭部引入：

<script src="src/js/lib/requirejs/require.js" data-main="src/js/config.js"></script>

這裏首先加載了require.js，並通過data-main屬性告訴requirejs：當你加載完以後，請加載config.js文件進行初始化。

4、建立config.js文件（載入程序主模塊）

我這裏的config.js文件是放在template/js下的，寫入如下內容：

/**
 * Created by 西蘭花的春天 on 2017/1/6.
 */
requirejs.config({
   baseUrl: 'src/js',
   paths: {
      hello: 'hello',
      jquery: 'lib/jquery/jquery',
      angular: 'lib/angular/angular',
      require: 'lib/requirejs/require'
   },
});
requirejs(['hello','bye'], function(hello) {
   hello.hello();
});
);

我在paths中聲明瞭幾個模塊，其中的hello是我們自己創建的js文件，用於放我們自己的業務代碼，它對應於/template/js/hello.js. jquery，require與angular對應的文件是我們使用grunt-bower-task 拷貝過來的第三方js庫。

shim中用來處理一些沒有遵守requirejs規範的js庫，比如underscore之類。可在裏面對它們進行一些依賴聲明、初始化操作等。這裏暫時用不上。

最後用requirejs來導入我們自己的模塊，可在後面的callback中拿到對應模塊的實例，並對它進行一些操作，比如我們調用了hello.hello()方法。

這裏解釋一下：

requirejs(['hello','bye'], function(hello) {
  hello.hello();
});

簡單點的表述爲：

require() 函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊，上例就是 ['hello', 'bye'] ，即主模塊依賴這二個模塊，並且 hello.js 是依賴與bye.js 的；第二個參數是一個回調函數（即：hello.hello（）），當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊。

在 paths 中，我們聲明瞭一個名爲 hello 的模塊，以及它對應的 js文件地址。在最理想的情況下，hello.js的內容，應該使用requirejs 的方式來定義模塊：

define(['angular'], function(angular) {
   angular.module('myApp', [])
      .controller('MyController', ['$scope', function ($scope) {
         $scope.name = 'Change the name';
      }]);
   angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
   });
});

這裏的 define 是requirejs提供的函數。requirejs 一共提供了兩個全局變量：

requirejs/require: 用來配置requirejs及載入入口模塊。如果其中一個命名被其它庫使用了，我們可以用另一個
define:定義一個模塊。

這裏就不具體展開了，有興趣可以看一下：

http://www.oschina.net/translate/getting-started-with-the-requirejs-library

https://zhuanlan.zhihu.com/p/22775050

http://www.tuicool.com/articles/jam2Anv

https://www.npmjs.com/package/bower-require

5、啓動 web server

進入項目根目錄，運行：

grunt bower

或者

grunt

把bower下載的js庫拷貝到template/js/lib下。

然後啓動web server:

python -m SimpleHTTPServer

這裏沒有下載配置python的，點擊這裏：https://www.python.org/downloads/

安裝好之後，在環境變量里加上相關路徑，然後就好了（有些情況下，要重啓計算機）

最後打開瀏覽器，我這裏是本地服務器xamp下的，訪問：

http://localhost/template/

如果一切正常的話，控制檯會有信息，上面有 2條console.log信息，分別爲：

hello, requirejs,my name is ‘西蘭花的春天’

see you again.

九、配置Angularjs

我們做一個簡單的angular的例子。由於 angularjs 並不是按 requirejs 的模塊方式組織代碼的，我們需要在config.js中添加：

在index.html中添加angular代碼

shim: { angular : { exports : 'angular'}}

Angularjs 會在全局域中添加一個名爲angular的變量。我們必須在shim中顯式把它暴露出來，才能通過模塊注入的方式使用它，比如：

define(['angular_test'], function(ng) {
   // we can use argument `ng` instead of gloabl `angular` now
});

在index.html中加入如下代碼：

<div style="margin: 50px">
   <div>你好，我叫西蘭花的春天</div>
   <br>
   <span>你的姓名：</span>
   <div ng-controller="MyController">
      <input type="text" ng-model="name" />
      <span id="template1"  class="ng-cloak">{{name}}</span>
   </div>
</div>

接下來，我們要準備相應的controller。

在 template/js 目錄下建立一個 angular_test.js 文件。

然後在裏面添加內容：

/**
 * Created by 西蘭花的春天 on 2017/1/6.
 */
define( [ 'angular' ], function( angular )
{
   angular.module( 'yourName', [] )
      .controller( 'MyController', [ '$scope', function( $scope )
      {
         $scope.name = 'Input your name';
      } ] );

   angular.element( document ).ready( function()
   {
      angular.bootstrap( document, [ 'yourName' ] );
   } );
} );

在這段代碼裏，我定義了一個angularjs自己的模塊yourname，以及相應的MyController。在後面，通過angular.bootstrap方法，把該模塊與document結合在了一起。

在瀏覽器中輸入地址：

http://localhost/template/

就可以看到效果了。當我們修改了頁面上輸入框裏的內容，它旁邊的文字也會跟着改變。

十、修改angularjs的佔位符

在html中顯示angularjs裏的一個字段時，我們使用{{}}來佔位，比如：

<span>{{name}}</span>

如果我們同時使用了mustcahe （介紹：http://www.iinterest.net/2012/09/12/web-template-engine-mustache/）模板，就會有衝突。我們可以更改 angularjs 的配置：

angular.module('myApp', []).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('[[').endSymbol(']]');
    }
);

然後我們就可以寫成：

<span>[[name]]</span>

十一、後記

這個搭建的環境是比較基礎的，也算可以入個門，實際項目開發環境的搭建還有很多需要更改完善的地方。

我們搭建好grunt，然後安裝bower包管理系統，npm下載的組件放在bower_components目錄下，我們通過bower-task組件吧下載的文件包裏面的核心文件（項目需要的）copy移動到我們制定的項目文件下，然後再通過require()異步加載js模塊，這過程中，瀏覽器不會失去響應；只有前面的模塊都加載成功後，它指定的回調函數纔會運行，這也解決了js模塊的依賴性的問題。

同時在grunt下，做到了自動化監控文件變化，實時進行壓縮打包混淆相關文件到指定目錄，方便我們在項目中調用。

簡單的前端開發環境搭建，舉例Grunt Bower、Requirejs 和Angular

這裏注意：

七、安裝grunt-bower-task

九、配置Angularjs

詐騙（殺豬盤）網站進行滲透測試

Python 潮流週刊#50：我最喜歡的 Python 3.13 新特性！

外行也能讀懂的網絡硬件設備功能原理速成

trumbowyg 超級輕量級文本編輯器使用說明

簡單的前端開發環境搭建，舉例Grunt Bower、Requirejs 和Angular

前端必看 grunt搭建自動化的web前端開發環境

前端json格式的介紹，轉換以及解析

前端json的簡介，轉換和解析

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結