多人博客网站第一版上线啦，欢迎围观，吐槽

网站地址

代码开源地址

时间大概是在两年前吧，那时候刚接触到 nodejs，立志成为一名优秀全栈攻城狮的我，心心念着得有一个属于自己的网站。于是说干就干，一边学着一边捣鼓的各种花样。

曾梦想仗剑走天涯，然而后面因为工作忙就没去成，我的这个网站也因为各种原因迟迟没能上线，这其中也做过了好几个版本，一开始是前后端分离的，前端使用 angularjs（后面又改成了 vue），后端是 nodejs + mongodb，等这一版的也差不多做好的时候，感觉不是自己想要的样子，所以也就没上线。到后面觉得 golang 好玩，又去用它写了一些后端的接口。

到了今年三月份的时候，终于发现网站这个目标确实是拖了很长时间了。抽时间好好想了下自己想要做什么，决定抛弃之前的那套代码，不用自己比较熟悉的 前后端分离，vue 等技术，而使用 ejs 模板渲染，nodejs 的 Sequelize orm 库，使用 session 而不是 jwt 来持久化用户登录等。

代码基本上是晚上抽时间写的，后面因为加班，也停了一段时间。中途如果遇到一些问题，有时候进度也会耽搁个几天。再加上一些设计以及前端展示上的修修补补，导致整个项目也是花了比较长的时间。好在是一个萝卜一个坑的慢慢踩了过来，现在觉得网站终于可以上线了，后面要做的工作就是完善网站的一些没有功能（包括后端的管理界面等），修改一些的实现方式（准确的说就是优化代码），以及更重要的是丰富网站内容，也就是写博客记录一些成长路上的风景吧。

到此为止，废话也不多说了，代码也开源到了GitHub上，有兴趣的朋友可以去围观一下，欢迎 start，也欢迎在 issue 里提出，指正各种问题。

说一下项目的运行方式吧，首先要 nodejs 环境，需要全局安装 gulp、nodemon 等包，然后数据存储使用的 mysql + redis。等环境准备好了之后，就需要添加一些配置文件，比如在 config/env/ 下创建 development.js 文件，里面需要提供发邮箱的邮件地址，以及 github 第三方登录的 clientID 等。

module.exports = {
	email: {
		account: '',
		pwd: ''
	},
    github: {
        clientID: '',
        clientSecret: '',
        callbackUrl: ``
    }
};

接下来就是安装开发运行所需要的各种依赖包吧，跑一下 yarn install 就行了，这个过程可能需要花个几分钟时间。
等到所有的包都安装完毕后，直接跑 npm start 命令，看到 终端上显示 所有的 gulp 任务 finished，Server is running at port 3000 的时候，就可以打开浏览器访问 localhost:3000 了。
接下来贴上一些项目里面的代码吧，如果上不了首页就悲剧了。

require('dotenv').config()

const express = require('express')
const passport = require('passport')
const models = require('./config/db/model')
const port = process.env.PORT

const app = express()

require('./config/passport')(passport)
require('./config/express')(app, passport)
require('./config/routes')(app, passport)

models
    .sequelize
    .sync()
    .then(() => {
        app.listen(port, () => {
            console.log(`Server is running at port ${port}`)
        })
    })

module.exports = app

 

Gulp 的打包配置

// vinyl 是一个简单的描述文件的元数据对象
// https://github.com/gulpjs/vinyl
const path = require('path')
const gulp = require('gulp')
const del = require('del')
const glob = require('glob')
const babelify = require('babelify')
const runSequence = require('run-sequence')
const plumber = require('gulp-plumber')
const notify = require('gulp-notify')
const gulpif = require('gulp-if')
const sass = require('gulp-sass')
const debug = require('gulp-debug')
const cached = require('gulp-cached')
const remember = require('gulp-remember')
const autoprefixer = require('gulp-autoprefixer')
const sourcemaps = require('gulp-sourcemaps');
const size = require('gulp-size');
const cssnano = require('gulp-cssnano')
const uglify = require('gulp-uglify')
const rename = require('gulp-rename')
const htmlmin = require('gulp-htmlmin')
const imagemin = require('gulp-imagemin')
const browserify = require('browserify')
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const rev = require('gulp-rev');
const watchify = require('watchify')
const lazypipe = require('lazypipe')
const revCollector = require('gulp-rev-collector');
const es = require('event-stream')
const argv = require('yargs').argv

// 将打包后的静态资源 放到nginx服务器上
const bundleAssetsDir = argv.build_mode === 'deploy' && argv.assets_path ? argv.assets_path : './public/static/'
const jsAssetsDir = path.join(bundleAssetsDir, 'js')
const cssAssetsDir = path.join(bundleAssetsDir, 'css')
const imgAssetsDir = path.join(bundleAssetsDir, 'image')
const revAssetsDir = path.join(bundleAssetsDir, 'rev')
const htmlAssetsDir = path.join('./app/view')

const AUTOPREFIXER_BROWSERS = [
    'ie >= 10',
    'ff >= 30',
    'chrome >= 34',
    'safari >= 7',
    'opera >= 23'
];

const jsChannel = lazypipe()
    .pipe(uglify)
    .pipe(gulp.dest, jsAssetsDir)

let watch = false

function getEntryFiles (path, option) {
    return glob.sync(path, option)
}

/**
 * 打包js任务
 * @param {Object} bundle 各入口文件的browserify对象
 * @param {string} filename 入口文件名
 * @return {stream} stream 对象
 */
function jsTask ({ bundle, filename }) {
    return bundle
    .bundle()
    .pipe(plumber({
        errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(source(filename))
    // 代替 gulp-streamify，来转换 vinyl 流
    .pipe(buffer())
    .pipe(rename({ dirname: '' }))
    .pipe(sourcemaps.init())
    .pipe(debug({ title: 'script' }))
    .pipe(size({ title: 'script' }))
    .pipe(sourcemaps.write(''))
    .pipe(gulp.dest(jsAssetsDir))
}

/**
 * 如果一个文件被删除了，则将其忘记
 * @param {*} event
 */
function watchDel (event) {
    if (event.type === 'deleted') {
        // gulp-cached 的删除 api
        delete cached.caches.scripts[event.path]
        // gulp-remember 的删除 api
        remember.forget('scripts', event.path)
    }
}

gulp.task('style', () => {
    return gulp.src('./src/scss/*.scss')
        .pipe(plumber({
            errorHandler: notify.onError('Error: <%= error.message %>')
        }))
        // .pipe(cached('style-task'))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(cssnano({
            // 不修改 z-index
            safe: true
        }))
        .pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
        .pipe(debug({ title: 'style' }))
        // .pipe(remember('style-task'))
        .pipe(size({ title: 'style' }))
        .pipe(sourcemaps.write(''))
        .pipe(gulp.dest(cssAssetsDir))
})

gulp.task('script', () => {
    let entryJs = getEntryFiles('./src/js/*.js')
    let bundleTasks = entryJs.map(filename => {
        const bundle = browserify({
            entries: [filename],
            cache: {},
            packageCache: {},
            plugin: [watch ? watchify : null],
            transform: babelify
        })
        if (watch) {
            bundle.on('update', function () {
                jsTask.call(null, { bundle, filename })
            })
        }
        return { bundle, filename }
    })
    return es.merge(bundleTasks.map(jsTask));
})

gulp.task('image', () => {
    return gulp.src(['./src/image/*', './src/image/**/*'])
        .pipe(cached('image-task'))
        .pipe(imagemin([
            imagemin.gifsicle({ interlaced: true }),
            imagemin.jpegtran({ progressive: true }),
            imagemin.optipng({ optimizationLevel: 5 }),
            imagemin.svgo({
                plugins: [
                    { removeViewBox: true },
                    { cleanupIDs: false }
                ]
            })
        ]))
        .pipe(debug({ title: 'image' }))
        .pipe(remember('image-task'))
        .pipe(size({ title: 'image' }))
        .pipe(gulp.dest(imgAssetsDir))
})

gulp.task('html', () => {
    return gulp.src('./src/page/**/*.html')
        .pipe(cached('html-task'))
        .pipe(debug({ title: 'html' }))
        .pipe(remember('html-task'))
        .pipe(gulp.dest(htmlAssetsDir))

})

gulp.task('rev', () => {
    return gulp.src([path.join(jsAssetsDir, '*.js'), path.join(cssAssetsDir, '*.css')])
        .pipe(rev())
        .pipe(gulpif('*.js', jsChannel()))
        .pipe(gulpif('*.css', gulp.dest(cssAssetsDir)))
        .pipe(rev.manifest({
            merge: true
        }))
        .pipe(gulp.dest(revAssetsDir))
})

gulp.task('rev-collector', () => {
    return gulp.src([path.join(revAssetsDir, '*.json'), path.join(htmlAssetsDir, '*.html')])
        .pipe(revCollector({
            replaceReved: true
        }))
        .pipe(htmlmin({
            removeComments: true,
            collapseWhitespace: true,
            collapseBooleanAttributes: true,
            removeAttributeQuotes: true,
            removeRedundantAttributes: true,
            removeEmptyAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            removeOptionalTags: true
        }))
        .pipe(size({ title: 'html' }))
        .pipe(gulp.dest(htmlAssetsDir))
})

gulp.task('clean', () => del([bundleAssetsDir, htmlAssetsDir], { force: true }))

gulp.task('style:watch', () => {
    const watcher = gulp.watch(['./src/scss/**/*.scss'], ['style'])
    watcher.on('change', watchDel)
})

gulp.task('image:watch', () => {
    const watcher = gulp.watch(['./src/image/**/*'], ['image'])
    watcher.on('change', watchDel)
}
)
gulp.task('html:watch', () => {
    const watcher = gulp.watch(['./src/page/**/*.html'], ['html'])
    watcher.on('change', watchDel)
})

gulp.task('watch', () => {
    watch = true
    runSequence(
        'clean',
        ['script', 'style', 'html', 'image'],
        ['style:watch', 'html:watch', 'image:watch']
    )
})

gulp.task('build', cb => {
    watch = false
    return runSequence(
        'clean',
        ['script', 'style', 'html', 'image'],
        'rev',
        'rev-collector',
        cb
    )
})

gulp.task('default', ['build'])

最后再一次贴上网站以及开源地址，欢迎各路大佬围观，吐槽，指正。

网站地址

代码开源地址