前端项目解析

1、package.json：有了package.json文件，直接使用npm install命令，就会在当前目录中安装所需要的模块。

      文件内部就是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。比如name就是项目名称，version是版本。

{  "name" : "xxx",  "version" : "0.0.0",}

           scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。

"scripts": {    "preinstall": "echo here it comes!",    "postinstall": "echo there it goes!",    "start": "node index.js",    "test": "tap test/*.js"}

          

      dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。

{  "devDependencies": {    "browserify": "~13.0.0",    "karma-browserify": "~5.0.1"  }}             

2、nodemon.json:自动重启项目工程,对一些文件进行自动忽略，监听，对子进程事件进行控制等。

 1 { 2     "restartable": "rs", 3     "ignore": [ 4         ".git", 5         "node_modules/**/node_modules" 6     ], 7     "verbose": true, 8     "execMap": { 9         "": "node"10         "js": "node --harmony"11     },12     "events": {13         "restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'"14     },15     "watch": [16         "test/fixtures/",17         "test/samples/"18     ],19     "env": {20         "NODE_ENV": "development",21         "PORT": "3000"22     },23     "ext": "js json",24     "legacy-watch": false25 }

3、nginx.conf:Nginx是Apache服务器不错的替代品。

          server虚拟主机配置:

1234567

server{listen          80;server_name    192.168.8.18  cszhi.com;index index.html index.htm index.php;root  /wwwroot/www.cszhi.comcharset gb2312;access_log  logs/www.ixdba.net.access.log  main;

        server标志定义虚拟主机开始，listen用于指定虚拟主机的服务端口，server_name用来指定IP地址或者域名，多个域名之间用空格分 开。index用于设定访问的默认首页地址，root指令用于指定虚拟主机的网页根目录，这个目录可以是相对路径，也可以是绝对路径。Charset用于 设置网页的默认编码格式。access_log用来指定此虚拟主机的访问日志存放路径，最后的main用于指定访问日志的输出格式。

             location URL匹配配置:

1234

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$  {                root    /wwwroot/www.cszhi.com;               expires 30d;        }

1234

 location ~ ^/(upload|html)/  {        root    /web/wwwroot/www.cszhi.com;        expires 30d;        }

1234

location ~ .*.php$ {    index index.php;    proxy_pass http://localhost:8080;}

.bmp、.swf结尾的静态文件都交给nginx处理，而expires用来指定静态文件的过期时间，这里是30天。将upload和html下的所有文件都交给nginx来处理，当然，upload和html目录包含在/web/wwwroot/www.cszhi.com目录中。location是对此虚拟主机下动态网页的过滤处理，也就是将所有以.jsp为后缀的文件都交给本机的8080端口处理。

4、.gitlab-ci.yml：进行持续集成。每次提交代码或者合并 MR 都会自动运行构建任务了。就是在定义 Pipeline 而已拉！而一次 Pipeline 其实相当于一次构建任务，里面可以包含多个流程，如安装依赖、运行测试、编译、部署测试服务器、部署生产服务器等流程。

       

# 定义 stagesstages:  - build  - test# 定义 jobjob1:  stage: test  script:    - echo "I am job1"    - echo "I am in test stage"# 定义 jobjob2:  stage: build  script:    - echo "I am job2"    - echo "I am in build stage"

Stages 表示构建阶段，说白了就是上面提到的流程。我们可以在一次 Pipeline 中定义多个 Stages，这些 Stages 会有以下特点：

• 所有 Stages 会按照顺序运行，即当一个 Stage 完成后，下一个 Stage 才会开始

• 只有当所有 Stages 完成后，该构建任务 (Pipeline) 才会成功

• 如果任何一个 Stage 失败，那么后面的 Stages 不会执行，该构建任务 (Pipeline) 失败

Jobs 表示构建工作，表示某个 Stage 里面执行的工作。我们可以在 Stages 里面定义多个 Jobs，这些 Jobs 会有以下特点：

• 相同 Stage 中的 Jobs 会并行执行

• 相同 Stage 中的 Jobs 都执行成功时，该 Stage 才会成功

• 如果任何一个 Job 失败，那么该 Stage 失败，即该构建任务 (Pipeline) 失败

build 阶段要在 test 阶段之前运行，所以 stage:build 的 jobs 会先运行，之后才会运行 stage:test 的 jobs。

5、.gitignore 配置文件用于配置不需要加入版本管理的文件，配置好该文件可以为我们的版本管理带来很大的便利

1、配置语法：

　　以斜杠“/”开头表示目录；

　　以星号“*”通配多个字符；

　　以问号“?”通配单个字符

　　以方括号“[]”包含单个字符的匹配列表；

　　以叹号“!”表示不忽略(跟踪)匹配到的文件或目录；

　　

　　此外，git 对于 .ignore 配置文件是按行从上到下进行规则匹配的，意味着如果前面的规则匹配的范围更大，则后面的规则将不会生效；

2、示例：

　　（1）规则：fd1/*
　　　　  说明：忽略目录 fd1 下的全部内容；注意，不管是根目录下的 /fd1/ 目录，还是某个子目录 /child/fd1/ 目录，都会被忽略；

　　（2）规则：/fd1/*
　　　　  说明：忽略根目录下的 /fd1/ 目录的全部内容；

　　（3）规则：

/*
!.gitignore
!/fw/bin/
!/fw/sf/

说明：忽略全部内容，但是不忽略 .gitignore 文件、根目录下的 /fw/bin/ 和 /fw/sf/ 目录；

6、eslintrc:在团队协作中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。

             

• 默认规则包含所有 JSLint、JSHint 中存在的规则，易迁移；
• 规则可配置性高：可设置「警告」、「错误」两个 error 等级，或者直接禁用；
• 包含代码风格检测的规则（可以丢掉 JSCS 了）；
• 支持插件扩展、自定义规则。

{  "env": {    "browser": true,  },  "globals": {    "angular": true,  },  "rules": {    "camelcase": 2,    "curly": 2,    "brace-style": [2, "1tbs"],    "quotes": [2, "single"],    "semi": [2, "always"],    "space-in-brackets": [2, "never"],    "space-infix-ops": 2,  }}

.eslintrc 放在项目根目录，则会应用到整个项目；如果子目录中也包含 .eslintrc 文件，则子目录会忽略根目录的配置文件，应用该目录中的配置文件。这样可以方便地对不同环境的代码应用不同的规则。

7、babelrc:它可以让你放心使用大部分的JavaScript的新的标准的方法，然后编译成兼容绝大多数的主流浏览器的代码。

            预设(presets):使用的时候需要安装对应的插件，对应babel-preset-xxx，例如下面的配置，需要npm install babel-preset-es2015。

                              {"presets": ["es2015"]}

              

           插件(plugins):

                             {"plugins": ["transform-es2015-arrow-functions"]}

 

8、zepto.js:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。Zepto是为现代智能手机浏览器推出的

Javascript 框架, 有和jQuery相似的语法

$():与jQuery的$()几乎一样,但zepto的选择器是直接使用的原生querySelectorAll(),所以,一些jQuery自定义的选择器是不支持的,但可以添

加selector.js模块来添加10个常用的伪类选择器;

add():支持一到二个参数,第一个为选择器,与$()的规则相同,甚至是,第一个参数传进去一个function,它也会正确执行.