文本内容
使用generator-express创建nodejs MVC DEMO
使用gulp实时编译项目
npm安装
从官网下载最新版安装
https://www.npmjs.com/
generator-express
An Expressjs generator for Yeoman, based on the express command line tool.
项目初始化
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
npm install @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/register @babel/runtime babel-core babel-polyfill -D
npm install --save-dev gulp-babel@^8.0.0
npm install gulp-uglify-es vinyl-named -D
npm install "babel-core"@"^7.0.0-bridge.0" -D
npm install --save-dev node-sass@^6.0.1
npm install --save-dev sass@^1.35.2
.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" } }
sudo npm install -g gulp
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?