5.7 KiB
Executable File
源码分析 - package.json
上面说过了，我们可以通过npm run all命令来运行框架。那么我们这边先从package.json开始分析，看看这行命令背后到底发生了哪些事情。
打开package.json你将看到下面这些代码：
"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探究一下：
// 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文件，你将看到以下源码：
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地址，是否自动打开浏览器等，具体配置信息如下：
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
}
}