first commit

Template/docs/code.md

@@ -0,0 +1,175 @@
+## 源码分析 - package.json
+
+---
+
+上面说过了，我们可以通过`npm run all`命令来运行框架。那么我们这边先从`package.json`开始分析，看看这行命令背后到底发生了哪些事情。
+
+打开`package.json`你将看到下面这些代码：
+
+```bash
+"scripts": {
+    "all": "node_modules/.bin/concurrently \" node_modules/.bin/node-dev app.js \" \"node_modules/.bin/gulp \" ",
+    "doc": "node_modules/.bin/docsify serve ./docs"
+}
+```
+
+1：all ：通过nodejs的 `concurrently` 模块来并发执行两条命令，其中`node-dev app.js`是用来启动`express`框架运行我们编译后产生的静态文件`dist/`。而`gulp`命令执行的是`gulpfile.js`中的默认任务`default`
+
+2：doc ：通过 `docsify` 来运行我们网站的帮助文档，这里没有什么好说的。
+
+---
+
+我们框架的关键逻辑在`all`命令背后，通过上面知道`all`命令运行后会并发执行`node-dev app.js`，我们打开项目根目录下的`app.js`探究一下：
+
+```js
+// express 框架部分
+const express = require('express')
+const app = express()
+// 站点配置
+const config = require('./config')
+// 工具函数，OpenBrowser 自动打开浏览器
+const { OpenBrowser } = require('./utils')
+// 核心，需要被 express 托管的静态资源文件路径，提供给前端访问静态页面
+app.use(express.static('./dist'))
+
+// 监听 1314 端口，运行网站
+app.listen(config.nodeService.port, () =>  OpenBrowser() );
+```
+
+这部分源码注释很详细也很简单，没什么可说的吧，一看就懂。
+
+
+我们的核心应该在`gulp`命令背后，打开`gulpfile.js`文件，你将看到以下源码：
+
+```js
+const gulp = require('gulp')
+// 编译jade文件为hrml
+const jade = require('gulp-jade')
+// 编译stylus文件为css
+const stylus = require('gulp-stylus')
+// 自动为css3属性加前缀
+const autoprefixer = require('gulp-autoprefixer')
+// 合并js，css文件
+const concat = require('gulp-concat')
+// 压缩css
+const cssmin = require('gulp-clean-css')
+// gulp 文件监听
+const watchPath = require('gulp-watch-path')
+// zip压缩
+const zip = require('gulp-zip')
+// 压缩js文件
+const uglify = require('gulp-uglify')
+// 处理gulp错误，防止程序报错终止
+const plumber = require('gulp-plumber')
+// 引入gulp的配置文件
+const config = require('./config/index.js')
+// 引入全局公共方法
+const { RemoveFile } = require('./utils')
+
+/**
+ * 编译jade为html
+ */
+gulp.task('jade', function() {
+    return gulp.src(config.jade.jadeTohtml)
+    .pipe(plumber({ errHandler: e => {
+        gutil.beep()
+        gutil.log(e)
+    }}))
+    .pipe(jade({
+        pretty: true
+    }))
+    .pipe(gulp.dest(config.jade.jadeTodist))
+})
+
+
+...
+
+/**
+ * 监听用户在 src/ 的所有文件操作
+ */
+gulp.task('file', function() {
+    gulp.watch(config.watch.watchFile, function(event) {
+        let paths = watchPath(event,'src/', 'Template/src/')
+        switch (event.type){
+            case 'deleted':
+                console.log('删除操作...')
+                RemoveFile(paths.srcFilename)
+            break
+            default:
+                console.log('其他操作...')
+                gulp.run('publicstyl','copyfont','pagestyl','jade','copyjs','copyimg','Online')
+            break    
+        }
+    })
+  })
+
+
+/**
+ * 默认先运行一次 编译过程
+ */
+gulp.run('publicstyl','copyfont','pagestyl','jade','copyjs','copyimg','Online')
+
+
+/**
+ * 执行file任务，当文件被操作后进行相关的编译过程
+ */
+gulp.task('default',['file'])
+```
+
+这边通过`gulp.watch`实现对`src/`文件夹进行监听，当用户修改被监听的`src/`文件夹里的文件后使用`gulp-watch-path`模块获得被修改文件的路径，然后判断`event.type`的操作类型，根据操作类型来进行对应的操作。
+
+1：如果是在`src/`文件夹中的删除操作，那么调用`utils/index.js`里的方法`RemoveFile()`同步去删除对应被编译后的文件。
+
+2：如果是其他操作例如修改，添加等，直接将进行重新编译输出到`dist/`中，保持在`src`中的修改被同步到`dist/`中。这一步就是我们最核心的页面逻辑了。其实也没什么，你会发现还是很简单的。
+
+## 源码分析 - src/
+
+---
+
+`src`文件夹中是前端工程师真正需要关心的源码部分。
+- 1： `assets`是静态资源的存放。
+- 2： `view`是页面的存放。
+- 3： `main/`文件夹中存放主要的页面，
+- 4： `public/`存放公共的页面组件，而`layout.jade`是页面的核心入口
+
+## 源码分析 - 配置/
+
+---
+
+你可以在网站的`config/index.js`文件来修改基本配置，做到设置端口，打开url地址，是否自动打开浏览器等，具体配置信息如下：
+
+```js
+module.exports = {
+    "jade":{
+        // jade -> html 需要监听转换的jade文件路径
+        "jadeTohtml": "./src/view/main/*.jade",
+        // html 输出的路径
+        "jadeTodist": "./dist/"
+    },
+    "styl":{
+        // 将 public/ 公共的 styl 文件直接编译在 dist/ 中生成对应的
+        "stylTocssPublic": "./src/assets/css/public/*.styl",
+        // 将 page/ 中 styl 编译合并
+        "stylTocssPage": "./src/assets/css/layout.styl",
+        // styl 转换完成后，需要将多个文件合并成一个的文件名
+        "stylToFileName":"main.css",
+        // css 输出的路径
+        "stylTodist":"./dist/css/"
+    },
+    "watch":{
+        // gulp 需要监听的文件路径，当我们在src修改源码时，gulp会动态编译输出到dist
+        "watchFile":"src/**/*"
+    },
+    "nodeService": {
+        // 访问ip
+        "host":"http://127.0.0.1:",
+        // 访问端口
+        "port": 1314,
+        // 提示信息
+        "log":"项目运行在:",
+        // 是否开始自动打开浏览器功能，取值：true，false
+        "isOpenBrowser": false
+    }
+}
+```
+