whtml/Template/docs/code.md

源码分析 - 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
    }
}