简单的前端开发环境搭建，举例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

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以太網驅動總結