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预处理语言
01 nodejs MVC gulp 项目搭建的更多相关文章
- Spring MVC + Mybatis项目搭建
1.参考<Java Spring MVC项目搭建(一)——Spring MVC框架集成>配置spring mvc需要的jar包及eclipse配置(主要是针对servlet-api.jar ...
- mystar01 nodejs MVC 公共CSS,JS设置
mystar01 nodejs MVC gulp 项目搭建 config/express.js中定义别名 //将下载的第三方库添加到静态资源路径当中,方便访问 app.use('/jquery', e ...
- vue项目搭建介绍01
目录 vue项目搭建介绍01 vue 项目框架环境搭建: 创建项目: vue 项目创建流程: vue项目搭建介绍01 vue 项目框架环境搭建: vue 项目框架: vue django(类似)(vu ...
- 使用gulp+browser-sync搭建前端项目自动化以及自动刷新
前段时间使用了gulp+browser-sync才发现这个东西真的很好用. 准备工作:(1).安装nodejs.gulp是基于nodejs使用的,所以先安装nodejs,https://nodejs. ...
- freemarker + spring mvc + spring + mybatis + mysql + maven项目搭建
今天说说搭建项目,使用freemarker + spring mvc + spring + mybatis + mysql + maven搭建web项目. 先假设您已经配置好eclipse的maven ...
- Spring MVC 项目搭建 -6- spring security 使用自定义Filter实现验证扩展资源验证,使用数据库进行配置
Spring MVC 项目搭建 -6- spring security使用自定义Filter实现验证扩展url验证,使用数据库进行配置 实现的主要流程 1.创建一个Filter 继承 Abstract ...
- Spring MVC 项目搭建 -5- spring security 使用数据库进行验证
Spring MVC 项目搭建 -5- spring security 使用数据库进行验证 1.创建数据表格(这里使用的是mysql) CREATE TABLE security_role ( id ...
- Spring MVC 项目搭建 -4- spring security-添加自定义登录页面
Spring MVC 项目搭建 -4- spring security-添加自定义登录页面 修改配置文件 <!--spring-sample-security.xml--> <!-- ...
- Spring MVC 项目搭建 -3- 快速 添加 spring security
Spring MVC 项目搭建 -3- 快速 添加 spring security 1.添加 spring-sample-security.xml <!-- 简单的安全检验实现 --> & ...
随机推荐
- Burp Suite Pro 2021.10 Full (macOS, Linux) -- 查找、发现和利用漏洞
申明:底层组件来自网络论坛或开源社区的分享,本站所有软件免费分享,仅供学习和测试使用,严禁用于任何商业用途!!! 请访问原文链接:https://sysin.cn/blog/burp-suite-pr ...
- [linux]centos7.4上升级python2版本到python3.6.5 【安装双版本,默认python3】
版本声明 centos7.4 前言:linux上的python默认是版本2的,之前学django项目用的是3的版本 所以得升级下版本~ 1.下载python3.6.5 cd /usr/local/ w ...
- Calendar.set方法获取前一天的当前时刻
获取前几天的当前时刻的时间方法 Calendar cal = Calendar.getInstance(); Date date = new Date();// 获取当前时间 cal.setTime( ...
- Nginx面试题(总结最全面的面试题!!!)
https://blog.csdn.net/weixin_43122090/article/details/105461971
- 9组-Alpha冲刺-1/6
一.基本情况 队名:不行就摆了吧 组长博客:https://www.cnblogs.com/Microsoft-hc/p/15526668.html 小组人数: 8 二.冲刺概况汇报 谢小龙 过去两天 ...
- python tkinter实现俄罗斯方块 基础版
本项目最终效果见本人b站投稿av81480858 简介部分 本项目最终代码已上传github: https://github.com/BigShuang/Tetris 的1_BASIC文件夹 .其中1 ...
- NOIP模拟99(多校31)
T1 法阵 解题思路 原题3100,张口放 T1(出题人原话) 思维题,合法的情况其实就是上下两个梯形拼起来的样子. 他们的边界都是在 \(i\) 轴上面,但是不能相交. 于是我们可以尝试两者相交的纵 ...
- scrapy_电影天堂多页数据和图片下载
嵌套的 爬取 先获取第一页的标题 点击标题到第二页的图片url 1.创建项目 > scrapy startproject scrapy_movie_099 2.创建爬虫文件 spiders> ...
- Python 匿名函数用法和return语句
匿名函数用法1.什么是匿名函数 函数定义过程中,没有给定名称函数,python中用lambda表达式创建匿名函数 lambda只是一个表达式,函数体比def简单 lambda主题是一 ...
- hover 背后的数学和图形学
前端开发中,hover是最常见的鼠标操作行为之一,用起来也很方便,CSS直接提供:hover伪类,js可以通过mouseover+mouseout事件模拟,甚至一些第三方库/框架直接提供了 hover ...