关于前端: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编辑器（不得不本人开发，没找到适合的），长征之路曾经踏出了第一步