webstorm + express + gulp

目录结构

├── app.js
├── gulpfile.js
├── nodemon.json
├── package.json
├── public
│   ├── front
│   │   ├── css
│   │   ├── image
│   │   └── js
│   └── libs
│       ├── art-template
│       ├── bootstrap-3.3.7-dist
│       ├── font-awesome-4.7.0
│       ├── jquery-2.1.4
│       ├── jQuery-File-Upload-master
│       ├── kkpager-1.3
│       ├── layui-2.4.5
│       └── ueditor1_4_3_3
├── routes
│   ├── bbs
│   ├── blog
│   │   ├── index.js
│   │   └── u
│   └── index.js
├── staticsrc
│   ├── image
│   │   └── README.en.md
│   ├── js
│   │   └── core.js
│   └── sass
│       └── common.scss
└── views
    ├── blog
    │   ├── index.html
    │   └── u
    └── index.html

public/front 为自动生成的目录

package.json

{
  "name": "km-boot-express",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "art-template": "^4.13.2",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "express-art-template": "^1.0.1",
    "morgan": "^1.9.1"
  },
  "devDependencies": {
    "del": "^4.1.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5"
  }
}

nodemon.json

{
  "restartable": "rs",
  "ignore": [
    ".git",
    ".svn",
    "node_modules/**/node_modules"
  ],
  "verbose": true,
  "execMap": {
    "js": "node --harmony"
  },
  "watch": [
    "views",
    "routes",
    "public/front"
  ],
  "env": {
    "NODE_ENV": "development",
    "PORT": "3000"
  },
  "ext": "js json html css"
}

nodemon 配置参考：https://www.cnblogs.com/chris-oil/p/6239097.html

app.js

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const app = express();

const indexRouter = require('./routes/index');

const blog_index_router = require('./routes/blog/index');

// 静态资源文件
app.use('/public/', express.static(path.join(__dirname, './public/')));

// 日志
app.use(morgan('short'));



// body-parser
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// art template 模板引擎
app.engine('html', require('express-art-template'));
app.set('view engine', 'express-art-template');
app.set('views', path.join(__dirname, './views/'));


app.use('/',indexRouter);
app.use('/blog',blog_index_router);

app.listen(3000,()=>{
    console.log('app is running 3000 ...');
});

gulpfile.js

const gulp = require('gulp');
const del = require('del');
const autoprefixer = require('gulp-autoprefixer');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('clean', function () {
    return del(['public/front']);
});

gulp.task('sass', function () {
    return gulp.src('./staticsrc/sass/**/*')
        .pipe(sourcemaps.init())
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove: true //是否去掉不必要的前缀 默认：true
        }))
        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(sourcemaps.write('./', {addComment: true}))
        .pipe(gulp.dest('./public/front/css'))
});


gulp.task('copyImg', function () {
    return gulp.src('./staticsrc/image/**/*')
        .pipe(gulp.dest('./public/front/image'));
});

gulp.task('copyjs', function () {
    return gulp.src('./staticsrc/js/**/*')
        .pipe(gulp.dest('./public/front/js'))
});

gulp.task('watch', function () {
    gulp.watch('./staticsrc/sass/**/*', ['sass']);
    gulp.watch('./staticsrc/js/**/*', ['copyjs']);

    // dl;kjfgs;lkjfls;kjflskflsl;skjflskjlksjflksjflksjflsjflskjfl;sjls;kjs;l

});

gulp.task('rebuild', gulp.series('clean', gulp.parallel('copyImg', 'copyjs', 'sass'),
    function watcher(done) {
        gulp.watch('./staticsrc/sass/**/*', gulp.parallel('sass'));
        gulp.watch('./staticsrc/js/**/*', gulp.parallel('copyjs'));
    })
);

gulp.task('default', gulp.series(gulp.parallel('copyImg', 'copyjs', 'sass'),
    function watcher(done) {
        gulp.watch('./staticsrc/sass/**/*', gulp.parallel('sass'));
        gulp.watch('./staticsrc/js/**/*', gulp.parallel('copyjs'));
    })
);

webstorm 配置 nodemon 自动重启

参考　https://blog.csdn.net/smiky/article/details/84598471