express是node.js中的构建工具，如果需要使用express构建，首先需要安装express。

构建一个项目：

|-- app

| |-- css

| |-- js

| | `-- class

| | |-- index.js

| | `-- test.js

| `-- views

| |-- error.ejs

| `-- index.ejs

|-- server

|-- tasks

在构建完该目录后，在根目录上使用npm init -y，构建package.json文件，sudo cnpm install -g express-generator命令安装express（新版express存在在express-generator包中）然后进入server目录，通过express -e .   命令构建脚手架，其中 -e表示构建一级模板引擎

然后执行 cd . && npm install  

回到构建目录：

cd ../tasks/

mkdir util

touch util/args.js

回到根目录

touch .babelrc(使用babel时使用)

touch gulpfile.babel.js (接下来使用ES6语法，所以需要创建gulpfile.babel.js文件)

进入args.js文件，引入一个包

import yargs from 'yargs';const args = yargs    .option('production',{        boolean:true,        default:false,        describe:'min all scripts'    })    .option('watch',{        boolean:true,        default:false,        describe:'watch all files'    })    .option('verbose',{        boolean:true,        default:false,        describe:'log'    })    .option('sourcemaps',{        describe:'force the creation of sroucemaps'    })    .option('port',{        string:true,        default:8080,        describe:'server port'    })    .argvexport default args;

 

 

 

touch tasks/scripts.js

import gulp from 'gulp';import gulpif from 'gulp-if';import concat from 'gulp-concat';import webpack from 'webpack';import gulpWebpack from 'webpack-stream';import named from 'vinyl-named';import livereload from 'gulp-livereload';import plumber from 'gulp-plumber';import rename from 'gulp-rename';import uglify from 'gulp-uglify';import {log,colors} from 'gulp-util';import args from './util/args';

 

 

 

 

使用

cnpm install gulp gulp-if gulp-concat webpack webpack-stream  gulp-plumber gulp-rename gulp-uglify gulp-util gulp-livereload vinyl-named yargs --save-dev

等安装完毕后，重新进入scripts.js文件，编写：

import gulp from 'gulp';import gulpif from 'gulp-if';import concat from 'gulp-concat';import webpack from 'webpack';import gulpWebpack from 'webpack-stream';import named from 'vinyl-named';import livereload from 'gulp-livereload';import plumber from 'gulp-plumber';import rename from 'gulp-rename';import uglify from 'gulp-uglify';import {log,colors} from 'gulp-util';import args from './util/args';gulp.task('scripts',()=>{    return gulp.src(['app/js/index.js'])        .pipe(plumber({            errorHandle:function(){            }        }))        .pipe(named())        .pipe(gulpWebpack({            module:{                loaders:[{                    test:/\.js$/,                    loader:'babel'                }]            }        }),null,(err,stats)=>{        log(`Finished '${colors.cyan('scripts')}'`,stats.toString({    chunks:false}))}).pipe(gulp.dest('server/public/js'))    .pipe(rename({        basename:'cp',        extname:'.min.js'    }))    .pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))    .pipe(gulp.dest('server/public/js'))    .pipe(gulpif(args.watch,livereload()))})

 

touch tasks/pages.js

import gulp from 'gulp';import gulpif from 'gulp-if';import livereload from 'gulp-livereload';import args from './util/args';gulp.task('pages',()=>{    return gulp.src('app/**/*.ejs')        .pipe(gulp.dest('server'))        .pipe(gulpif(args.watch,livereload()))})

 

touch tasks/css.js

import gulp from 'gulp';import gulpif from 'gulp-if';import livereload from 'gulp-livereload';import args from './util/args'gulp.task('css',()=>{    return gulp.src('app/**/*.css')        .pipe(gulp.dest('server/public'))})

 

touch tasks/server.js

import gulp from 'gulp';import gulpif from 'gulp-if';import liveserver from 'gulp-live-server';import args from './util/args';gulp.task('serve',(cb)=>{    if(!args.watch) return cb();var server = liveserver.new(['--harmony','server/bin/www']);server.start();gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function(file){    server.notify.apply(server,[file]);})gulp.watch(['server/routes/**/*.js','server/app.js'],function(){    server.start.bind(server)()});})

 

touch tasks/browser.js

import gulp from 'gulp';import gulpif from 'gulp-if';import gutil from 'gulp-util';import args from './util/args'gulp.task('browser',(cb)=>{    if(!args.watch) return cb();    gulp.watch('app/**/*.js',['scripts']);    gulp.watch('app/**/*.ejs',['pages']);    gulp.watch('app/**/*.css',['css']);});

 

touch tasks/clean.js

import gulp from 'gulp';import del from 'del';import args from './util/args';gulp.task('clean',()=>{    return del(['server/public','server/views'])})

 

touch tasks/build.js

import gulp from 'gulp';import gulpSequence from 'gulp-sequence';gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));

 

touch tasks/default.js

import gulp from 'gulp';gulp.task('default',['build']);

 

 

npm i gulp-util gulp-live-server del --save-dev

cnpm i babel-loader babel-core babel-preset-env   babel-preset-es2015    --save-dev

vim gulpfile.babel.js

import requireDir from 'require-dir';requireDir('./tasks');

 

cnpm i require-dir   babel-register    babel-preset-es2015  --save-dev

cnpm i gulp-sequence cookie-parser  epxress morgan  serve-favicon  --save-dev

修改server/app.js文件：

app.use(require('connect-livereload')())

cnpm i connect-livereload  babel-polyfill --save-dev

 

 验证：

http://loalhost:3000