176 lines
5.7 KiB
Markdown
Executable File
176 lines
5.7 KiB
Markdown
Executable File
## 源码分析 - 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
|
||
}
|
||
}
|
||
```
|
||
|