01 nodejs MVC gulp 项目搭建

文本内容

使用generator-express创建nodejs MVC DEMO

使用gulp实时编译项目

npm安装二进制包，无须再编译
wget https://nodejs.org/dist/v14.17.5/node-v14.17.5-linux-x64.tar.xz

解压后加入环境变量
export PATH=/opt/app/node-v14.17.5-linux-x64/bin:$PATH

npm install -g yarn

generator-express

An Expressjs generator for Yeoman, based on the express command line tool.

https://www.npmjs.com/

https://www.npmjs.com/package/generator-express

项目初始化

mkdir blog1

cd blog1

npm install -g yo

npm install -g generator-express

npm install -g npm-check

yo express

? Would you like to create a new directory for your project? No
? Select a version to install: MVC
? Select a view engine to use: Pug
? Select a css preprocessor to use: Sass
? Select a database to use: MongoDB
? Select a build tool to use: Gulp

npm-check -u

检查更新并全部选中，使用最新包

gulp使用说明

https://gulpjs.com/docs/en/getting-started/quick-start/

babel 能将JS翻译为浏览器识别的JS

https://www.babeljs.cn/

https://www.babeljs.cn/setup#installation

设置中选gulp

.babelrc，与package.json同目录

 {
    "presets": [  "@babel/preset-env" ],
    "plugins": [  "@babel/plugin-transform-runtime" ]
  }
  

gulpfile.js变成gulpfile.babel.js

const gulp = require('gulp');
var babel = require("gulp-babel");
const nodemon = require('gulp-nodemon');
const plumber = require('gulp-plumber');
const named = require('vinyl-named');             // 名字缩写
const uglify = require('gulp-uglify-es').default; //支持ES6的一些写法
const livereload = require('gulp-livereload');
const sass = require('gulp-sass');
const glob = require('glob');
const path = require('path')

require('babel-polyfill');

let cssTasks = new Map();
//读取src/css/admin/*.scss = > public/css/admin
let cssFiles = glob.sync(__dirname + '/src/css/+(include|admin|blog)/*.scss');
// console.log(cssFiles);

cssFiles.forEach(cssFile => {
  //给每个文件添加一个task,当某一个文件修改时，不至于编译所有文件
  let dest = path.dirname(cssFile.replace('src', 'public'));
  cssTasks.set(cssFile, function(cb){

    gulp.src(cssFile)
        .pipe(plumber())
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(gulp.dest(dest))
        .pipe(livereload());
    cb();
  });
});

function css(cb){
  gulp.series(...cssTasks.values());
  cb();
}

//-------------------js-------------------------------------------------
let jsTasks = new Map();
let jsFiles = glob.sync(__dirname + '/src/js/+(admin|blog)/*.js');
jsFiles.forEach(jsFile => {
  //给每个文件添加一个task,当某一个文件修改时，不至于编译所有文件
  let dest = path.dirname(jsFile.replace('src', 'public'));
  jsTasks.set(jsFile, function(cb){
    gulp.src(jsFile)
        .pipe(plumber())
        .pipe(named())   //名字缩写
        .pipe(babel())   //转换JS
        .pipe(uglify())  //加强ES6语法支持
        .pipe(gulp.dest(dest))
        .pipe(livereload());
    cb();
  });
});
function js(cb){
  gulp.series(...jsTasks.values());
  cb();
}

//-------------------img-------------------------------------------------
function img(cb){
  gulp.src('./src/img/*.*')
    .pipe(gulp.dest('./public/img/'))
    .pipe(livereload());
  cb();
}

function watch(cb){
  // gulp.watch('./src/css/*.scss', gulp.parallel(css));
  for(let [key, value] of cssTasks.entries()){
    // console.log(value);
    gulp.watch(key, gulp.parallel(value));
  }
  // gulp.watch('./src/js/**/*.js', gulp.parallel(js));
  for(let [key, value] of jsTasks.entries()){
    // console.log(value);
    gulp.watch(key, gulp.parallel(value));
  }
  gulp.watch('./src/img/*.*', gulp.parallel(img));
  cb();
}

function develop(cb){
  livereload.listen();
  nodemon({
    script: 'app.js',
    ext: 'js coffee pug',
    stdout: false
  }).on('readable', function () {
    this.stdout.on('data', (chunk) => {
      if (/^Express server listening on port/.test(chunk)) {
        livereload.changed(__dirname);
      }
    });
    this.stdout.pipe(process.stdout);
    this.stderr.pipe(process.stderr);
  });
  cb();
}

exports.default = gulp.parallel(img, css, js, watch, develop);

package.json

{
  "name": "mystar",
  "version": "0.0.1",
  "private": true,
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "NODE_ENV=test mocha --recursive test",
    "test:coverage": "nyc npm test",
    "test:unit": "mocha --recursive test/middleware test/models test/routes",
    "test:integration": "mocha --recursive test/integration"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",
    "body-parser": "^1.13.3",
    "bootstrap": "^5.0.2",
    "compression": "^1.5.2",
    "cookie-parser": "^1.3.3",
    "del": "^6.0.0",
    "express": "^4.13.3",
    "glob": "^7.1.7",
    "jquery": "^3.6.0",
    "method-override": "^3.0.0",
    "mongoose": "^5.12.15",
    "morgan": "^1.6.1",
    "path": "^0.12.7",
    "pug": "^3.0.2",
    "serve-favicon": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@babel/register": "^7.14.5",
    "@babel/runtime": "^7.14.6",
    "babel-core": "^7.0.0-bridge.0",
    "babel-polyfill": "^6.26.0",
    "chai": "^4.3.4",
    "debug": "^4.3.1",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-livereload": "^4.0.2",
    "gulp-nodemon": "^2.0.2",
    "gulp-plumber": "^1.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-uglify-es": "^2.0.0",
    "mocha": "^9.0.1",
    "node-sass": "^6.0.1",
    "nyc": "^15.1.0",
    "regenerator-runtime": "^0.13.7",
    "sass": "^1.35.2",
    "supertest": "^6.1.3",
    "vinyl-named": "^1.1.0"
  }
}

rm -rf node_modules/
yarn install

然后执行以下命令启动项目

gulp

如果启动失败，可以删除安装包，创建几个关键文件，然后重新安装

http://localhost:3000/

错误示例

Error in plugin "gulp-sass"
Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

  var sass = require('gulp-sass')(require('sass'));

[20:27:24] The following tasks did not complete: <parallel>, <anonymous>
[20:27:24] Did you forget to signal async completion?

教你如何在原生小程序中使用scss预处理语言