CMS系统开发-后台模板搭建

站在巨人的肩膀上，让我们可以走的更高看的更远。

在调研和学习CMS系统的过程中，我发现了一个国人开发的基于Node的CMS，名字叫NoderCMS，这款CMS无论是UI还是功能我觉得都很不错，很小巧，不过已经停止更新很多年了，但仍然值得学习，我的第一版的开发也以这款软件为基础。

他在技术选型上，后台用的Angular，数据库用的mongodb，UI框架用的Bootstrap3。而我数据库用的SQLite，模板渲染用的传统的ejs，UI用的ulu-ui，似乎完全不一样。

这里说下UI为什么用lulu-ui，这款ui是张鑫旭大佬开发的，体积很小，提供了核心的功能和常用组件，对于我要开发的CMS来说是不多不少，非常契合，而且这款UI不依赖其他库，js也是用原生写的，所以渲染非常快。而且兼容IE，我要写的这个项目也需要兼容IE。

当然在选择这款UI前，我也看了很多其他框架，比如bootstrap、tailwindCSS等等，但是他们都太庞大了，而且API很多，这点不符合我的项目。

下面是搭建好的后台，一张预览图

在开发初期，我没有用任何构建工具，然后像less和es6啥的都不能用，今天我基于gulp简单的写了个构建流，能够满足基本要求，模板目录看起来像下面这样：

在一个模块里面写less、ejs和js，一个文件夹一个模块，然后编译后的文件放到public目录下，文件夹和模块名字一一对应，下面是编译后的结构：

整个gulp配置很简单，gulpfile文件如下：const gulp = require('gulp');
const less = require('gulp-less');
const path = require('path');
const autoprefixer = require('gulp-autoprefixer');
const babel = require('gulp-babel');
const del = require('del');
const sourcemap = require('gulp-sourcemaps');
const gutil = require('gulp-util');
const buildPath = path.join(__dirname, 'app/public/admin');

const log = gutil.log.bind(this);
// 编译less
function style() {
  return gulp
    .src('app/view/admin/**/*.less')
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(gulp.dest(buildPath));
}

// 编译js
// 保留sourcemap方便调试
function script() {
  return gulp
    .src('app/view/admin/**/*.js')
    .pipe(sourcemap.init())
    .pipe(babel({ presets: [ '@babel/env' ] }))
    .pipe(sourcemap.write('.'))
    .pipe(gulp.dest(buildPath));
}

// 文件删除后，编译文件也删除
function fileWatch() {
  const w1 = gulp.watch('app/view/admin/**/*.less', style).on('unlink', function (file) {
    log(gutil.colors.yellow(file) + ' is deleted');
    log(file);
    const filePath = file.replace(/view\//, 'public\/').replace('.less', '.css');
    del([ filePath ]);
  });

  const w2 = gulp.watch('app/view/admin/**/*.js', script).on('unlink', function (file) {
    log(gutil.colors.yellow(file) + ' is deleted');
    const filePath = file.replace(/view\//, 'public\/');
    const fileMapPath = filePath + '.map';
    del([ filePath, fileMapPath ]);
  });

  return Promise.all([ w1, w2 ]);
}
exports.default = gulp.series(style, script, fileWatch);

到现在为止，后台模板已经初具雏形了，接下来是数据库表设计，后面还要开发一款markdown编辑器（不得不自己开发，没找到合适的），长征之路已经踏出了第一步